HTML5--表单新特性使用自定义错误提示消息validity属性
声明:本文为转载文章,原文传送门
一、HTML5表单新特性
二、自定义错误是什么?
三、如何自定义错误信息?
- <span style="font-size:24px;"><form action="">
- 用户名: <input type="text" id="user"/><br/>
- <input type="submit" value="提交"/>
- </form></span>
valid:true//当前输入是否有效
badInput: false //输入无效,如number框输入abc
patternMismatch: false //正则表达式验证失败
rangeOverflow: false //输入值超过max的限定
rangeUnderflow: false //输入值小于min的限定
tooLong : false //输入的字符数超过maxlength
tooShort : false //输入的字符数小于minlength
stepMismatch : false //输入的数字不符合step限制
typeMismatch : false //输入值不符合email、url的验证
valueMissing : false //未输入值,违反了required要求
customError : false //是否存在自定义错误
上述属性值的特性:
(1)只要有一个验证方面错误,某个属性就为true,valid值为false
(2)只有没有任何验证错误,所有的属性都为false,valid才能为true
(3)上述的每个错误在浏览器内部都有一个预定义的错误提示消息
(4)所有的错误消息中,只要存在“自定义的错误消息”,浏览器只显示自定义的错误消息,优先级高于浏览器预定义的错误消息
(5)当前没有自定义错误消息,所以customError : false
所以重点来了,我们怎么样自定义错误消息?
设置自定义错误消息的方法:
input.setCustomValidity('错误提示消息');
//这个相当于将input.validity.customError:true
取消自定义错误消息的方法:
input.setCustomValidity("");
//这个相当于将input.validity.customError:false
四、具体演示
- <span style="font-size:24px;"><form action="">
- 用户名: <input type="text" id="user" required/><br/>
- <input type="submit" value="提交"/>
- </form>
- <script>
- var user =document.getElementById("user");
- user.setCustomValidity("大哥!!!用户名必须填!!!");
- </script></span>
- <span style="font-size:24px;">user.setCustomValidity("");</span>