Html5表单验证
HTML5 给我们提供了表单验证属性，简单的我们可以要求某个表单必须要填写，复杂的我们可以添加一些正则验证。

除此之外，HTML5还提供了一些非常好用的关于表单操作的新功能。

表单控件中的新增的功能属性
1.autofocus属性
说明：当页面加载时，自动聚焦到某一个表单控件上。

值为Boolean值，一个文档中只能有一个表单控件具有此属性。

格式：<input type=”text” autofocus=”true”>
2.placeholder属性
说明：这是一个非常好用的属性，会给我们展示一段提示文字，当我们单击输入时，就会自动隐藏，内容为空时又自动显示。

格式：<input type=”text” placeholder=”请输入账号”>
3.novalidate属性
说明：此属性定义form后者某个input标签被提交时不用经过表单验证。

格式：<input type=”text” novalidate=”true”>
4.autocomplete属性
用于指示 input 元素是否能够拥有一个默认值，这个默认值是由浏览器自动补全的。

这个设定可以被属于这个form的子元素的 autocomplete 属性重载（覆盖）。

off：在每一个用到的输入域里，用户必须显式的输入一个值，或者document 以它自己的方式提供自动补全；浏览器不会自动补全输入。

on：浏览器能够根据用户之前在form里输入的值自动补全。

格式:<input type="text" autocomplate="on/off">
5.multiple属性
说明：给定输入域中可以选择多个，一般用在 file上传文件或者email提交电子邮件地址的时候。

多个值之间用逗号隔开。

格式：<input type=”email” multiple="multiple”>
表单控件中的新增的验证属性
1.required属性
说明：此属性要求该表单必须被填写，否则不能提交并且浏览器会有错误提示。

格式：<input type=”text” required=”required”>
效果展示(Chrome)：
图3-22
2.pattern属性
说明：此类型为正则验证，可以完成很复杂的验证。

格式：<input type=”text” pattern=”^[0-9]{5}$”>
CSS3中也有关于表单验证的伪类，比如说能够验证成功的:valid和验证不成功的:invalid
input:focus:valid{
outline:1px solid blue;
}
input:focus:invalid{
outline:1px solid red;
}
效果展示(Chrome)：
图3-23
3.min和max属性
说明：min和max用于数值类型的表单验证，限制用户输入的最大值和最小值，属性值为数字。

格式：<input type="number" max="10" min="5">
效果展示(Chrome)：
图3-24
4.step属性
说明：step控制数值输入时的步幅。

格式：<input type="number" min="0" max="100" step="10">
效果展示(Chrome)：
图3-25
将这些验证规则对应的放置到上一节写好的表单控件中，一个表单验证提交的页面就完成了。

如：
在电话号码验证中可以使用required和placeholder pattern等属性。

<input type="tel" name="my_tel" id="tel" requrIEd="repuired" placeholder="请输入手机号码..." pattern="^[0-9]{11}$">
在年龄的验证中可以使用min属性、max属性、required等属性。

<input type="number" name="my_age" id="age" min="0" max="99" required="required">
最终界面：
图3-26
图3-27。