?
This document uses PHP Chinese website manual Release
表單的驗(yàn)證
HTML 5表單驗(yàn)證
checkValidity方法，setCustomValidity方法，validity對(duì)象
參考鏈接
表單的驗(yàn)證
HTML 5表單驗(yàn)證
所謂“表單驗(yàn)證”，指的是檢查用戶提供的數(shù)據(jù)是否符合要求，比如Email地址的格式。HTML 5原生支持表單驗(yàn)證，不需要JavaScript。
<input type="date" >
上面代碼指定該input輸入框只能填入日期，否則瀏覽器會(huì)報(bào)錯(cuò)。
但有時(shí)，原生的表單驗(yàn)證不完全符合需要，而且出錯(cuò)信息無法指定樣式。這時(shí)，可能需要使用表單對(duì)象的noValidate屬性，將原生的表單驗(yàn)證關(guān)閉。
var form = document.getElementById("myform");
form.noValidate = true;
form.onsubmit = validateForm;
上面代碼先關(guān)閉原生的表單驗(yàn)證，然后指定submit事件時(shí)，讓JavaScript接管表單驗(yàn)證。
此外，還可以只針對(duì)單個(gè)的input輸入框，關(guān)閉表單驗(yàn)證。
form.field.willValidate = false;
每個(gè)input輸入框都有willValidate屬性，表示是否開啟表單驗(yàn)證。對(duì)于那些不支持的瀏覽器（比如IE8），該屬性等于undefined。
麻煩的地方在于，即使willValidate屬性為true，也不足以表示瀏覽器支持所有種類的表單驗(yàn)證。比如，F(xiàn)irefox 29不支持date類型的輸入框，會(huì)自動(dòng)將其改為text類型，而此時(shí)它的willValidate屬性為true。為了解決這個(gè)問題，必須確認(rèn)input輸入框的類型（type）未被瀏覽器改變。
if (field.nodeName === "INPUT" && field.type !== field.getAttribute("type")) {
// 瀏覽器不支持該種表單驗(yàn)證，需自行部署JavaScript驗(yàn)證
}
checkValidity方法，setCustomValidity方法，validity對(duì)象
checkValidity方法表示執(zhí)行原生的表單驗(yàn)證，如果驗(yàn)證通過返回true。如果驗(yàn)證失敗，則會(huì)觸發(fā)一個(gè)invalid事件。使用該方法以后，會(huì)設(shè)置validity對(duì)象的值。
每一個(gè)表單元素都有一個(gè)validity對(duì)象，它有以下屬性。
valid：如果該元素通過驗(yàn)證，則返回true。
valueMissing：如果用戶沒填必填項(xiàng)，則返回true。
typeMismatch：如果填入的格式不正確（比如Email地址），則返回true。
patternMismatch：如果不匹配指定的正則表達(dá)式，則返回true。
tooLong：如果超過最大長度，則返回true。
tooShort：如果小于最短長度，則返回true。
rangeUnderFlow：如果小于最小值，則返回true。
rangeOverflow：如果大于最大值，則返回true。
stepMismatch：如果不匹配步長（step），則返回true。
badInput：如果不能轉(zhuǎn)為值，則返回true。
customError：如果該欄有自定義錯(cuò)誤，則返回true。
setCustomValidity方法用于自定義錯(cuò)誤信息，該提示信息也反映在該輸入框的validationMessage屬性中。如果將setCustomValidity設(shè)為空字符串，則意味該項(xiàng)目驗(yàn)證通過。
參考鏈接
Craig Buckler, HTML5 Forms: JavaScript and the Constraint Validation API