我正在开发一个带有注册表单的项目。我有 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();
}
});
});
最佳答案
您的问题是您引用的选择器与任何内容都不匹配。例如,#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]"
},
// ...
关于javascript - JQuery 验证匹配字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26433035/