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 |