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 验证插件，并且我想使用以下规则：

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 后，我没有看到在整个 form 中添加/删除规则的简单方法，相反，您必须操纵各个表单元素。

Answer 2

或者您可以使用depends 属性。

http://jqueryvalidation.org/category/plugin/
搜索取决于

示例：根据需要指定联系人元素和电子邮件地址，后者取决于通过电子邮件选中联系人的复选框。

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

Answer 3

这篇文章是几年前的文章，但由于它已经被浏览了很多次，我认为说 jQuery 验证插件现在允许我们读取、添加和删除规则是有用的。

一些示例：

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

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

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

所以说如果你想动态更新所需的最小值。您可以在之后调用 remove 和 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()

Answer 4

如果您想使用新设置（规则、消息...等）再次调用验证
调用

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

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

Answer 5

试试这个..

rules: {
    address: {
       required: {
                   depends: function(element) {
                     if (....){
                       return true;}
                     else{
                       return false;}
                   }
                 }
             }
       }

来自这里的信用。

Answer 6

现在有一个选项可以根据选择器标准忽略字段，例如不可见或禁用，这样您就不必更改规则集：

.validate({
  ignore: ":not(:visible),:disabled",
  ...

Answer 7

看看我的答案https://stackoverflow.com/a/20547836/1399001。
它包括一个工作的 jsfiddle。
在你的例子中将是这样的：

$("input[name='userAction']").change(function() {

    var settings = $("#myForm").validate().settings;

      if ($("input[name='userAction']:checked" ).val() === "login") {
            $.extend(settings, {
              rules: loginRules
            });
    } else {
            $.extend(settings, {
              rules: signupRules
            });
    }


    $("#myForm").valid();

});

Answer 8

跟踪验证对象并直接删除/替换规则。适用于我的 v1.13.0

var validation = $('#form1').validate(); //Keep track of validation object

//Rule set 1
var validationRulesLogin = {
    headerEmail: {
        required: true,
        email: true
    },
    headerPassword: "required"
};
var validationMessagesLogin = {
    headerEmail: {
        required: "Please enter your email address.",
        email: "Not a valid email address."
    },
    headerPassword: "Please enter your password."
};

//Rule set 2
var validationRulesSignup = {
    signupEmail: {
        required: true,
        email: true
    },
    signupPassword: "required",
    signupPassword2: {
        equalTo: "#phBody_txtNewPassword"
    }
};
var validationMessagesSignup = {
    signupEmail: {
        required: "Please enter your email address.",
        email: "Not a valid email address."
    },
    signupPassword: "Please enter your password.",
    signupPassword2: "Passwords are not the same."
};

//Toggle rule sets
function validatingLoginForm(){
    validation.resetForm();
    validation.settings.rules = validationRulesLogin;
    validation.settings.messages = validationMessagesLogin;
}
function validationSignupForm(){
    validation.resetForm();
    validation.settings.rules = validationRulesSignup;
    validation.settings.messages = validationMessagesSignup;
}

Answer 9

这可以通过更新下面的密码字段的 .validate().settings.rules

示例代码片段来轻松完成，该代码片段将添加所需的规则。

$('#myForm').validate().settings.rules.password = {required: true};

Answer 10

我遇到了类似的问题，并通过向所有登录文本框添加“requiredForLogin”类和向所有注册文本框添加“requiredForSignUp”类来解决它。

然后使用jQuery的toggleClass和jQuery.validate的addClassRules根据按下的按钮来打开和关闭规则。

function EnableAllValidation() {
    // remove the jquery validate error class from anything currently in error
    //  feels hackish, might be a better way to do this
    $(".error").not("label").removeClass("error");

    // remove any the 'disabled' validation classes, 
    //  and turn on all required validation classes 
    //  (so we can subsequently remove the ones not needed)
    $(".requiredForLoginDisabled").toggleClass("requiredForLoginDisabled requiredForLogin");
    $(".requiredForSignUpDisabled").toggleClass("requiredForSignUpDisabled requiredForSignUp");
}
function EnableLoginValidation() {
    // reenable all validations
    //  then disable the signUp validations
    EnableAllValidation();
    $(".requiredForSignUp").toggleClass("requiredForSignUpDisabled requiredForSignUp");
}
function EnableSignUpValidation() {
    // reenable all validations
    //  then disable the login validations
    EnableAllValidation();
    $(".requiredForLogin").toggleClass("requiredForLoginDisabled requiredForLogin");
}
$(document).ready(function () {
    $("input[value='login']").click(function () {
        EnableLoginValidation();
    });
    $("input[value='signup']").click(function () {
        EnableSignUpValidation();
    });

    $("#myForm").validate();
    jQuery.validator.addClassRules({
        requiredForSignUp: {
            required: true
        },
        requiredForLogin: {
            required: true
        }
    });

});

Answer 11

下面的代码运行得非常好......

.validate({
  ignore: ":not(:visible),:disabled",
  ...