使用jQuery validate插件验证多维数组 [英] Validate multidimensional array using jQuery validate plugin

问题描述

我已经创建了这样的表格:

I have created form like this :

<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>

在单击添加用户"按钮时，它将再添加一个带有用户"类的div，并以用户[1] [名称]和用户[1] [电子邮件]的形式输入.

On Clicking "Add User" button it will add one more div with class "user" and it's input as user[1][name] and user[1][email].

我想根据需要验证电子邮件和姓名，并且电子邮件必须是有效的电子邮件格式. 为了验证，代码如下:

I want to validate email and name as required and email must be valid email format. For validation the code goes like here:

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

任何人都可以帮助我如何使用validate插件来验证这种多维数组吗?任何帮助将不胜感激.

Can anyone please help me how to validate such multidimensional array using validate plugin? Any help would be appreciated.

推荐答案

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

First select all input elements that start with user. Use a jQuery .filter() to find all elements that end with name and email. Then use a jQuery .each() along with the .rules() method to loop through and apply the 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插件验证多维数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！