[TOC] ## 表單的驗證 ### HTML 5表單驗證 所謂“表單驗證”，指的是檢查用戶提供的數據是否符合要求，比如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，也不足以表示瀏覽器支持所有種類的表單驗證。比如，Firefox 29不支持date類型的輸入框，會自動將其改為text類型，而此時它的willValidate屬性為true。為了解決這個問題，必須確認input輸入框的類型（type）未被瀏覽器改變。 ~~~ if (field.nodeName === "INPUT" && field.type !== field.getAttribute("type")) { // 瀏覽器不支持該種表單驗證，需自行部署JavaScript驗證 } ~~~ ### checkValidity方法，setCustomValidity方法，validity對象 checkValidity方法表示執行原生的表單驗證，如果驗證通過返回true。如果驗證失敗，則會觸發一個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](http://www.sitepoint.com/html5-forms-javascript-constraint-validation-api/)