如何使用jQuery Validate验证数组输入？带索引时仅必填规则生效问题

当使用jQuery Validate验证name为batch_no[0]这类带具体索引的数组输入框时，仅required规则生效，minlength、maxlength、alphanumeric等规则无法正常工作，原代码如下：

原HTML代码 #

<input type="text" name="batch_no[0]"> 
<input type="text" name="batch_no[0]"> 

原JS代码 #

$( "#batch-form" ).each( function() {                
  $(this).validate({
    rules: {
      "batch_no[]": {
        required: true,
        minlength: 5,
        maxlength: 20,
        alphanumeric: true
      }
    },
  });
});

问题根源 #

原代码中rules配置的"batch_no[]"仅匹配name为batch_no[]的输入框，无法对应带具体索引的batch_no[0]。required规则看似生效是因为插件对数组类表单元素的特殊检查逻辑，但其他规则是绑定到具体name属性上，因此无法作用到带索引的输入框。

解决方案 #

方法一：动态添加规则（推荐，适配动态生成的输入框） #

通过选择器选中所有name以batch_no[开头的输入框，使用rules('add')方法逐个绑定验证规则：

// 初始化表单验证
$("#batch-form").validate();

// 给所有匹配的输入框添加验证规则
$('input[name^="batch_no["]').each(function() {
  $(this).rules('add', {
    required: true,
    minlength: 5,
    maxlength: 20,
    alphanumeric: true,
    // 可选：自定义错误提示信息
    messages: {
      required: "此字段不能为空",
      minlength: "输入长度不能少于5位",
      maxlength: "输入长度不能超过20位",
      alphanumeric: "只能输入字母和数字"
    }
  });
});

方法二：指定具体name值（适合固定数量的输入框） #

如果输入框数量固定，可以直接在rules中指定每个带索引的name：

$("#batch-form").validate({
  rules: {
    "batch_no[0]": {
      required: true,
      minlength: 5,
      maxlength: 20,
      alphanumeric: true
    },
    "batch_no[1]": { // 对应第二个输入框的name
      required: true,
      minlength: 5,
      maxlength: 20,
      alphanumeric: true
    }
  },
  messages: {
    "batch_no[0]": {
      required: "此字段不能为空",
      minlength: "输入长度不能少于5位",
      maxlength: "输入长度不能超过20位",
      alphanumeric: "只能输入字母和数字"
    },
    "batch_no[1]": {
      required: "此字段不能为空",
      minlength: "输入长度不能少于5位",
      maxlength: "输入长度不能超过20位",
      alphanumeric: "只能输入字母和数字"
    }
  }
});

注意事项 #

• 原HTML中两个输入框使用了相同的batch_no[0]，表单提交时会导致数据覆盖，建议修改为不同索引（如batch_no[0]、batch_no[1]）。
• 确保已正确引入jQuery Validate插件及alphanumeric规则对应的扩展（若该规则不是插件内置，需额外引入或自定义）。

内容的提问来源于stack exchange，提问作者Santosh Chakraborty