setCustomValidity 的用法：
var inpObj = document.getElementById("id1");
inpObj.setCustomValidity(''); // 取消自定义提示的方式
if (inpObj.checkValidity() == false) {
if(inpObj.value==""){
inpObj.setCustomValidity("不能为空！");
}else if(inpObj.value<100 || inpObj.value>300){
inpObj.setCustomValidity("请重新输入数值（100~300之间）!");
}
document.getElementById("demo").innerHTML = inpObj.validationMessage;
} else {
document.getElementById("demo").innerHTML = "输入正确";
}<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文档标题</title> </head> <body> <p>输入数字并点击验证按钮:</p> <input id="id1" type="number" min="100" max="300" required> <button onclick="myFunction()">验证</button> <p>如果输入的数字小于 100 或大于300，会提示错误信息。</p> <p id="demo"></p> </body> </html>
function myFunction() {
var inpObj = document.getElementById("id1");
inpObj.setCustomValidity(''); // 取消自定义提示的方式
if (inpObj.checkValidity() == false) {
if(inpObj.value==""){
inpObj.setCustomValidity("不能为空！");
}else if(inpObj.value<100 || inpObj.value>300){
inpObj.setCustomValidity("请重新输入数值（100~300之间）!");
}
document.getElementById("demo").innerHTML = inpObj.validationMessage;
} else {
document.getElementById("demo").innerHTML = "输入正确";
}
}
发表评论 取消回复