JavaScript 验证 API中的setCustomValidity()方法

最新推荐文章于 2023-06-18 13:46:12 发布

风一阵好冷

最新推荐文章于 2023-06-18 13:46:12 发布

阅读量1k

点赞数

分类专栏：自己学习文章标签： JavaScript 验证 API中的setCustomValidit

本文链接：https://blog.csdn.net/weixin_42834908/article/details/101073824

版权

自己学习专栏收录该内容

24 篇文章 0 订阅

订阅专栏

setCustomValidity()方法：

设置 input 元素的 validationMessage 属性，用于自定义错误提示信息的方法。

注意：使用 setCustomValidity 设置了自定义提示后，validity.customError 就会变成true，则 checkValidity() 总是会返回false，导致无论重新输入的格式正确与否，都会提示设置好的错误信息。

解决办法：用obj.validity.patternMismatch判断，如果输入的格式正确，就将setCustomValidity 清空，使JavaScript重新判断validity.customError的值。

参考：http://www.runoob.com/js/js-validation-api.html

在该链接中，提到三种清空setCustomValidity的方法，但经过测试，只有第一种方法setCustomValidity(’’)可以使用。

复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>未使用setCustomValidity()方法</title>
</head>
<body>
    <form name="test" action="" method="post">
        <input id="input" type="text" required="required" placeholder="请输入4-11位字母加数字的密码" pattern="^(?![0-9]+$)(?![a-zA-Z]+$)[0-9a-zA-Z]{4,14}$" oninput="this.setCustomValidity('')">
        <input type="submit" onclick="setMyText()">
    </form>
    <script type="text/javascript">
        function setMyText(){
            var obj = document.getElementById("input");
            if (obj.validity.patternMismatch === true) {
                obj.setCustomValidity("密码是必填的");
            } else {
                obj.setCustomValidity('');
            }
        }
    </script>
</body>
</html>

风一阵好冷

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 验证 API中的setCustomValidity()方法

setCustomValidity()方法：设置 input 元素的 validationMessage 属性，用于自定义错误提示信息的方法。注意：使用 setCustomValidity 设置了自定义提示后，validity.customError 就会变成true，则 checkValidity() 总是会返回false，导致无论重新输入的格式正确与否，都会提示设置好的错误信息。解决办法...
复制链接

扫一扫