JavaScript|验证API
1.checkValidity()方法和validationMessage
使用checkValidity()方法可以检查输入的合法性,使用validationMessage可以查看输入的错误提示信息:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>验证API</title>
<script>
function Fun(){
// checkValidity()函数用来检验输入内容是否合法
if(document.getElementById("input1").checkValidity()){
document.getElementById("p1").innerHTML = "合法";
}
else{
// validationMessage属性用来查看不合法的信息
document.getElementById("p1").innerHTML = document.getElementById("input1").validationMessage;
}
}
</script>
</head>
<body>
请输入10~20的数字:
<input id="input1" min="10" max="20" type="number" required>
<button onclick="Fun()">确认</button>
<p id="p1"></p>
</body>
</html>
2.Validity属性
- customError 设置了自定义的validity信息时返回true
- patternMismatch 元素的值不匹配它的模式属性时返回true
- rangeOverflow 元素值大于设置的最大值时返回true
- rangeUnderflow 元素值小于设置的最小值时返回true
- stepMismatch 元素的值不是按照规定的step属性设置时返回true
- tooLong 元素值超过了maxLength属性设置的长度
- typeMismatch 元素的值不是预期相匹配的类型
- valueMissing 元素没有值时返回true
- valid 元素合法返回true
人生没有白走的路,每一步都算数!