HTML5新增表单验证
HTML5新增屬性:
?
| 屬性 | 描述 |
| placeholder | 提供一種提示,輸入域為空時顯示,獲得焦點輸入內容后消失 |
| required | 規定輸入域不能為空 |
| pattern | 規定驗證input域的模式(正則表達式) |
示例:
<input type=”text”?id=”uName”?placeholder=”英文、數字長度為6-10個字符”?required pattern=”[a-zA-Z0-9]{6,10}”/>
validity屬性:
validityState對象:
| 屬性 | 描述 |
| valueMissing | 表單元素設置了required屬性,則為必填項,如果必填項的值為空,則無法通過表單的驗證,valueMissing的值會返回true否則返回false |
| typeMismatch | 輸入值與type類型不匹配.HTML5新增的表單類型如email,number,url等,都包含一個原始的類型驗證,如果用戶輸入的值與表單類型不匹配,則typeMismatch的值返回true,否則返回false |
| patternMismatch | 輸入值與pattern特性的正則表達式不匹配,如果輸入的值不符合pattern驗證模式的規則,則patternMismatch的值返回true否則返回false |
| tooLong | 輸入的內容超過了表單元素的maxLength特性限定的字符長度,雖然在輸入的時候會限制表單內容的長度,但在某種情況下,如通過程序設置,還是會超出最大長度設置,如果輸入內容超出了最大長度設置,則tooLong值返回true否則返回false |
| rangeUnderflow | 輸入的值小于min特性的值,如果輸入的數值小于最小值,則rangeUnderflow的值返回true,否則返回false |
| rangeOverflow | 輸入的值大于max特性的值,如果輸入的值大于最大值,則rangeOverflow的值返回true,否則返回false |
| stepMismatch | 輸入的值不符合step屬性推算出的規則.用于填寫數值的表單元素可能需要同時設置min,max和step的屬性,這就限制了輸入的值必須是最小值與step屬性值的倍數之和,例如:范圍從0到10,step特性值為2,因為合法值為該范圍的偶數,其他數值均無法通過驗證。如果輸入的值不符合要求則stepMismatch返回true否則返回false |
| customError | 使用自定義的錯誤驗證信息.使用setCustomValidity()方法自定義錯誤提示信息:setCustomValidity(message)會把錯誤提示信息設置為message,此時customError的值為true,setCustomValidity(“”)會清除定義的錯誤提示信息,此時customError的值為false |
轉載于:https://www.cnblogs.com/cosmosray/p/7978605.html
總結
以上是生活随笔為你收集整理的HTML5新增表单验证的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: tensorflow基础-placeho
- 下一篇: java 多线程 day12 读写锁