正文
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 |
