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