使用未知数组键的 jQuery 验证

Question

查看这里的文档：http://docs.jquery.com/Plugins/Validation/Reference#Fields_with_complex_names_.28brackets.2C_dots.29 将规则附加到输入数组的语法如下：

rules: {
"user[email]": "email",

但是在我的情况下，数组键是数字值并且可以具有任何值，但我仍然想将规则附加到字段。我用 jQuery 动态添加输入字段（key 是一个全局变量）：

 $('a#addfield').click(function(e)
 {
    e.preventDefault();
    var data = '<p><input type="file" name="field['+key+']"></p>';
    $('div#inputcontainer').append(data);
 });

示例 HTML 输出：

<p><input name="field[19]" type="file"></p>
<p><input name="field[22]" type="file"></p>
<p><input name="field[25]" type="file"></p>

我尝试过这样定义规则：

rules: 
{
   'field[]': {
         required: true,
         extension: "pdf|doc|docx"
    }
}

（取自这个答案：jquery validate add rules for an array input 编辑：这种使用'field[]' 设置规则的建议方法不适用于验证插件。请参阅下面的答案和 cmets。）

但是当我尝试添加其他文件类型时没有验证错误...有什么建议吗？

Answer 1

您可以将.rules("add", rules) 应用于每个生成的元素：

$(element).rules("add", { required:true, extension: "pdf|docx?" });

---

jQuery.validate 确实提供了一种通过表单上设置的规则（至少到 v1.11）来验证同名元素（foo[] 或 foo[N]）的方法。

还有其他一些添加动态规则的方法，例如，在不调用.rules('add') 的情况下添加必需的检查，您可以简单地在元素中使用class="required"，验证插件应该会动态选择它。

但是，没有与extension 选项等效的内置选项，因此您必须为所有输入添加一个类并使用addClassRules 创建您自己的类规则。这最终将一些行为与 HTML 和可能的 CSS 混合在一起。

---

注意给未来的读者：.rules('add') 和 addClassRules 都不适用于重复名称（例如 foo[]），但如果名称不完全相同（例如 @ 987654337@)，这是 OP 的情况。

我相信具有完全相同名称的输入对于这个问题来说是题外话，但是对于这些你要么必须使用addMethod 添加自己的验证方法，或者在表单的提交处理程序中添加你自己的验证，或者试试这个@ 987654324@.

Answer 2

我认为给出的答案是正确的，但也值得考虑创建一个结合你的两个规则的类规则，然后给你的输入这个类。这样您就不必在每次向 DOM 动态添加新元素时调用 addMethod。

$.validator.addClassRules("myinput", { required:true, extension: "pdf|docx?" });

html

<input name="field[19]" type="file" class="myinput"> 
<input name="field[22]" type="file" class="myinput"> 
<input name="field[25]" type="file" class="myinput">

Answer 3

编辑：我的答案发布在问题的原始版本中，在没有阅读 cmets 的情况下，不知道这些字段是动态创建的。否则，最好在创建每个字段时简单地添加规则：

var myRule = { // save some code... put the common rule into a variable
    required:true,
    extension: "pdf|docx?"
};

$('a#addfield').click(function(e) {
    e.preventDefault();
    var data = '<p><input type="file" name="field['+key+']"></p>';
    $('div#inputcontainer').append(data);
    $('[name="field['+key+']"]').rules("add", myRule); // add the rule to the new field
});

（嵌套括号处理as per this answer。）

原答案如下：

---

接受的答案让你成功了一半。

另外，我的回答不需要额外的class 或对现有 HTML 结构的任何其他更改。这都是 jQuery...

前半部分使用the built-in rules('add') method。

$(element).rules("add", {
    required:true,
    extension: "pdf|docx?"
});

后半部分是将该方法应用于名为"field[19]"、"field[20]"、"field[21]" 等的所有元素。

您只需使用 jQuery .each() 和 jQuery "starts with" selector。

$('[name^="field"]').each(function() {
    $(this).rules("add", {
        required:true,
        extension: "pdf|docx?"
    });
});

演示：http://jsfiddle.net/cWABL/