HTML5 新增表单验证专题

一、HTML5 表单的特点

HTML5 表单增加了许多内置的控件和控件属性；

XHTML 中需要放在 form 之中的诸如 input/button/select/textarea 等标签元素，在 HTML 5 中完全可以放在页面任何位置，并通过新增的 form 属性指向元素所属表单的 ID 值，即可关联起来。

二、HTML5 新增的控件类型

1、email 输入类型

要求输入格式正确的 email 地址，否则浏览器不允许提交，同时会提示错误信息。

2、url 输入类型

要求输入格式正确的 URL 地址，Opera 中会自动在开始处添加 http://

3、日期时间相关输入类型

目前 MS 只有 Opera/Chrome 新版本支持，且展示效果也不一样。

4、number 输入类型

要求输入格式正确的数字。

5、range 类型

显示一个可拖动的滑块条，通过设定 max/min/step 值限定拖动范围，拖动时会反馈给 value 一个值。

6、search 输入类型

输入一个搜索关键字，通过 results=s 可显示一个搜索小图标。

6、tel 输入类型

要求输入一个电话号码，但实际上并没有特殊的验证，与 text 类型没什么区别。

7、color输入类型

可让用户通过颜色选择器选择一个颜色值，并反馈到 value 中。

三、HTML5 新增的表单属性

1、placeholder 属性

实现点击清除表单初始值，MS 除了 Firefox，其他标准浏览器都能很好的支持。

2、require/pattern 属性

表单验证属性 require 类型时，若输入值为空，则拒绝提交并出现提示，注意在 Opera 中必须指定 name 值，否则无效果。

3、autofocus 属性

默认聚焦属性，可在页面加载时聚焦到一个表单控件，类似于 JS 的 focus()

4、list 属性

需要与 datalist 属性共用，datalist 是对选择框的记忆，而 list 属性可以为选择框自定义记忆的内容。

5、max/min/step 属性

限制值的输入范围，以及值的输入渐进程度，比如可在 number 设定输入最大值最小值，或在 range 中设定拖动阶梯。

6、autocomplete 属性

此属性是为表单提供自动完成功能，如果该属性为打开状态可很好地自动完成，一般来说，此属性必须启动浏览器的自动完成功能。

7、data 属性

HTML5 支持 data 属性，为 select 控件外联数据源，可以在 select 下拉别表动态的添加来自数据库的各组选项，比如说国家、省市列表等等。

8、XML Submission 编码格式

常见的是 Web Form 的编码格式是 application/x-www-form-urlencoded，这种格式将数据送到服务器端，可以方便的存取。

HTML5 提供一种新的数据格式：XML Submission，即 application/x-www-form+xml。简单的举例说，服务器端将直接接收到 XML 形式的表单数据。