jQuery Validate 数组 全部验证问题

下面是详细讲解“jQuery Validate 数组 全部验证问题”的完整攻略，具体内容如下：

问题描述

在使用jQuery Validate 插件进行表单验证时，如果表单里面涉及到多个相同的表单元素，即表单元素为数组的时候，我们需要对所有的表单元素进行验证，验证通过才能进行提交。那么该如何实现呢？

解决方案

1. 给表单元素命名

首先，我们需要给表单元素加上相同的name属性，并用方括号[]将原属性名括起来，这样就能够将表单元素组织成一个数组。

<form id="myform">
  <input type="text" name="username[]" />
  <input type="text" name="username[]" />
  <input type="text" name="username[]" />
  <button type="submit" class="btn btn-primary">提交</button>
</form>

2. 配置验证规则

接着，我们需要为表单设置验证规则，这里我们需要用到jQuery Validate插件，我们可通过$().validate()方法为表单设置验证规则，这里需要注意，由于我们的表单元素为数组，所以需要设置一个全局的ignore属性值，将所有的表单元素都加入到忽略列表中，否则会出现只能对一个表单元素作出验证的结果。

$("#myform").validate({
    ignore:"",
    rules:{
        "username[]":{
            required:true
        }
    }
})

3. 示例说明

下面，我们来看几个示例，了解在不同情况下，如何配置和使用jQuery Validate插件。

示例一

在这个示例中，我们只需要验证每个表单元素是否非空，只要有一个表单元素为空，就不能提交表单，否则才能提交表单。

<form id="myform1">
  <input type="text" name="username[]" />
  <input type="text" name="username[]" />
  <input type="text" name="username[]" />
  <button type="submit" class="btn btn-primary">提交</button>
</form>

$("#myform1").validate({
    ignore:"",
    rules:{
        "username[]":{
            required:true
        }
    },
    submitHandler:function(form){
        alert("数据提交！");
        form.submit();
    }
});

示例二

在这个示例中，我们需要验证每个表单元素是否符合正则表达式，只要有一个表单元素不符合正则表达式，就不能提交表单，否则才能提交表单。

<form id="myform2">
  <input type="text" name="username[]" />
  <input type="text" name="username[]" />
  <input type="text" name="username[]" />
  <button type="submit" class="btn btn-primary">提交</button>
</form>

$("#myform2").validate({
    ignore:"",
    rules:{
        "username[]":{
            required:true,
            pattern:/^[A-Za-z0-9]+$/
        }
    },
    submitHandler:function(form){
        alert("数据提交！");
        form.submit();
    }
});

总结

通过上述的详细讲解，相信大家对于如何使用jQuery Validate插件针对表单元素为数组的情况进行校验已经有了一定的认识和了解。需要注意的是，在设置验证规则的时候，ignore属性的设置十分重要，需要将表单元素都加入到忽略列表中，这样才能够对所有的表单元素都进行验证。