HTML5 表单验证的元素特性

表单验证的API

HTML5 为表单验证提供了极大的方便，在验证表单的方式上更加灵活和简单。HTML5 还提供了专门用于表单验证的属性、方法和事件。

与验证有关的表单元素特性
HTML5 提供了用于辅助表单验证的元素特性。利用这些特性，可以为后续的表单自动验证提供验证依据。


required特性
一旦为某个表单内部的元素设置了required特性，那么此项的值不能为空，否则无法提交表单。以文本输入框为例，只需要添加required特性即可，使用方法如下：

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

如果该项为空，则无法提交。required特性可用于大多数输入或选择元素，隐藏的元素除外。

pattern特性
pattern特性用于为input元素定义一个验证模式。该特性值是一个正则表达式，提交时，会检查输入的内容是否符合给定表达式的格式，如果输入内容不符合格式，则不能提交。使用方法如下：

<input name="code" type="text" value="" pattern="[0-9]{6}" placeholder="6位邮政编码" /> 

使用pattern特性验证表单非常灵活。例如，前面讲到的email类型的input元素，使用pattern特性完全可以实现相同的验证功能（不过email类型的用途却不仅限于此）。

min、max和step特性
min、max和step特性专门用于指定针对数字或日期限制。min特性表示允许的最小值；max特性表示允许的最大值；step特性表示合法数据的间隔步长。使用方法如下：

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

该示例中，最小值是0，最大值是1，步长为1，合法的取值有0、1、2、3、4、5。


novalidate特性
novalidate特性用于指定表单或表单内的元素在提交时不验证。如果form元素应用novalidate特性，则表单中的所有元素在提交时都不再验证。使用方法如下：

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

则提交时，不会验证表单。

表单验证的属性

表单验证的属性均是只读属性，用于获取表单验证的信息。

validity 属性
该属性获取表单元素的 ValidityState对象，该对象包含8个方面的验证结果。ValidityState对象会持续存在，每次获取validity属性时，返回的是同一个ValidityState对象。以一个id特性为"username"的表单元素为例，validity属性的使用方法如下：

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

willValidate属性
该属性获取一个布尔值，表示表单元素是否需要验证。如果表单元素设置了required特性或pattern特性，则willValidate属性的值为true，即表单的验证将会执行。仍然以一个id特性为"username"的表单元素为例，willValidate属性的使用方法如下：

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

validationMessage属性
该属性获取当前表单元素的错误提示信息。一般设置reuired特性的表单元素，其validationMessage属性值一般为"请填写此字段"。仍然以一个id特性为"username"的表单元素为例，validationMessage属性的使用方法如下：

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

此属性为只读属性，不能直接更改。不过可以使用setCustomValidity()方法（后面介绍）来改变该值。

ValidityState对象

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


valueMissing属性
必填的表单元素的值为空。

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


typeMismatch属性
输入值与type类型不匹配。

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


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

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


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

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


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

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


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

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


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

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


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

有时候不太适合使用浏览器内置的验证错误提示信息，需要自己定义。当输入值不符合语义规则时，会提示自定义的错误提示信息。
通常使用setCustomValidity()方法自定义错误提示信息：setCustomValidity(message)会把错误提示信息自定义为message，此时customError属性值为true；setCustomValidity("")会清除自定义的错误信息，此时customError属性值为false。