2017-01-13 229 views
2

我创建形式这样验证多维数组:使用jQuery验证插件

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

在点击“添加用户”按钮,它会增加一个分度,类“用户”和它的输入作为用户[1] [姓名]和用户[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', 
     }, 
    } 
}); 

任何人都可以请帮我如何验证使用验证插件等多维数组?任何帮助,将不胜感激。

回答

1

首先选择以user开头的所有input元素。使用jQuery .filter()来查找以nameemail结尾的所有元素。然后使用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', 
     } 
    }); 
}); 

DEMOjsfiddle.net/upq6uk0h/

+0

谢谢! @Sparky它工作:) –

0

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

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