1

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

我有两个问题：

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

我正在使用 jQuery 1.8.3，jquery.validate来自jquery.validate.passwordbassistance。

任何想法都非常感激。

下面的 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>

查询：

$(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 &nbsp; as text for IE
        label.html("&nbsp;").addClass("jqueryChecked");
    }
});
});
4

1 回答 1

4

你有一个问题清单...

1) 您必须通过and not来定位input字段。由于您包含括号，因此您必须用引号括起来。nameidinput 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调用，但它对应的是. （如果您想使用，只需保留第二个字段......请参阅下面的编辑。1passwordinputmessagerequired ruleclass="password"inputjquery.validate.password 

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

Demo 不包含jquery.validate.password仅仅是因为它没有 CDN。但是，根据此链接，它的用法很简单。） 请参阅下面的编辑。1

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

5）您不需要jQuery.format()围绕minlength消息...它们自己会正常工作。

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 &nbsp; as text for IE
            label.html("&nbsp;").addClass("jqueryChecked");
        }
    });
});

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

1编辑：

这是与上面相同的 Demo，除了jquery.validate.password插件的 JavaScript 和 CSS 代码是手动添加到 jsFiddle 中的，因为它不是托管在 CDN 上的。

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

为了让密码插件忽略任何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"input

于 2013-01-21T16:13:26.883 回答