javascript - JQuery 验证匹配字段

Question

我正在开发一个带有注册表单的项目。我有 2 个电子邮件字段和 2 个密码字段，每个字段都需要相互匹配。我在 ASP.NET MVC 4 (C#) 框架中使用 JQuery 验证和 Bootstrap。即使它们匹配，字段也会收到不匹配的错误。

HTML

Registration Form

<div class="row">
    <form id="formRegister" class="form-horizontal col-xs-5">
        <div class="form-group">
            <label for="textFirstName" class="control-label col-xs-2">First name</label>
            <div class="col-xs-4">
                <input type="text" name="textFirstName" class="form-control" />
            </div>
            <div class="col-xs-6"></div>
        </div>
        <div class="form-group">
            <label for="textLastName" class="control-label col-xs-2">Last name</label>
            <div class="col-xs-4">
                <input type="text" name="textLastName" class="form-control" />
            </div>
            <div class="col-xs-6"></div>
        </div>
        <div class="form-group">
            <label for="textEmail" class="control-label col-xs-2">Email</label>
            <div class="col-xs-4">
                <input type="text" name="textEmail" class="form-control" />
            </div>
            <div class="col-xs-6"></div>
        </div>
        <div class="form-group">
            <label for="textEmail2" class="control-label col-xs-2">Reenter email</label>
            <div class="col-xs-4">
                <input type="text" name="textEmail2" class="form-control" />
            </div>
            <div class="col-xs-6"></div>
        </div>
        <div class="form-group">
            <label for="passwordPW1" class="control-label col-xs-2">Password</label>
            <div class="col-xs-4">
                <input type="password" name="passwordPW1" class="form-control" />
            </div>
            <div class="col-xs-6"></div>
        </div>
        <div class="form-group">
            <label for="passwordPW2" class="control-label col-xs-2">Reenter Password</label>
            <div class="col-xs-4">
                <input type="password" name="passwordPW2" class="form-control" />
            </div>
            <div class="col-xs-6"></div>
        </div>
        <div class="form-group">
            <div class="btn-group col-xs-offset-2 col-xs-5">
                <button type="submit" class="btn btn-info">Submit</button>
                <button type="reset" class="btn btn-info">Clear</button>
            </div>
        </div>

    </form>
</div>

JS

jQuery(function ($) {
    $('#formRegister').validate({
        errorElement: "div",
        errorPlacement: function(error, element) {
            error.appendTo(element.parent("div").next("div"));
        },
        rules: {
            textFirstName: {
                required: true,
                minlength: 1,
                maxlength: 50
            },
            textLastName: {
                required: false,
                maxlength: 50
            },
            textEmail: {
                required: true,
                email: true
            },
            textEmail2: {
                equalTo: "#textEmail"
            },
            passwordPW1: {
                required: true,
                minlength: 4
            },
            passwordPW2: {
                equalTo: "#passwordPW1"
            }
        },
        messages: {
            textFirstName: "The first name must be from 1 to 50 characters in length",
            textLastName: "The last name must be from 0 to 50 characters in length",
            textEmail: "Please enter a valid email address",
            textEmail2: "Emails do not match",
            passwordPW1: "The password must be from 4 to 50 characters in length",
            passwordPW2: "Passwords do not match"
        },
        highlight: function (element) {
            $(element).closest('next').removeClass('success').addClass('error');
        },
        success: function (element) {
            element.text('OK!').addClass('valid')
            .closest('.next').removeClass('error').addClass('success');
        },
        submitHandler: function (form) {
            form.submit();
        }
    });
});

Answer 1

您的问题是您引用的选择器与任何内容都不匹配。例如，#textEmail(在 equalTo 属性中使用)不会与当前 DOM 中的任何内容匹配。

替换这一行:

<input type="text" name="textEmail" class="form-control" />

用这一行:

<input type="text" id="textEmail" name="textEmail" class="form-control" />

或者，您可以在 equalTo 属性中使用不同的选择器:

    // ...
    rules: {
        // ...
        textEmail2: {
            equalTo: "[name=textEmail]"
        },
        // ...