[学习笔记] JS验证API相关知识

发布时间 2023-08-10 14:35:22作者: EimC

checkValidity()会检查元素是否有任何输入约束条件,并且检查值是否符合约束条件。 
如下所示,Input元素下限为4上限为20:

···

<input id="password" type="number" min="4" max="20">

···

<script>

function myFunction() {
var x = document.getElementById("password");
x.setCustomValidity("");
if (inpObj.checkValidity() == false) {
x.setCustomValidity("密码应大于4小于20");
document.getElementById("demo").innerHTML = x.validationMessage;
} else {
document.getElementById("demo").innerHTML = "输入正确";
}
}
</script>

 

其中,setCustomValidity可以修改元素的validationMessage(即验证结果的信息),但在验证之前应注意先取消自定义,即将元素的验证信息设为:空字符 / null / undefined,防止checkValidity()总返回false值,具体见runoob相关教程。