使用 jQuery 验证插件验证多维数组

Question

我创建了这样的表格：

<form>
    <div class='row user">
         <div class="col-md-6 col-sm-6 input-group">
                <input type="text" class="form-control" name="user[0][name]" placeholder="Enter speaker's name">
         </div>
         <div class="col-md-6 col-sm-6 input-group">
                <span class="input-group-addon" id="basic-addon1"><i class="fa fa-envelope"></i> </span>
                <input type="text" class="form-control" name="user[0][email]"  placeholder="Email">
         </div>
    </div>
    <button onclick="addMoreUser()" class="add-more">Add User</button>
</form>

单击 "Add User" 按钮后，它会再添加一个 div 和 class "user" 并且输入为 user[1][name] 和 user[1] [电子邮件].

我想根据要求验证电子邮件和姓名，并且电子邮件必须是有效的电子邮件格式。为了进行验证，代码如下所示：

 $('form').validate({
    rules : {
        "user[][name]" : {
            required: true
        },
        "user[][email]" : {
            email: true,
            required : true,
        },
    },
    messages :{
        "user[][name]" : {
            required: "Name is Mandatory"
        },
        "user[][email]" : {
            email: 'Email must be valid email address',
            required : 'Email is Mandatory',
        },
    }
});

任何人都可以帮助我如何使用验证插件验证这样的多维数组吗？任何帮助将不胜感激。

Answer 1

定位多个元素时，您还必须使用 jQuery .each() 方法。

 $('.form-control').each(function () { 
    $(this).rules("add", {
        required: true
    });
});

Answer 2

首先 select 所有 input 以 user 开头的元素。使用 jQuery .filter() 查找所有以 name 和 email 结尾的元素。然后使用 jQuery .each() 和 .rules() 方法循环并应用规则。

var user = $('input[name^="user"]');

user.filter('input[name$="[name]"]').each(function() {
    $(this).rules("add", {
        required: true,
        messages: {
            required: "Name is Mandatory"
        }
    });
});

user.filter('input[name$="[email]"]').each(function() {
    $(this).rules("add", {
        email: true,
        required: true,
        messages: {
            email: 'Email must be valid email address',
            required : 'Email is Mandatory',
        }
    });
});

演示: jsfiddle.net/upq6uk0h/

使用 jQuery 验证插件验证多维数组

Validate multidimensional array using jQuery validate plugin

jquery

jquery-validate

multidimensional-array