js——自定义:checkValidity( )和setCustomValidity( )

版权声明:转发博客 请注明出处 否则必究 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>

猜你喜欢

转载自blog.csdn.net/lucky541788/article/details/82078738