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验证添加规则的数组输入编辑:这个建议的方式设置规则与'field[]'是不工作的验证插件。请看下面的回答和评论。)

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

Answer 1

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

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

---

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

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

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

---

给将来的读者:.rules('add')和addClassRules对重复的名字(例如foo[])不起作用，但如果名字不完全相同(例如foo[index])，这是OP的情况，它们确实起作用。

我相信输入与完全相同的名称是离题的这个问题，但对于这些你要么添加自己的验证方法与addMethod，或添加自己的验证在表单的提交处理程序或尝试这个相关的答案

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

EDIT:我的回答张贴在问题的原始版本上，在没有阅读评论的情况下，不知道这些字段是动态创建的。否则，最好在创建每个字段时简单地添加规则:

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
});

(嵌套括号根据答案处理)

原答案如下:

---

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

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

前半部分是使用内置的rules('add')方法。

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

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

您只需使用jQuery .each()与jQuery "start with"选择器。

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

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