zoukankan      html  css  js  c++  java
  • JavaScript 验证 API中的setCustomValidity()方法

    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>

     

  • 相关阅读:
    react 样式继承 属性传递
    react css-in-js
    react 利用高阶组件给页面加上动画
    react路由过渡动画效果
    REACT列表过度
    react 过渡动画组件
    VueJs之计算属性
    VueJs之判断与循环
    VusJs之入门
    MYSQL之数据报表
  • 原文地址:https://www.cnblogs.com/halao/p/7662403.html
Copyright © 2011-2022 走看看