Question

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

HTML

注册表

<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

您目前对equalTo的验证是

textEmail2: {
            equalTo: "#textEmail"
        }

但输入textEmail没有id="textEmail"。尝试添加此ID，它应该工作。
这同样适用于其他验证规则，其中您匹配尚未在输入处添加的ID。

Answer 2

你的问题是你所指的选择器与任何东西都不匹配。例如，#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]"
        },
        // ...

Answer 3

我对.asp.net和bootstrap一无所知，但是在您的表单中，您正在使用名称标记，而在您的JavaScript中，您使用的是＃，它指的是ID。为您的输入提供id textEmail和passwordPW1

JQuery验证匹配字段

注册表

3 个答案: