h5 为表单新增了很多类型，及属性。

根据这些新增的类型及属性

h5也为我们提供了验证这些数据的js函数，这些验证表单的函数都存在了ValidityState对象中，接下来让我们一起来了解一下这些函数的用法：

ValidityState对象

ValidityState对象是通过validity 属性获取的，该对象有8个属性，分别针对8个方面的错误验证，属性值均为布尔值。

1．valueMissing属性

必填的表单元素的值为空。

如果表单元素设置了required特性，则为必填项。如果必填项的值为空，就无法通过表单验证，valueMissing属性会返回true，否则返回false。

document.getElementById(\'inp1\').validity.valueMissing; //false
document.getElementById(\'inp2\').validity.valueMissing; //true

2．typeMismatch属性

输入值与type类型不匹配。

HTML 5新增的表单类型如email、number、url等，都包含一个原始的类型验证。如果用户输入的内容与表单类型不符合，则typeMismatch属性将返回true，否则返回false。

document.getElementById(\'inp1\').validity.typeMismatch; //false
document.getElementById(\'inp2\').validity.typeMismatch; //true
document.getElementById(\'inp3\').validity.typeMismatch; //false
document.getElementById(\'inp2\').validity.typeMismatch; //true

3．patternMismatch属性

输入值与pattern特性的正则不匹配。

表单元素可通过pattern特性设置正则表达式的验证模式。如果输入的内容不符合验证模式的规则，则patternMismatch属性将返回true，否则返回false。

document.getElementById(\'inp1\').validity.patternMismatch; //false
document.getElementById(\'inp2\').validity.patternMismatch; //true

4．tooLong属性

输入的内容超过了表单元素的maxLength 特性限定的字符长度。

表单元素可使用maxLength特性设置输入内容的最大长度。虽然在输入的时候会限制表单内容的长度，但在某种情况下，如通过程序设置，还是会超出最大长度限制。如果输入的内容超过了最大长度限制，则tooLong属性返回true，否则返回false。

document.getElementById(\'inp1\').validity.tooLong; //false
document.getElementById(\'inp2\').validity.tooLong; //true in Opera, false in 其他支持的浏览器.

5．rangeUnderflow属性

输入的值小于min特性的值。

一般用于填写数值的表单元素，都可能会使用min特性设置数值范围的最小值。如果输入的数值小于最小值，则rangeUnderflow属性返回true，否则返回false。

document.getElementById(\'inp1\').validity.rangeUnderflow; //false
document.getElementById(\'inp2\').validity.rangeUnderflow; //true

6．rangeOverflow属性

输入的值大于max特性的值。

一般用于填写数值的表单元素，也可能会使用max特性设置数值范围的最大值。如果输入的数值大于最大值，则rangeOverflow属性返回true，否则返回false。

document.getElementById(\'inp1\').validity.rangeOverflow; //false
document.getElementById(\'inp2\').validity.rangeOverflow; //true

7．stepMismatch属性

输入的值不符合step特性所推算出的规则。

用于填写数值的表单元素，可能需要同时设置min、max和step特性，这就限制了输入的值必须是最小值与step特性值的倍数之和。如范围从2到6，step特性值为2，因为合法值为该范围内的偶数，其他数值均无法通过验证。如果输入值不符合要求，则stepMismatch属性返回true，否则返回false。

document.getElementById(\'inp1\').validity.stepMismatch; //false
document.getElementById(\'inp2\').validity.stepMismatch; //true

8．customError属性

使用自定义的验证错误提示信息。

有时候，不太适合使用浏览器内置的验证错误提示信息，需要自己定义。当输入值不符合语义规则时，会提示自定义的错误提示信息。

通常使用setCustomValidity()方法自定义错误提示信息：setCustomValidity(message)会把错误提示信息自定义为message，此时customError属性值为true；setCustomValidity("")会清除自定义的错误信息，此时customError属性值为false。

document.getElementById(\'inp1\').validity.customError; //false
document.getElementById(\'inp2\').setCustomValidity(\'Invalid\');
document.getElementById(\'inp2\').validity.customError; //true
checkValidity

返回的也是布尔值，通过验证返回真，否则返回假。

此方法作用在form表单上，验证的准确度还有待考量。

var Form = document.getElementById(\'profileform\'),
submitB = document.getElementById(\'testbutton\');
submitB.οnclick=function(){
alert(Form.checkValidity());
}
setCustomValidity

自定义错误提示信息。用法如上customError方法中的实例代码。