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