jQuery验证:动态更改规则

Question

我有一个表单,根据单击的单选按钮(登录或注册),显示:

• 电子邮件地址
• 密码

要么:

• 名称
• 年龄
• 电子邮件地址
• 密码

单击单选按钮可切换登录/注册字段的可见性:

<form id="myForm">
    <input name="userAction" type="radio" value="login" checked="checked">Login</input>
    <br />
    <input name="userAction" type="radio" value="signup">Sign Up</input>

    <div id="loginFields" style="display:none">
        <!-- Login fields (email address and password) -->
    </div>

    <div id="signupFields" style="display:none">
        <!-- Signup fields (name, age, email address, password) -->
    </div>
</form>

我正在使用jQuery Validation插件,我想使用以下规则:

var signupRules = {
    emailAddressTextBox:
    {
        required: true,
        email: true 
    },
    passwordTextBox:
    {
        required: true,
        minlength: 6,
        maxlength: 24,
        passwordValidationRule: true // custom regex added with $.validator.addMethod()
    }
};

var loginRules = {
    nameTextBox:
    {
        required: true,
        maxlength: 50
    },
    loginEmailAddressTextBox:
    {
        required: true,
        email: true 
    },
    loginPasswordTextBox:
    {
        required: true,
        minlength: 6,
        maxlength: 24,
        passwordValidationRule: true // custom regex added with $.validator.addMethod()
    },
    loginPasswordAgainTextBox:
    {
        required: true,
        minlength: 6,
        maxlength: 24,
        equalTo: "#loginPasswordTextBox"
        passwordValidationRule: true // custom regex added with $.validator.addMethod()        
    }
};

如何根据以下内容动态添加正确的验证规则:

   $("input[name='userAction']").change(function() {
        if ($("input[name='userAction']:checked" ).val() === "login") {
            // use loginRules
        } else {
            // use signupRules
        }
    });

我尝试过以下方法:

$("#myForm").validate({
    rules: ($("input[name='userAction']:checked" ).val() === "login") ? loginRules : signupRules;
});

但由于我的登录字段是默认显示,因此其验证有效,但注册方案不起作用; 它想要出于某种原因验证登录字段.我错过了什么吗？

Answer 1

啊验证插件,总是那么棘手:(

首先,我在所有输入框中添加了id属性.然后,我为你做了一个改变功能:

$("input[name='userAction']").change(function() {
    $('#signupFields').toggle();
    $('#loginFields').toggle();    
    if ($("input[name='userAction']:checked").val() === "login") {
        removeRules(signupRules);
        addRules(loginRules);
    } else {        
        removeRules(loginRules);
        addRules(signupRules);

    }
});

添加和删​​除功能如下所示:

function addRules(rulesObj){
    for (var item in rulesObj){
       $('#'+item).rules('add',rulesObj[item]);  
    } 
}

function removeRules(rulesObj){
    for (var item in rulesObj){
       $('#'+item).rules('remove');  
    } 
}

这就是它.请看这里的工作示例:http://jsfiddle.net/ryleyb/wHpus/66/

编辑:对我来说,非直观的部分是我没有看到一种简单的方法来在调用后向整个表单添加/删除规则validate,而是必须操纵单个表单元素.

Answer 2

或者您可以使用depends属性.

http://jqueryvalidation.org/category/plugin/ 搜索依赖

示例:根据需要和电子邮件地址指定联系人元素,后者取决于通过电子邮件检查联系人的复选框.

$(".selector").validate({
  rules: {
    contact: {
      required: true,
      email: {
        depends: function(element) {
          return $("#contactform_email:checked")
        }
      }
    }
  }
});

Answer 3

如果您想使用新设置(规则,消息等)再次呼叫验证,请致电

$('#formid').removeData('validator')

这将删除表单的验证,然后使用新设置再次初始化它

Answer 4

这篇文章来自几年前,但由于它已经被多次查看过,我认为现在jQuery Validation插件允许我们读取,添加和删除规则会很有用.

一些例子:

1. 打印所有附加规则#myField: console.log($('#myField').rules());

2. 删除不需要的规则: $('#myField').rules('remove', 'min');

3. 添加新规则: $('myField').rules('add', {min: 10});

所以说如果你想动态更新所需的最小值.你可以在之后拨打a remove和a add:

// Something happened. The minimum value should now be 100
$('#myField').rules('remove', 'min');
$('#myField').rules('add', {min: 100});

更多信息可以在这里找到:https://jqueryvalidation.org/category/plugin/#-rules()