jQuery 验证插件 email 确认问题

Question

任何人都知道为什么 email 确认不起作用？ 我也尝试了定制的 function。 内置的equalTo和我自定义的confirmEmail function 都不起作用，但其他一切都按预期工作。 即使两个 email 已验证但不检查相等性，如果我更改为，定制的 function 也从未调用：

confirmEmail: {
    required: true,
    confirmEmail: true
},

html：

<input type="text" class="width_100"  id="lastName" name="lastName" placeholder="Last name" required="true" />
<input type="email" class="width_100" id="email" name="email" placeholder="Email address" required="true" />


<script src="vendor/js/jquery-3.1.1.js"></script>
<script src="vendor/js/jquery.validate.js"></script>  // Query Validation Plugin v1.19.3

js：

$().ready(() => {
    
    const rules = {
        firstName: "required",
        lastName: "required",
        email: {
            required: true,
            email: true
        },
        confirmEmail: {
            required: true,
            equalTo: "#email"
        },
        postCode: "required",
        tnc: "required"
    };
    
    const messages = {
        firstName: "Please enter your first name.",
        lastName: "Please enter your last name.",
        confirmEmail: {
            required: "Please provide your email.",
            equalTo: "Please enter the same email as above."
        },
        postCode: "Please enter your postcode.",
        tnc: "Please accept our policy."
    };
    
    $.validator.addMethod("confirmEmail", function(value, elem) {
        return $("#email").val() == $("#confirmEmail").val();
    }, "Please enter the same email as above.");

    $("#registrationForm").validate(rules, messages);
});

Answer 1

这是没有意义的，因为第一个confirmEmail不是您的代码中显示的任何输入字段的名称......

confirmEmail: { // <- ??
    required: true,
    confirmEmail: true
},

由于与上述相同的原因，这个没有意义......

confirmEmail: {  // <- ??
    required: true,
    equalTo: "#email"
},

正确格式：

input_Field_Name: { // <- NAME of the input
    required: true,
    equalTo: "#email",
    confirmEmail: true  // <- NAME of the rule/method
},

避免在字段和规则上重复使用相同的名称可能更有意义，以防您正在这样做。

当我们有equalTo规则可用时，编写自定义规则也是没有意义的。

... function 根本不起作用，但其他一切都按预期工作。 即使是两个 email 验证但不检查相等性，自定义构建的 function 也从未调用...

不知道，因为您没有显示足够的代码来重现问题。

Answer 2

我发现了错误： $("#registrationForm").validate(rules, messages); 我将两个参数传递给了.validate() function，但只需要一个 object。 正确的语法是： $("#registrationForm").validate({rules, messages})

Answer 3

对于 confirmEmail 内部规则，确实尝试过 $('#email').val() 或 $('#email').text()

您可以通过 ID 获取值或文本，并使用 equalTo 键进行验证。