jquery 验证 - 调用某些元素的 .valid() 方法未清除错误

Question

我正在使用 jquery 验证插件来验证我的表单。

当我在另一个元素验证中调用某个元素的 .valid() 方法时，当前元素错误消息没有被删除。

假设我有元素 E1 和 E2 。元素 E1 的验证方法是 Method1。在 Method1 中，如果我调用 E2.valid() 以编程方式触发验证。即使元素有效，E1 中的错误消息也没有被删除。

请查找代码。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Validate IP Address using jQuery</title>
    <script type="text/javascript"
    src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js">
    </script>
    <script type="text/javascript" src=
"http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js">
    </script>
    <script type="text/javascript">
        $(document).ready((function() {
            $.validator.addMethod('IP1Checker', function(value) {
                $("#ip2").valid();
                return isValidIPAddress(value);
            }, 'Invalid IP address');

            $.validator.addMethod('IP2Checker', function(value) {
            return isValidIPAddress(value);
            }, 'Invalid IP address');

            $('#form1').validate({
                rules: {
                    ip: {
                        required: true,
                        IP1Checker: true
                    },
                    ip2: {
                        required: true,
                        IP2Checker: true
                    }
                }
            });

            function isValidIPAddress(value) {
            var isValid = /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(value);
            if (isValid && (value === "0.0.0.0" || value === "255.255.255.255")) {
                isValid = false;
            }
            return isValid;
        }

        }));
    </script>
</head>
<body>
<form id="form1">
    <input id="ip" name="ip" type="text"  /> 
    <input id="ip2" name="ip2" type="text"  /> 
    <input id="Submit2" type="submit" value="submit" />
 </form>
</body>
</html>

谢谢。

Answer 1

首先，jQuery v1.4.2 和 jQuery Validate v1.7 太旧了（大约 2010 年），应该更新。

$.validator.addMethod('IP1Checker', function(value) {
    $("#ip2").valid();  // <- you shouldn't do this
    return isValidIPAddress(value);
}, 'Invalid IP address');

您不应从 .addMethod() 方法中调用 .valid()，因为它可能会将所有内容都抛入循环中。 .addMethod() 方法仅用于创建新的验证规则，不适用于其他功能，例如以编程方式触发验证测试。（验证测试在特定字段或表单上运行所有规则。验证规则根据一个特定规则评估一个特定字段。）

您甚至不需要自定义方法来检查 IP 地址。只需使用已内置到插件 the additional-methods.js file 中的 ipv4 规则。

$('#form1').validate({
    rules: {
        ip: {
            required: true,
            ipv4: true
        },
        ip2: {
            required: true,
            ipv4: true
        }
    }
});

演示：https://jsfiddle.net/p5gn6zhe/

就字段 #1 的自定义 IP 规则内的字段 #2 调用 .valid() 而言；没有清楚地解释为什么要这样做。您是否希望字段 #2 验证取决于字段 #1 是否已填写？如果是这样，那就完全是另一回事了。

否则，您将使用外部处理程序触发 .valid()。

$('#ip').on('keyup blur', function() {
    $("#ip2").valid();
});

演示 2：https://jsfiddle.net/p5gn6zhe/2/

jquery 验证 - 调用某些元素的 .valid() 方法未清除错误

jquery validation - calling .valid() method of some element is not clearing the error

javascript

jquery

jquery-validate

angularjs