使用jQuery Validate确认密码

Question 1

我正在尝试使用jQuery validate插件来确认我的密码输入。

但是，我不希望它成为必填字段。

仅当用户想要更改密码时，他们才需要进行确认。

如果不是，则两个字段都不应该被验证。

jQuery('.validatedForm').validate({
    rules: {
        password: {
            required: true,
            minlength: 5
        },
        password_confirm: {
            required: true,
            minlength: 5,
            equalTo: "#password"
        }
    }
});

这很正常，但是同样，两个字段都是必需的。

如果有人只想更改其电子邮件地址或用户名，并且不设置密码，我想选择此选项。

Question 2

删除required: true规则。

演示：小提琴

jQuery('.validatedForm').validate({
            rules : {
                password : {
                    minlength : 5
                },
                password_confirm : {
                    minlength : 5,
                    equalTo : "#password"
                }
            }

Question 3

很快，这里就可以希望对其他人有所帮助...特别是使用新版本（因为该版本已有2年历史了）...

除了在JS中定义某些静态字段外，您还可以使用data-rule-*属性。您可以使用内置规则以及自定义规则。

有关内置规则，请参见http://jqueryvalidation.org/documentation/#link-list-of-built-in-validation-methods。

例：

<p><label>Email: <input type="text" name="email" id="email" data-rule-email="true" required></label></p>
<p><label>Confirm Email: <input type="text" name="email" id="email_confirm" data-rule-email="true" data-rule-equalTo="#email" required></label></p>

注意data-rule-*属性。

Question 4

如果id值和name值不同，则可以使用：

<input type="password" class="form-control"name="password" id="mainpassword">
password: {     required: true,     } , 
cpassword: {required: true, equalTo: '#mainpassword' },

Question 5

jQuery('.validatedForm').validate({
        rules : {
            password : {
                minlength : 5
            },
            password_confirm : {
                minlength : 5,
                equalTo : '[name="password"]'
            }
        }

通常，您不会id="password"像这样使用。因此，您可以使用[name="password"]代替"#password"

Question 6

我正在Play Framework中实现它，对我来说，它的工作方式如下：

1）请注意，我在输入标签中使用了data-rule-equalTo作为id inputPassword1。我的模式中userform的代码部分：

<div class="form-group">
    <label for="pass1">@Messages("authentication.password")</label>
    <input class="form-control required" id="inputPassword1" placeholder="@Messages("authentication.password")" type="password" name="password" maxlength=10 minlength=5>
</div>
<div class="form-group">
    <label for="pass2">@Messages("authentication.password2")</label>
    <input class="form-control required" data-rule-equalTo="#inputPassword1" id="inputPassword2" placeholder="@Messages("authentication.password")" type="password" name="password2">
</div>

2）因为我在模态中使用了验证器

$(document).on("click", ".createUserModal", function () {
       $(this).find('#userform').validate({
           rules: {
               firstName: "required",
               lastName: "required",
               nationalId: {
                   required: true,
                   digits:true
               },
               email: {
                   required: true,
                   email: true
               },
               optradio: "required",
               password :{
                   required: true,
                   minlength: 5
               },
               password2: {
                   required: true
               }
           },
           highlight: function (element) {
               $(element).parent().addClass('error')
           },
           unhighlight: function (element) {
               $(element).parent().removeClass('error')
           },
           onsubmit: true
       });

   });

希望它可以帮助某人:)。