jQuery验证：动态地更改规则

我有一个单一的形式，根据单击哪个单选按钮(登录或注册)，显示：

>电子邮件地址
>密码

要么：

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

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

<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 plug-in，我想使用以下规则：

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,loginPasswordTextBox:
    {
        required: true,passwordValidationRule: true // custom regex added with $.validator.addMethod()
    },loginPasswordAgainTextBox:
    {
        required: true,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;
});

但是由于我的登录字段是默认显示的，它的验证工作，但是注册方案不会;它想要验证登录字段由于某些原因。我缺少什么？

解决方法

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

首先，我添加了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，而不是你必须操纵单个表单元素。

jQuery验证：动态地更改规则

解决方法

猜你在找的jQuery相关文章