HTML5中表單驗證的8種方法

在深人探討表單驗證以前，讓咱們先思考一下表單驗證的真實含義。就其核心而言，表單驗證是一套系統，它爲終端用戶檢測無效的控件數據並標記這些錯誤。換言之，表單驗證就是在表單提交服務器前對其進行一系列的檢查並通知用戶糾正錯誤。

可是真正的表單驗證是什麼？

是一種優化。

之因此說表單驗證是一種優化，是由於僅經過表單驗證機制不足以保證提交給服務器的表單數據是正確和有效的。另外一方面，設計表單驗證是爲了讓Web應 用更快地拋出錯誤。換句話說，最好利用瀏覽器內置的處理機制來告知用戶網頁內包含無效的表單控件值。過去，數據在網絡上轉一圈，僅僅是爲了讓服務器通知用 戶他輸入了錯誤的數據。若是瀏覽器徹底有能力讓錯誤在離開客戶端以前就被捕獲到，那麼咱們應該利用這個優點。

不過，瀏覽器的表單檢查還不足以處理全部的錯誤。

話雖如此，HTML5仍是引入了八種用於驗證表單控件的數據正確性的方法。讓咱們依次瞭解一下，不過先要介紹一下用於反饋驗證狀態的ValidityState對象。

在支持HTML5表單驗證的瀏覽器中，能夠經過表單控件來訪問ValidityState對象:

var valCheck = document.myForm.myInput.validity;

這行代碼獲取了名爲myInput的表單元素的ValidityState對象。對象包含了對全部八種驗證狀態的引用，以及最終驗證結果。

調用方式以下：

valCheck.valid

執行完畢，咱們會獲得一個布爾值，它表示表單控件是否已經過了全部的驗證約束條件。能夠把valid特性看作是最終驗證結果：若是全部八個約束條件都經過了，valid特性就是true，不然，只要有一項約束沒經過，valid標誌都是false。
如前所述，任何表單元素都有八個可能的驗證約束條件。每一個條件在ValidityState對象中都有對應的特性名，能夠用適當的方式訪問。讓咱們逐一分析，看看它們是如何與表單控件關聯的，以及如何基於ValidityState對象來對它們進行檢查：

一、valueMissing

目的：確保表單控件中的值已填寫。

用法：在表單控件中將required特性設置爲true。

示例：

<input type="text" name="myText" required>

詳細說明：若是表單控件設置了required特性，那麼在用戶填寫或者經過代碼調用方式填值以前，控件會一直處於無效狀態。例如，空的文本輸入框沒法經過必填檢查，除非在其中輸入任意文本。輸入值爲空時，valueMissing會返回true。

二、typeMismatch

目的：保證控件值與預期類型相匹配(如numbe、email、URL等).

用法：指定表單控件的type特性值。

示例：

<input type="email" name="myEmail">

詳細說明：特殊的表單控件類型不僅是用來定製手機鍵盤， 若是瀏覽器可以識別出來表單控件中的輸入不符合對應的類型規則，好比email地址中沒有@符號 ，或者number型控件的輸入值不是有效的數字，那麼瀏 覽器就會把這個控件標記出來以提示類型不匹配。不管哪一種出錯狀況，typeMismatch將返回true。

三、patternMismatch

目的：根據表單控件上設置的格式規則驗證輸入是否爲有效格式。

用法：在表單控件上設置pattern特性，井賦予適當的匹配規則。

示例：

<input type="text" name="creditcardnumber" pattern="[0-9]{16}" title="A credit card number is 16 digits with no spaces or dashes">

詳細說明：pattern特性向開發人員提供了一種強大而靈活的方式來爲表單的控件值設定正則表達式驗證機制。當爲控件設置了pattern特性後，只要 輸入控件的值不符合模式規則，patternMismatch就會返回true值。從引導用戶和技術參考兩方面考慮，你應該在包含pattern特性的表 單控件中設置title特性以說明規則的做用。

四、tooLong

目的：避免輸入值包含過多字符。

用法：在表單控件上設置maxLength特性。

示例：

<input type="text" name="limitedText" maxLength="140">

詳細說明：若是輸入值的長度超過maxLength， tooLong特性會返回true。雖然表單控件一般會在用戶輸入時限制最大長度，但在有些狀況下，如經過程序設置，仍是會超出最大值。

五、rangeUnderflow

目的：限制數值型控件的最小值。

用法：爲表單控件設置min特性，並賦予容許的最小值。

示例：

<input type="range" name="ageCheck" min="18">

詳細說明：在須要作數值範圍檢查的表單控件中，數值極可能會暫時低於設置的下限。此時，ValidityState的rangeUnderflow特性將返回true。

六、rangeOverflow

目的：限制數值型控件的最大值。

用法：爲表單控件設置max特性，並賦予容許的最大值。

示例：

<input type="range" name="kidAgeCheck" max="12">

詳細說明：與rangeUnderflow相似，若是一個表單控件的值比max更大，特性將返回true。

七、stepMismatch

目的：確保輸入值符合min、max及step即設置。

用法：爲表單控件設置step特性，指定數值的增量。

示例：

<input type="range" name="confidenceLevel" min="0" max="100" step="5">

詳細說明：此約束條件用來保證數值符合min、max和step的要求。換句話說，當前值必須是最小值與step特性值的倍數之和。例如，範圍從0到100，step特性值爲5，此時就不容許出現17，不然stepMismatch返回true值。

八、customError

目的：處理應用代碼明確設置及計算產生的錯誤。

用法：調用setCustomValidity(message)將表單控件置於customError狀態。

示例：

passwordConfirmationField.setCustomValidity("Password values do not match.");

詳細說明：瀏覽器內置的驗證機制不適用時，須要顯示自定義驗證錯誤信息。當輸入值不符合語義規則時，應用程序代碼應設置這些自定義驗證消息。

 

自定義驗證消息的典型用例是驗證控件中的值是否一致。例如，密碼和密碼確認兩個輸人框的值不匹配。只要定製了驗證消息，控件就會處於無效狀態，而且customError返回true。要清除錯誤，只需在控件上調用setCustomValidity("")便可。

好了，以上就是HTML5中表單驗證的8種基本方法，但願對初學者有所幫助。