版权声明:转发博客 请注明出处 否则必究 https://blog.csdn.net/lucky541788/article/details/82078738
checkValidity( ):input元素中的数据合法返回true,反之返false
setCustomValidity( ):设置validationMessage属性值,用于自定义提示
validationMessage:输出提示
<body>
<p>输入数字并点击验证按钮:</p>
<input type="number" id="nu" max="300" min="100" required>
<button type="button" onclick="myFunction()">click</button>
<p>如果输入数字100-300以外,会提示错误信息。</p>
<p id="demo"></p>
</body>
<script>
function myFunction() {
var x = document.getElementById("nu");
x.setCustomValidity("");//使用前先取消自定义,否则下次点击checkValidity总返false
if (x.checkValidity() == false) {
x.setCustomValidity("错误");
document.getElementById("demo").innerHTML = x.validationMessage;
}
else {
x.setCustomValidity("正确");
document.getElementById("demo").innerHTML = x.validationMessage;
}
}
</script>