尝试使用password，new_password和confirm_password进行密码更改页面。
我有两个问题：
new_password字段。我正在使用来自bassistance的jQuery 1.8.3，jquery.validate和jquery.validate.password。
感激地收到任何想法。
下面的HTML和jQuery：
<form novalidate="novalidate" method="POST" action="/frontend_dev.php/profile/change-password" name="change_account_data_form" id="change_account_password_form">
<table cellspacing="0">
<tbody><tr>
<td colspan="3">
</td>
</tr>
<tr>
<td><label for="current_password">Current password:</label></td>
<td><input style="display: none;" name="change_password[password]" id="password" class="text" type="password"><input class="text" type="text"></td>
<td></td>
</tr>
<tr>
<td><label for="password">New password:</label></td>
<td><input style="display: none;" name="change_password[new_password]" id="new_password" class="text password" type="password"><input class="text password" type="text"></td>
<td><div class="password-meter">
<div class="password-meter-message"> </div>
<div class="password-meter-bg">
<div class="password-meter-bar"></div>
</div>
</div>
</td>
</tr>
<tr>
<td><label for="password_confirm">Confirm password:</label></td>
<td><input style="display: none;" name="change_password[password_confirm]" id="password_confirm" class="text" type="password"><input class="text" type="text"></td>
<td></td>
</tr>
</tbody></table>
<input name="change_password[id]" value="2" id="change_password_id" type="hidden"><input name="change_password[_csrf_token]" value="66dbd4dc532ad1c9dd668e5e86235136" id="change_password__csrf_token" type="hidden">
<div class="submitBlock">
<input class="buttonSubmit" value="" type="submit">
</div>
</form>
JQUERY：
$(document).ready(function() {
// validate signup form on keyup and submit
var validator = $("#change_account_password_form").validate({
debug:true,
errorClass: 'jqueryError',
rules: {
password: {
required: true,
minlength: 8
},
new_password: {
password: "#new_password",
minlength: 8
},
password_confirm: {
required: true,
equalTo: "#new_password"
}
},
messages: {
password: {
required: "Enter your current password",
minlength: jQuery.format("Enter at least {0} characters")
},
new_password: {
required: "Enter your new password",
minlength: jQuery.format("Enter at least {0} characters")
},
password_confirm: {
required: "Repeat your password",
minlength: jQuery.format("Enter at least {0} characters"),
equalTo: "Enter the same password as above"
}
},
// the errorPlacement has to take the table layout into account
errorPlacement: function(error, element) {
error.prependTo( element.parent().next() );
},
// specifying a submitHandler prevents the default submit, good for the demo
submitHandler: function() {
alert("submitted!");
},
// set this class to error-labels to indicate valid fields
success: function(label) {
// set as text for IE
label.html(" ").addClass("jqueryChecked");
}
});
});
答案 0 :(得分：4)
您有一系列问题......
1）您必须按input而不是name定位id字段。由于您的input name包含括号，因此您必须使用引号括起来。
"change_password[password]": {
required: true,
minlength: 8
},
2）您的目标字段都有style="display: none;"，因此永远不会看到它们，包含数据或进行验证。而且您旁边还有另一个input，其中没有任何name实际输入数据。这个设置永远不会工作，我不知道你为什么要这样做。
<input style="display: none;" name="change_password[password]" id="password" class="text" type="password">
<input class="text" type="text">
3）您在第二个rule字段中有一个名为password的{{1}}，但其对应的input代表message required 。 （如果您想使用 请参阅下面的编辑。 1 rule，请务必将class="password"保留在第二个input字段上。
jquery.validate.password演示不包含<input class="text password" name="change_password[new_password]" id="new_password" type="password">
，因为它没有CDN。但是，它是usage is straightforward as per this link。）请参阅下面的编辑。 1
4）在第三个jquery.validate.password字段中，您有两条规则和三条消息... input消息是多余的，因为您只需要匹配第二个minlength字段。
5）input消息周围不需要jQuery.format() ...他们自己也可以正常工作。
6）您忘记将minlength传递到form函数中，如下所示：submitHandler:
工作演示：http://jsfiddle.net/kJxZB/
工作演示＃2（请参阅下面的答案编辑）：http://jsfiddle.net/4JEUx/
submitHandler: function(form) {文档：http://docs.jquery.com/Plugins/Validation
<强> 1 编辑：
这是与上面相同的演示，除了$(document).ready(function () {
$("#change_account_password_form").validate({
errorClass: 'jqueryError',
rules: {
"change_password[password]": {
required: true,
minlength: 8
},
"change_password[new_password]": {
required: true,
minlength: 8
},
"change_password[password_confirm]": {
required: true,
equalTo: "#new_password"
}
},
messages: {
"change_password[password]": {
required: "Enter your current password",
minlength: "Enter at least {0} characters"
},
"change_password[new_password]": {
required: "Enter your new password",
minlength: "Enter at least {0} characters"
},
"change_password[password_confirm]": {
required: "Repeat your password",
equalTo: "Enter the same password as above"
}
},
errorPlacement: function (error, element) {
error.prependTo(element.parent().next());
},
submitHandler: function (form) { // for demo
alert("submitted!"); // for demo
return false; // for demo
},
success: function (label) {
// set as text for IE
label.html(" ").addClass("jqueryChecked");
}
});
});
插件的JavaScript和CSS代码被手动添加到jsFiddle，因为它没有托管在CDN上。
演示＃2：http://jsfiddle.net/4JEUx/
为了让密码插件忽略jquery.validate.password个input个字段，您必须使用type="password"作为这两个password: false字段的规则......
input然后您可以从第二个 rules: {
"change_password[password]": {
required: true,
minlength: 8,
password: false // <-- to ignore password plugin
},
"change_password[new_password]": {
required: true,
minlength: 8,
password: true // <-- to use password plugin
},
"change_password[password_confirm]": {
required: true,
equalTo: "#new_password",
password: false // <-- to ignore password plugin
}
},
字段删除 class="password"，因为它现在已经多余了。