一、HTML5表单新特性
二、自定义错误是什么?
三、如何自定义错误信息?
<form action="">
用户名: <input type="text" id="user"/><br/>
<input type="submit" value="提交"/>
</form>
<form action="">
用户名: <input type="text" id="user"/><br/>
<input type="submit" value="提交"/>
</form>
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
四、具体演示
<form action="">
用户名: <input type="text" id="user" required/><br/>
<input type="submit" value="提交"/>
</form>
<script>
var user =document.getElementById("user");
user.setCustomValidity("大哥!!!用户名必须填!!!");
</script>
user.setCustomValidity("");