1. 程式人生 > >HTML5中表單驗證的8種方法

HTML5中表單驗證的8種方法

但是真正的表單驗證是什麼?

是一種優化。

之所以說表單驗證是一種優化,是因為僅通過表單驗證機制不足以保證提交給伺服器的表單資料是正確和有效的。另一方面,設計表單驗證是為了讓Web應 用更快地丟擲錯誤。換句話說,最好利用瀏覽器內建的處理機制來告知使用者網頁內包含無效的表單控制元件值。過去,資料在網路上轉一圈,僅僅是為了讓伺服器通知用 戶他輸入了錯誤的資料。如果瀏覽器完全有能力讓錯誤在離開客戶端之前就被捕獲到,那麼我們應該利用這個優勢。

不過,瀏覽器的表單檢查還不足以處理所有的錯誤。

話雖如此,HTML5還是引入了八種用於驗證表單控制元件的資料正確性的方法。讓我們依次瞭解一下,不過先要介紹一下用於反饋驗證狀態的ValidityState物件。

在支援Html5表單驗證的瀏覽器中,可以通過表單控制元件來訪問ValidityState物件:

var valCheck = document.myForm.myInput.validity;

這行程式碼獲取了名為myInput的表單元素的ValidityState物件。物件包含了對所有八種驗證狀態的引用,以及最終驗證結果。

呼叫方式如下:

valCheck.valid

執行完畢,我們會得到一個布林值,它表示表單控制元件是否已通過了所有的驗證約束條件。可以把valid特性看做是最終驗證結果:如果所有八個約束條件都通過了,valid特性就是true,否則,只要有一項約束沒通過,valid標誌都是false。
如前所述,任何表單元素都有八個可能的驗證約束條件。每個條件在ValidityState物件中都有對應的特性名,可以用適當的方式訪問。讓我們逐一分析,看看它們是如何與表單控制元件關聯的,以及如何基於ValidityState物件來對它們進行檢查:

1、valueMissing

目的:確保表單控制元件中的值已填寫。

用法:在表單控制元件中將required特性設定為true。

示例:

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

詳細說明:如果表單控制元件設定了required特性,那麼在使用者填寫或者通過程式碼呼叫方式填值之前,控制元件會一直處於無效狀態。例如,空的文字輸入框無法通過必填檢查,除非在其中輸入任意文字。輸入值為空時,valueMissing會返回true。

2、typeMismatch

目的:保證控制元件值與預期型別相匹配(如numbe、email、URL等).

用法:指定表單控制元件的type特性值。

示例:

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

詳細說明:特殊的表單控制元件型別不只是用來定製手機鍵盤, 如果瀏覽器能夠識別出來表單控制元件中的輸入不符合對應的型別規則,比如email地址中沒有@符號,或者number型控制元件的輸入值不是有效的數字,那麼瀏 覽器就會把這個控制元件標記出來以提示型別不匹配。無論哪種出錯情況,typeMismatch將返回true。

3、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特性以說明規則的作用。

4、tooLong

目的:避免輸入值包含過多字元。

用法:在表單控制元件上設定maxLength特性。

示例:

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

詳細說明:如果輸入值的長度超過maxLength, tooLong特性會返回true。雖然表單控制元件通常會在使用者輸入時限制最大長度,但在有些情況下,如通過程式設定,還是會超出最大值。

5、rangeUnderflow

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

用法:為表單控制元件設定min特性,並賦予允許的最小值。

示例:

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

詳細說明:在需要做數值範圍檢查的表單控制元件中,數值很可能會暫時低於設定的下限。此時,ValidityState的rangeUnderflow特性將返回true。

6、rangeOverflow

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

用法:為表單控制元件設定max特性,並賦予允許的最大值。

示例:

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

詳細說明:與rangeUnderflow類似,如果一個表單控制元件的值比max更大,特性將返回true。

7、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值。

8、customError

目的:處理應用程式碼明確設定及計算產生的錯誤。

用法:呼叫setCustomValidity(message)將表單控制元件置於customError狀態。

示例:

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

詳細說明:瀏覽器內建的驗證機制不適用時,需要顯示自定義驗證錯誤資訊。當輸入值不符合語義規則時,應用程式程式碼應設定這些自定義驗證訊息。

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

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