表單驗(yàn)證的API

HTML5 為表單驗(yàn)證提供了極大的方便，在驗(yàn)證表單的方式上更加靈活和簡(jiǎn)單。HTML5 還提供了專門用于表單驗(yàn)證的屬性、方法和事件。

與驗(yàn)證有關(guān)的表單元素特性
HTML5 提供了用于輔助表單驗(yàn)證的元素特性。利用這些特性，可以為后續(xù)的表單自動(dòng)驗(yàn)證提供驗(yàn)證依據(jù)。


required特性
一旦為某個(gè)表單內(nèi)部的元素設(shè)置了required特性，那么此項(xiàng)的值不能為空，否則無(wú)法提交表單。以文本輸入框?yàn)槔恍枰砑觬equired特性即可，使用方法如下：

<input name="name" type="text" placeholder="Full Name" required /> 

如果該項(xiàng)為空，則無(wú)法提交。required特性可用于大多數(shù)輸入或選擇元素，隱藏的元素除外。

pattern特性
pattern特性用于為input元素定義一個(gè)驗(yàn)證模式。該特性值是一個(gè)正則表達(dá)式，提交時(shí)，會(huì)檢查輸入的內(nèi)容是否符合給定表達(dá)式的格式，如果輸入內(nèi)容不符合格式，則不能提交。使用方法如下：

<input name="code" type="text" value="" pattern="[0-9]{6}" placeholder="6位郵政編碼" /> 

使用pattern特性驗(yàn)證表單非常靈活。例如，前面講到的email類型的input元素，使用pattern特性完全可以實(shí)現(xiàn)相同的驗(yàn)證功能（不過(guò)email類型的用途卻不僅限于此）。

min、max和step特性
min、max和step特性專門用于指定針對(duì)數(shù)字或日期限制。min特性表示允許的最小值；max特性表示允許的最大值；step特性表示合法數(shù)據(jù)的間隔步長(zhǎng)。使用方法如下：

<input type="range" name="volume" id="volume" min="0" max="1" step="1" />

該示例中，最小值是0，最大值是1，步長(zhǎng)為1，合法的取值有0、1、2、3、4、5。


novalidate特性
novalidate特性用于指定表單或表單內(nèi)的元素在提交時(shí)不驗(yàn)證。如果form元素應(yīng)用novalidate特性，則表單中的所有元素在提交時(shí)都不再驗(yàn)證。使用方法如下：

<form action="demo_form.asp" novalidate="novalidate"> 
  <input type="email" name="user_email" /> 
  <input type="submit" /> 
</form> 

則提交時(shí)，不會(huì)驗(yàn)證表單。

表單驗(yàn)證的屬性

表單驗(yàn)證的屬性均是只讀屬性，用于獲取表單驗(yàn)證的信息。

validity 屬性
該屬性獲取表單元素的 ValidityState對(duì)象，該對(duì)象包含8個(gè)方面的驗(yàn)證結(jié)果。ValidityState對(duì)象會(huì)持續(xù)存在，每次獲取validity屬性時(shí)，返回的是同一個(gè)ValidityState對(duì)象。以一個(gè)id特性為"username"的表單元素為例，validity屬性的使用方法如下：

var validityState=document.getElementById("username").validity; 

willValidate屬性
該屬性獲取一個(gè)布爾值，表示表單元素是否需要驗(yàn)證。如果表單元素設(shè)置了required特性或pattern特性，則willValidate屬性的值為true，即表單的驗(yàn)證將會(huì)執(zhí)行。仍然以一個(gè)id特性為"username"的表單元素為例，willValidate屬性的使用方法如下：

var willValidate=document.getElementById("username").willValidate; 

validationMessage屬性
該屬性獲取當(dāng)前表單元素的錯(cuò)誤提示信息。一般設(shè)置reuired特性的表單元素，其validationMessage屬性值一般為"請(qǐng)?zhí)顚懘俗侄?quot;。仍然以一個(gè)id特性為"username"的表單元素為例，validationMessage屬性的使用方法如下：

var validationMessage=document.getElementById("username").validation  
Message;

此屬性為只讀屬性，不能直接更改。不過(guò)可以使用setCustomValidity()方法（后面介紹）來(lái)改變?cè)撝怠?/p>

ValidityState對(duì)象

ValidityState對(duì)象是通過(guò)validity 屬性獲取的，該對(duì)象有8個(gè)屬性，分別針對(duì)8個(gè)方面的錯(cuò)誤驗(yàn)證，屬性值均為布爾值。


valueMissing屬性
必填的表單元素的值為空。

如果表單元素設(shè)置了required特性，則為必填項(xiàng)。如果必填項(xiàng)的值為空，就無(wú)法通過(guò)表單驗(yàn)證，valueMissing屬性會(huì)返回true，否則返回false。


typeMismatch屬性
輸入值與type類型不匹配。

HTML5新增的表單類型如email、number、url等，都包含一個(gè)原始的類型驗(yàn)證。如果用戶輸入的內(nèi)容與表單類型不符合，則typeMismatch屬性將返回true，否則返回false。


patternMismatch屬性
輸入值與pattern特性的正則不匹配。

表單元素可通過(guò)pattern特性設(shè)置正則表達(dá)式的驗(yàn)證模式。如果輸入的內(nèi)容不符合驗(yàn)證模式的規(guī)則，則patternMismatch屬性將返回true，否則返回false。


tooLong屬性
輸入的內(nèi)容超過(guò)了表單元素的maxLength 特性限定的字符長(zhǎng)度。

表單元素可使用maxLength特性設(shè)置輸入內(nèi)容的最大長(zhǎng)度。雖然在輸入的時(shí)候會(huì)限制表單內(nèi)容的長(zhǎng)度，但在某種情況下，如通過(guò)程序設(shè)置，還是會(huì)超出最大長(zhǎng)度限制。如果輸入的內(nèi)容超過(guò)了最大長(zhǎng)度限制，則tooLong屬性返回true，否則返回false。


rangeUnderflow屬性
輸入的值小于min特性的值。

一般用于填寫數(shù)值的表單元素，都可能會(huì)使用min特性設(shè)置數(shù)值范圍的最小值。如果輸入的數(shù)值小于最小值，則rangeUnderflow屬性返回true，否則返回false。


rangeOverflow屬性
輸入的值大于max特性的值。

一般用于填寫數(shù)值的表單元素，也可能會(huì)使用max特性設(shè)置數(shù)值范圍的最大值。如果輸入的數(shù)值大于最大值，則rangeOverflow屬性返回true，否則返回false。


stepMismatch屬性
輸入的值不符合step特性所推算出的規(guī)則。

用于填寫數(shù)值的表單元素，可能需要同時(shí)設(shè)置min、max和step特性，這就限制了輸入的值必須是最小值與step特性值的倍數(shù)之和。如范圍從0到10，step特性值為2，因?yàn)楹戏ㄖ禐樵摲秶鷥?nèi)的偶數(shù)，其他數(shù)值均無(wú)法通過(guò)驗(yàn)證。如果輸入值不符合要求，則stepMismatch屬性返回true，否則返回false。


customError屬性
使用自定義的驗(yàn)證錯(cuò)誤提示信息。

有時(shí)候不太適合使用瀏覽器內(nèi)置的驗(yàn)證錯(cuò)誤提示信息，需要自己定義。當(dāng)輸入值不符合語(yǔ)義規(guī)則時(shí)，會(huì)提示自定義的錯(cuò)誤提示信息。
通常使用setCustomValidity()方法自定義錯(cuò)誤提示信息：setCustomValidity(message)會(huì)把錯(cuò)誤提示信息自定義為message，此時(shí)customError屬性值為true；setCustomValidity("")會(huì)清除自定義的錯(cuò)誤信息，此時(shí)customError屬性值為false。