通过 jQuery 验证器对文件输入施加最大组合文件大小

Question

我手头有一个有趣的场景，但是我现在并不精通jQuery validation。

目标：使用 FileAPI，确定要在多个<input type="file" />控件中上传的每个文件的文件大小，同时使用 jQuery 验证插件，确保字节的总和不大于 50Mb。可以动态添加/删除这些元素。

为了保持一致性，我希望此验证通过jQuery验证器插件进行，其中错误消息将附加到最后一个输入文件控件下。

据我了解，向验证器添加一个方法一次只验证一个元素，所以我想第一个问题，单个方法是否可以验证多个元素一次，而不是为每个元素触发。

前任。：

<input type="file" name="file1" id="file1" />

<input type="file" name="file2" id="file2" />

<input type="file" name="file3" id="file3" />

<script type="text/javascript">
    $(function() {
        // Add rule to all elements when document is ready
        $('input[type="file"]').rules("add", {
            totalFileSize: true
        });
    });
    jQuery.validator.addMethod("totalFileSize", function(value, element) {
        // Even if there's 3 input elements, this should only fire once and, 
        // if totalFileSize > 50Mb, then display error under the last input element
    }, "Total file size too large");
</script>

Answer 1

据我了解，向验证器添加一个方法一次只验证一个元素，所以我想第一个问题，单个方法是否可以验证多个元素一次，而不是为每个元素触发。

是的，每个元素都根据在其上声明的每个规则自行验证。

不可以，单个方法不能一次验证多个元素。 规则/方法在每个元素上声明，然后一次针对一个元素验证每个元素。

编辑：我忘记了additional-methods.js文件中的skip_or_fill_minimum和require_from_group规则。 这些规则是可以一次计算多个字段的方法示例。 必须在考虑评估的每个字段上声明规则，然后使用 groups 选项将重复邮件压缩为一个。

在这里玩一下：jsfiddle.net/r32vbm8j/

但是，这两个示例规则在单击提交按钮时触发。 在这种情况下，它不会发射一次...但在每个声明的字段上触发，与表单上的所有其他规则相同。

---

你不能这样做...

$('input[type="file"]').rules("add", {
    totalFileSize: true
});

由于$('input[type="file"]')选择器可以表示多个元素，因此只有第一个匹配的元素附加到.rules()，其他匹配的元素将被忽略。

要将.rules()附加到多个元素需要使用 jQuery .each()进行迭代。

$('input[type="file"]').each(function() {
    $(this).rules("add", {
        totalFileSize: true
    });
});

---

编辑：

最后唯一的问题是groups将在单个统一点显示分配给单个元素的所有规则，而我需要为 x 个元素显示一条错误消息，同时保留分配给其各自元素的所有其他错误消息。最终结果是我希望每个文件输入都显示"文件不能超过 10MB"作为错误消息，但有第二个验证来检查所有大小的总和，"文件总和不能超过 50MB"但是应该挑出一条错误消息，以免不必要地重复。

1. 使用showErrors回调函数。 这将禁止显示所有单独的错误消息，只要您省略this.defaultShowErrors()行。

2. 在 showErrors 函数中，您可以访问以下参数，您可以在其中根据需要构建自己的合并消息或单个消息。

errorMap - 键/值对，其中键引用输入字段的名称，值要为该输入显示的消息。

errorList - 包含所有当前验证的元素的数组。包含具有以下两个属性的对象：message 和 element 。

$('form').validate({
    showErrors: function(errorMap, errorList) {
        // parse and display messages as needed
    },
    ....