h5 為表單新增了很多類型，及屬性。

根據這些新增的類型及屬性 h5也為我們提供了驗證這些數據的js函數，這些驗證表單的函數都存在了ValidityState對象中，接下來讓我們一起來了解一下這些函數的用法：

 

ValidityState對象

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

1．valueMissing屬性

必填的表單元素的值為空。

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

<input id="inp1" type="text" value="foo" required/>
<input id="inp2" type="text" value="" required/>
<script type="text/javascript">
    document.getElementById('inp1').validity.valueMissing; //false
    document.getElementById('inp2').validity.valueMissing; //true
</script>

 

2．typeMismatch屬性

輸入值與type類型不匹配。

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

<input id="inp1" type="url" value="http://foo.com" />
<input id="inp2" type="url" value="foo" />
<input id="inp3" type="email" value="foo@foo.com" />
<input id="inp2" type="email" value="bar" />
<script type="text/javascript">
    document.getElementById('inp1').validity.typeMismatch; //false
    document.getElementById('inp2').validity.typeMismatch; //true
    document.getElementById('inp3').validity.typeMismatch; //false
    document.getElementById('inp2').validity.typeMismatch; //true
</script>

 

3．patternMismatch屬性

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

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

<input id="inp1" type="text" value="1234" />
<input id="inp2" type="text" value="" pattern="[a-z]{2}"/>
<script type="text/javascript">
   document.getElementById('inp1').validity.patternMismatch;  //false
   document.getElementById('inp2').validity.patternMismatch;  //true
</script>

 

4．tooLong屬性

輸入的內容超過了表單元素的maxLength 特性限定的字符長度。

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

<!--tooLong: true 標識是否節點的 value 長度超過了 maxlength 屬性值。所有的瀏覽器都會阻止用戶輸入超過最大長度值的內容。-->
<input id="inp1" type="text" value="A" maxlength="1" />
<input id="inp2" type="text" value="AB" maxlength="1" />
<script type="text/javascript">
    document.getElementById('inp1').validity.tooLong; //false
    document.getElementById('inp2').validity.tooLong; //true in Opera, false in 其他支持的瀏覽器.
</script>

 

5．rangeUnderflow屬性

輸入的值小於min特性的值。

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

<input id="inp1" type="number" value="3" min="2"/>
<input id="inp2" type="number" value="1" min="2"/>
<script type="text/javascript">
    document.getElementById('inp1').validity.rangeUnderflow; //false
    document.getElementById('inp2').validity.rangeUnderflow; //true
</script>

 

6．rangeOverflow屬性

輸入的值大於max特性的值。

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

<input id="inp1" type="number" value="1" max="2"/>
<input id="inp2" type="number" value="3" max="2"/>
<script type="text/javascript">
    document.getElementById('inp1').validity.rangeOverflow; //false
    document.getElementById('inp2').validity.rangeOverflow; //true
</script>

 

7．stepMismatch屬性

輸入的值不符合step特性所推算出的規則。

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

<input id="inp1" type="number" value="4" min="2" max="6" step="2"/>
<input id="inp2" type="number" value="3" min="2" max="6" step="2"/>
<script type="text/javascript">
    document.getElementById('inp1').validity.stepMismatch; //false
    document.getElementById('inp2').validity.stepMismatch; //true
</script>

 

8．customError屬性

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

有時候，不太適合使用瀏覽器內置的驗證錯誤提示信息，需要自己定義。當輸入值不符合語義規則時，會提示自定義的錯誤提示信息。

通常使用setCustomValidity()方法自定義錯誤提示信息：setCustomValidity(message)會把錯誤提示信息自定義為message，此時customError屬性值為true；setCustomValidity("")會清除自定義的錯誤信息，此時customError屬性值為false。

<input id="inp1" type="text" />
<input id="inp2" type="text" />
<script type="text/javascript">
    document.getElementById('inp1').validity.customError; //false
    document.getElementById('inp2').setCustomValidity('Invalid');
    document.getElementById('inp2').validity.customError; //true
</script>

 

checkValidity

返回的也是布爾值，通過驗證返回真，否則返回假。

此方法作用在form表單上，驗證的准確度還有待考量。

<form id="profileform" name="profileform">
    <input type="text" id="firstname" required>
    <input type="button" id="testbutton" value="Test">
</form>
<script>
var Form = document.getElementById('profileform'),
    submitB =  document.getElementById('testbutton');

submitB.onclick=function(){

　　alert(Form.checkValidity());

}

</script>

 

setCustomValidity

自定義錯誤提示信息。用法如上customError方法中的實例代碼。