html5表单验证

Html5表单验证

HTML5 给我们提供了表单验证属性，简单的我们可以要求某个表单必须要填写，复杂的我们可以添加一些正则验证。除此之外，HTML5还提供了一些非常好用的关于表单操作的新功能。

表单控件中的新增的功能属性

1.autofocus属性

说明：当页面加载时，自动聚焦到某一个表单控件上。值为Boolean值，一个文档中只能有一个表单控件具有此属性。

格式：

2.placeholder属性

说明：这是一个非常好用的属性，会给我们展示一段提示文字，当我们单击输入时，就会自动隐藏，内容为空时又自动显示。

格式：

3.novalidate属性

说明：此属性定义form后者某个input标签被提交时不用经过表单验证。

格式：

4.autocomplete属性

用于指示 input 元素是否能够拥有一个默认值，这个默认值是由浏览器自动补全的。这个设定可以被属于这个form的子元素的 autocomplete 属性重载（覆盖）。

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

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

格式:

5.multiple属性

说明：给定输入域中可以选择多个，一般用在 file上传文件或者email提交电子邮件地址的时候。多个值之间用逗号隔开。

格式：

效果展示(Chrome)：

图3-24

4.step属性

说明：step控制数值输入时的步幅。

格式：

效果展示(Chrome)：

图3-25

将这些验证规则对应的放置到上一节写好的表单控件中，一个表单验证提交的页面就完成了。

如：

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

在年龄的验证中可以使用min属性、max属性、required等属性。

最终界面：

图3-26

图3-27