HTML5中有哪些表單驗證方法

這篇文章主要介紹“HTML5中有哪些表單驗證方法”，在日常操作中，相信很多人在HTML5中有哪些表單驗證方法問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”HTML5中有哪些表單驗證方法”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

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.");

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

到此，關于“HTML5中有哪些表單驗證方法”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！