HTML5-Web Form

1.概述
HTML5 Form提供了一些新的HTML表单元素，这些表单通过input元素的type属性指定。若浏览器不支持这些新的表单元素，则它们通常会显示为文本框。
新的表单元素也具有一些新的属性和方法。它们可以通过HTML元素的属性进行设置，也可通过编程访问，但两种访问方式的属性和方法的名称在大小写上略有不同。
•placeholder：表单提示文本。
•autocomplete：表单自动完成，这个属性在很多浏览器中早已实现。值可以是on，off或uspecified。
•autofocus：自动获得焦点。
•min和max：指定具有数值值的表单的最小值和最大值。
•step：指定数值值每次变化的大小。
•required：表单的值是否必须，是否可为空。
•valueAsNumber：这是一个方法，它具有一个返回值和一个参数，可以将文本内容转换为数字，若转换失败，返回值为NaN。
•list：该属性与datalist元素结合使用，为input元素指定可选择的下拉列表。如：
<input type="email" id="contacts" list="contactList">
<datalist id="contactList">
<option value="[email protected]" label="Racer X">
<option value="[email protected]" label="Peter">
</datalist>

2.表单验证
HTML5 Form提供了一些非常基本实用的客户端表单验证机制，这种客户端的验证机制能够将验证结果快速反馈给用户，但不能保证最终到达服务器的数据是正确的，因此，对于重要信息，必须进行服务端验证。
表单有一系列与验证相关的属性、方法和子对象。
•willValidate属性：它表明是否进行验证检查，只要表单指定了任何与验证相关的属性（如required,pattern等），则表示要进行验证检查。
•validationMessage属性：验证结果消息。
•checkValidity方法：通常表单验证检查发生在提交表单时，但调用这个方法会立即进行验证检查。

表单验证有8个方面，这8个验证依赖于ValidityState，ValidityState在编程中是input元素的validity子对象，validity有8个子属性，涉及到表单验证的8个方面，验证失败时，值为true，成功则为false。另有一个valid属性，是对这8个属性的总结，如果8个方面的验证都通过，则valid值为true，否则为false。在支持HTML5 Form的浏览器中，ValidtyState可以从任何表单控件访问，如：
var valCheck = document.myForm.myInput.validity;
要检查验证是否通过，可以这样：
valCheck.valid;
ValidtyState（validity）是一个动态的引用对象，只要获得了对它的引用，它就会随验证状态改变而更新。
validity的8个验证属性如下：
•valueMissing：对应于input的required属性。
•typeMismatch：对应于input的type属性。
•tooLong：对应于input的maxLength属性。
•rangeUnderflow：对应于input的min属性。
•rangeOverflow：对应于input的man属性。
•stepMismatch：对应于input的step属性。
•customError：如果在脚本中调用input元素的setCustomValidity(message)方法，并且，该方法的message被设定（不为空），则表明用户输入的内容不能通过自定义验证，customError的值就为true。若要清除自定义错误，可以调用setCustomValidity("")，传递一个空字符串参数。
•patternMismatch：对应于input的pattern属性。pattern属性以字符串形式指定某种格式的正则表达式，如：
<input type="text" name="creditcardnumber" pattern="[0-9]{16}"
title="A credit card number is 16 digits with no spaces or dashes">

3.关闭验证
如果由于某种原因不需要进行验证，可以直接设置form元素的noValidate属性，这样可以使form内所有表单控件不进行验证。
更实用的方法是设置表单控件的formNoValidate属性，这样可以控制单个表单控件的验证。

4.表单验证事件
当表单经过验证检查后，没有通过验证检查，那么就会发生invalid事件。通过这个事件，可以处理和检查验证失败有关的信息，并向用户反馈。例如：
// event handler for "invalid" events
function invalidHandler(evt)
{
var validity = evt.srcElement.validity;
// check the validity to see if a particular constraint failed
if (validity.valueMissing)
{
// present a UI to the user indicating that the field is missing a value
}

// perhaps check additional constraints here…

// If you do not want the browser to provide default validation feedback,
// cancel the event as shown here
evt.preventDefault();
}
// register an event listener for "invalid" events
myField.addEventListener("invalid", invalidHandler, false);