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[]'设置规则的方法不适用于验证插件。请参阅下面的答案和评论。）

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

Answer 1

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

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

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

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

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

未来读者

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

我认为具有完全相同名称的输入对于此问题是偏离主题的，但是对于这些，您必须使用addMethod添加自己的验证方法，或者在表单的提交处理程序中添加您自己的验证或尝试这related answer。

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

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

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。）

原始答案如下：

接受的答案让你半途而废。

此外，我的回答不需要对现有HTML结构进行额外的class或任何其他更改。这都是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?"
    });
});

DEMO：http://jsfiddle.net/cWABL/

使用未知数组键进行jQuery验证

3 个答案: