使用未知数组键进行 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[]'设置规则的建议方法不适用于验证插件。请参阅答案以及下面的评论。)

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

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 混合一些行为。

<小时/>

请注意 future 的读者:.rules('add') 和 addClassRules 不适用于重复名称(例如 foo[])，但如果名称不完全相同(例如 foo[index])，这就是 OP 的情况，这些确实可以工作。

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