jquery - 仅使用 jQuery 验证密码验证特定密码字段

Question

尝试使用 password、new_password 和 confirm_password 进行密码更改页面。

我有两个问题:

1. 密码验证器强度字段是通过输入所有三个密码字段来触发的，而我只希望它应用于用户选择新密码的 new_password 字段。
2. 验证不会附加文本错误消息，它会更改要检查或取消检查的类，以便显示叉号或勾号，但不会向用户提供消息说明字段验证失败的原因。<

我正在使用 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");
    }
});
});

Answer 1

您有一个问题列表...

1) 您必须通过 name 而不是 id 来定位 input 字段。由于您的输入name包含括号，因此您必须用引号引起来。

"change_password[password]": {
     required: true,
     minlength: 8
},

2) 您的目标字段都具有 style="display: none;"，因此它们永远不会被看到、包含数据或被验证。旁边还有另一个输入，没有任何实际输入数据的名称。这个设置永远不会起作用，我不知道你为什么这样做。

<input style="display: none;" name="change_password[password]" id="password" class="text" type="password">
<input class="text" type="text">

3) 您在第二个input 字段上有一个名为password 的rule，但其对应的message 是对于必需规则。 (如果您想使用jquery.validate.password，只需将class="password"保留在第二个input字段上... 请参阅下面的编辑。¹

<input class="text password" name="change_password[new_password]" id="new_password" type="password">

演示不包含 jquery.validate.password 只是因为没有 CDN。然而，它是usage is straightforward as per this link .) 请参阅下面的编辑。¹

4) 在第三个 input 字段上，您有两个规则和三个消息... minlength 消息是多余的，因为您只需要匹配第二个 input 字段。

5) 您不需要在 minlength 消息周围使用 jQuery.format()...它们本身就可以正常工作。

6) 您忘记将 form 传递到 submitHandler: 函数中，如下所示:submitHandler: function(form) {

工作演示:http://jsfiddle.net/kJxZB/

工作演示#2(参见下面的答案编辑):http://jsfiddle.net/4JEUx/

$(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");
        }
    });
});

文档:http://docs.jquery.com/Plugins/Validation

<小时/>

¹编辑:

这与上面的演示相同，只是 jquery.validate.password 插件的 JavaScript 和 CSS 代码是手动添加到 jsFiddle 的，因为它没有托管在 CDN 上。

演示#2:http://jsfiddle.net/4JEUx/

为了让密码插件忽略任何带有 type="password" 的 input 字段，您必须使用 password: false 作为对这两个输入字段进行规则...

         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"，因为它现在是多余的。