版权声明：署名，允许他人基于本文进行创作，且必须基于与原先许可协议相同的许可协议分发本文 （Creative Commons）
以前表单校验只能通过JavaScript来完成，后来HTML5增加了输入校验属性，所以只有简单的设置这些校验属性即可完成客户端校验。
<一>、使用校验属性执行校验
HTML5表单控件新增的几个校验属性，如下校验属性：
- required：该属性指定该表单控件必须填写，该属性的值必须是required或完全省略属性值，
<input name="name" type="text" required />- pattern：该属性指定该表单控件的值必须符合指定的正则表达式，该属性的值必须是一个合法的正则表达式。
<input name="code" type="text" required pattern="[0-9]{6}"/>- min、max、step：这3个属性只对数值类型、日期类型的<input/>元素有效，这3个属性控制该表单控件的值必须在min~max之间，并符合step步长。
<input name="price" type="number" min="20" max="150" step="5"/>- type：该属性指定表单控件的类型，好比如设定了type="number"，那么输入值不是有效数字时，浏览器就会把这个控件标记出来以提示类型不匹配。
<input name="type" type="email" />- maxLength：该属性指定了该表单控件的输入值的长度，表单控件通常会在用户输入是限制长度，但有些时候，就像通过程序设置，还是会超过最大长度。
<input type="number" maxlength="10"/>使用上面这几个属性可以非常方便的完成表单校验。
<二>、调用checkValidity方法进行校验
通过校验属性执行的输入校验简单、易用。但开发者想使用对话框来弹出错误提示，或者有其它的校验要求，便可以借助HTML给表单、表单控件提供的checkValidity（）方法进行校验。
- 如果表单对象调用checkValidity（）方法返回true，则表明该表单内的所有表单控件都有效，只要有任意一个表单控件不能通过输入校验，表单对象的checkValidity（）方法就会返回false。
- 如果表单对象调用checkValidity（）方法返回true，则表明该表单控件可以通过输入校验；否则返回false。
<三>、自定义错误提示
如果我们希望“创建”自己的错误提示信息，而不是显示默认的提示信息，则可以借助HTML5为表单控件新增的setCustomValidity（）方法来实现，这个方法需要接受一个字符串参数，该字符串将会作为用户“自定义”的错误提示。
只要调用了某个表单控件的setCustomValidity（）方法，就意味着这个表单控件没有通过校验，所以只有当表单控件没有通过校验时才能调用这个方法，