3

查看此处的文档：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[]'不适用于验证插件。请参阅下面的答案和评论。）

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

4

3 回答 3

2

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

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

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

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

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

给未来读者的注意事项.rules('add')：两者addClassRules都不适用于重复的名称（例如foo[]），但如果名称不完全相同（例如foo[index]）（例如 OP 的情况），它们确实有效。

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

于 2013-03-12T14:08:20.787 回答
1

我认为给出的答案是正确的，但也值得考虑创建一个结合你的两个规则的类规则，然后给你输入这个类。这样您就不必在每次向 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">
于 2013-03-12T14:37:00.747 回答
1

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

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 "starts with" 选择器一起使用。

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

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

于 2013-03-12T15:22:09.037 回答