用到的事件：
oninput 在值發生變化時立馬觸發
oninvalid 在不符合驗證的時候觸發
onchange 雖然觸發值會發生變化，但不是立刻觸發，要滑鼠失去焦點時才能觸發
onfocus 在獲得焦點的時候觸發
效果圖
doctype html>
<
html
lang
="en"
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>form
title
>
<
style
>
.container
.item
input,select
.item label
select
input[type=submit]
input:required,select:required
input:required:valid,select:required:valid
input:focus:invalid,select:focus:invalid
style
>
head
>
<
body
>
<
div
class
="container"
>
<
form
action
="#"
>
<
div
class
="item"
>
<
label
for="tel"
>手機號
label
>
<
input
type
="tel"
id="tel"
placeholder
="請輸入手機號碼"
required pattern
="^1[0-9]$"
oninput
="this.setcustomvalidity('')"
oninvalid
="this.setcustomvalidity('請輸入正確手機號哈')"
>
div>
<
div
class
="item"
>
<
label
for="password"
>密碼
label
>
<
input
type
="password"
id="password"
placeholder
="6-20位"
required pattern
="^[a-za-z0-9]\w$"
oninput
="this.setcustomvalidity('')"
oninvalid
="this.setcustomvalidity('請輸入正確密碼哈')"
onchange
="checkpwd()"
>
div>
<
div
class
="item"
>
<
label
for="repassword"
>確認密碼
label
>
<
input
type
="password"
id="repassword"
placeholder
="確認密碼"
required oninput
="this.setcustomvalidity('')"
oninvalid
="this.setcustomvalidity('請輸入正確密碼哈')"
onchange
="checkpwd()"
>
div>
<
div
class
="item"
>
<
label
for="choose"
>了解方式
label
>
<
select
name
="choose"
id="choose"
required
>
<
option
value
="">--請選擇--
option
>
<
option
value
="">選項一
option
>
<
option
value
="">選項二
option
>
<
option
value
="">選項三
option
>
select
>
div>
<
input
type
="submit"
value
="提交"
>
form
>
div>
<
script
>
function
checkpwd()
else
}script
>
body
>
html
>
HTML5表單驗證
在網上搜尋表單驗證，大多數都是js寫的，比較複雜。但是翻閱了html5的新標籤之後，發現html5原生支援對正規表示式 非空的檢測，即pattern，required標籤。如下即可實現該輸入框非空，且是正整數 不過在提交表單時，如果輸入框不合規範，預設的提示並不友好，如果想要更改預設的提示，需要加入...
html5表單自動驗證
在html5 中，在增加了大量的表單元素與屬性的同時，也增加了大量在提交時對表單與表單內新增元素進行內容有效性驗證的功能，接下來我們來講一下自動驗證。在html5中，通過對元素使用屬性的方法，可以實現在表單提交時執行自動驗證的功能，在執行 後，將在表單提交時自動驗證輸入的內容是否為數字，如果驗證通不...
HTML5新增表單驗證
html5新增屬性 屬性描述 placeholder 提供一種提示,輸入域為空時顯示,獲得焦點輸入內容後消失 required 規定輸入域不能為空 pattern 規定驗證input域的模式 正規表示式 示例 validity屬性 validitystate物件 屬性描述 valuemissing ...