這次帶給大家H5表單驗證有哪些方法，H5表單驗證的注意事項有哪些，以下就是實戰案例，一起來看一下。
在深人探討表單驗證之前，讓我們先思考一下表單驗證的真實意義。就其核心而言，表單驗證是一套系統，它為終端用戶檢測無效的控制項資料並標記這些錯誤。換言之，表單驗證就是在表單提交伺服器前對其進行一系列的檢查並通知使用者修正錯誤。
但是真正的表單驗證是什麼？
是一種最佳化。
之所以說表單驗證是一種最佳化，是因為僅透過表單驗證機制不足以保證提交給伺服器的表單資料是正確且有效的。另一方面，設計表單驗證是為了讓Web應 用更快地拋出錯誤。換句話說，最好利用瀏覽器內建的處理機制來告知使用者網頁內包含無效的表單控制項值。過去，資料在網路上轉一圈，只是為了讓伺服器通知用 戶他輸入了錯誤的資料。如果瀏覽器完全有能力讓錯誤在離開客戶端之前就被捕獲到，那麼我們應該利用這個優勢。
不過，瀏覽器的表單檢查還不足以處理所有的錯誤。
話雖如此，HTML5還是引進了八種用於驗證表單控制項的資料正確性的方法。讓我們依序了解一下，不過先要介紹一下用於回饋驗證狀態的ValidityState物件。
在支援Html5表單驗證的瀏覽器中，可以透過表單控制項來存取ValidityState物件:
var valCheck = document.myForm.myInput.validity;
登入後複製
這行程式碼取得了名為myInput的表單元素的ValidityState物件。物件包含了對所有八種驗證狀態的引用，以及最終驗證結果。
呼叫方式如下：
執行完畢，我們會得到一個布林值，它表示表單控制項是否已通過了所有的驗證限制條件。可以把valid特性看做是最終驗證結果：如果所有八個約束條件都通過了，valid特性就是true，否則，只要有一項約束沒通過，valid標誌都是false。
如前所述，任何表單元素都有八個可能的驗證約束條件。每個條件在ValidityState物件中都有對應的特性名，可以用適當的方式存取。讓我們逐一分析，看看它們是如何與表單控制項關聯的，以及如何基於ValidityState物件來對它們進行檢查：
1、valueMissing
##目的：確保表單控制項中的值已填入。
用法：在表單控制項中將required特性設為true。
範例：<input type="text" name="myText" required>
登入後複製
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("")即可。
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
spring mvc+localResizeIMG实现H5端图片压缩上传
canvas与h5如何实现视频截图功能
以上是H5表單驗證有哪些方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
