jQuery验证:动态更改规则 [英] jQuery Validation: Changing Rules Dynamically

问题描述

我有一个表单，根据单击哪个单选按钮(登录"或注册")，它显示以下任一内容:

I have a single form that, depending on which radio button is clicked (Login or Signup), displays either:

• 电子邮件地址
• 密码

或:

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

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

Clicking on the radio button toggles the visibility of the Login/Signup fields:

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

I'm using the jQuery Validation plug-in, and I'd like to use the following rules:

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

如何基于以下条件动态添加正确的验证规则:

How can I add the correct validation rule dynamically based on:

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

但是由于我的登录字段是默认显示的，因此它的验证有效，但是注册方案无效；由于某种原因，它想验证登录字段.我想念什么吗?

But since my Login fields are the default displayed, its validations work, but the Signup scenario doesn't; it wants to validate Login fields for some reason. Am I missing something?

推荐答案

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

Ahh validation plugin, always so tricky :(

首先，我向所有输入框添加了id属性.然后，我为您提供了一个更改功能:

First, I added id attributes to all the input boxes. Then, I made a change function for you:

$("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/

That's pretty much it. See here for a working example: http://jsfiddle.net/ryleyb/wHpus/66/

编辑:对我来说，不直观的部分是，在您调用validate，相反，您必须操纵各个表单元素.

EDIT: To me, the non-intuitive part is that I don't see an easy way to add/remove rules to the whole form after you call validate, instead you have to manipulate the individual form elements.

这篇关于jQuery验证:动态更改规则的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！