validity屬性

表單元素對象具有此屬性，返回值是一個ValidityState對象。

ValidityState對象的名稱是合成詞，如有兩個單詞構成：

(1).validity：翻譯成漢語具有"驗證"的意思。

(2).state：翻譯成漢語具有"狀態"的意思。

顧名思義，此對象包含有表單元素與驗證狀態相關的信息。

當文本框內容為空的時候，點擊提交按鈕會彈出一個驗證失敗提示。

此時ValidityState對象包含了相關信息，截圖如下：

轉存失敗重新上傳取消

此對象具有多個屬性，屬性值代表著當前表單元素的相關驗證狀態。

相關屬性說明如下：

(1).badInput：標識當前輸入是否是無效輸入，比如number控件，輸入的卻是字符串，true表示無效輸入。

(2).customError ：標識當前是否是自定義驗證錯誤信息，true表示是。

(3).patternMismatch：標識輸入內容是否與pattern規定的規則匹配，true表示是。

(4).rangeOverflow：標識輸入的數值是否超過max屬性限制，true表示超過。

(5).rangeUnderflow：標識輸入的數值是否小于min屬性限制，true表示小于。

(6).stepMismatch：標識輸入的數值是否符合step屬性限制，true表示不符合。

(7).tooLong：標識輸入的字符串長度是否超過maxlength屬性限制，true表示超過。

(8).tooShort：標識輸入的字符串長度是否小于minlength屬性限制，true表示小于。

(9).typeMismatch：標識輸入的內容是否格式不符合規定，不符合url或者email等限制，true表示不符合。

(10).valid：標識當前表單輸入是否完全符合要求，true表示滿足。

(11).valueMissing ：標識當前表單元素未滿足required要求，true表示未滿足。

特別說明：只要有一個地方不滿足驗證條件，valid屬性值就為false。

總結

以上是生活随笔為你收集整理的html5伪类触发机制,HTML5表单验证的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。