javascript验证API

约束验证DOM方法

checkValidity()：如果input元素中的数据是合法的就返回true，否则返回false

setCustomValidity()：设置input元素的validationMessage属性，用于自定义错误提示信息的方法。

使用setCustomValidity设置了自定义提示后，validity.customError就会变成true，否则checkValidity总是会返回false

 

约束验证DOM属性

validity：布尔属性值，返回input输入值是否合法

validationMessage：浏览器错误提示信息

willValidate：指定input是否需要验证

 

validity属性

customError 设置为true,如果设置了自定义的validity信息
patternMismatch 设置为true,如果元素的值不匹配它的模式属性
rangeOverflow 设置为true,如果元素的值大于设置的最大值
rangeUnderflow 设置为true,如果元素的值小于它的最小值
stepMismatch 设置为true,如果元素的值不是按照规定的step属性设置
tooLong 设置为true,如果元素的值超过了maxLength属性设置的长度
typeMismatch 设置为true,如果元素的值不是预期相匹配的类型
valueMissing 设置为true，如果元素(required属性)没有值
valid 设置为true，如果元素的值是合法的

 

比如：

<input id="id1" type="number" max="100">
<button onclick="myFunction()">验证</button>
 
<p id="demo"></p>
 
<script>
function myFunction() {
    var txt = "";
    if (document.getElementById("id1").validity.rangeOverflow) {
       txt = "输入的值太大了";
    }
    document.getElementById("demo").innerHTML = txt;
}
</script>

代表如果输入的值大于100，会提示“输入的值太大了”