HTML5 表單驗證的元素特性

表單驗證的API

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

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


required特性
一旦為某個表單內(nèi)部的元素設(shè)置了required特性，那么此項的值不能為空，否則無法提交表單。以文本輸入框為例，只需要添加required特性即可，使用方法如下：

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

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

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

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

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

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

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

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


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

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

則提交時，不會驗證表單。

表單驗證的屬性

表單驗證的屬性均是只讀屬性，用于獲取表單驗證的信息。

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

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

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

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

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

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

此屬性為只讀屬性，不能直接更改。不過可以使用setCustomValidity()方法（后面介紹）來改變該值。

ValidityState對象

ValidityState對象是通過validity 屬性獲取的，該對象有8個屬性，分別針對8個方面的錯誤驗證，屬性值均為布爾值。


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

如果表單元素設(shè)置了required特性，則為必填項。如果必填項的值為空，就無法通過表單驗證，valueMissing屬性會返回true，否則返回false。


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

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


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

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


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

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


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

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


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

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


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

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


customError屬性
使用自定義的驗證錯誤提示信息。

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