jquery - jQuery验证多个输入：文件

Question

我有以下 HTML：

<input id="upload1" type="file" /><br/>
<input id="upload2" type="file" /><br/>
<input id="upload3" type="file" /><br/>
<input id="upload4" type="file" /><br/>
<input id="upload5" type="file" /><br/>
<span id="label" style="color:red; display:none">
Wrong filetype!
</span>

以及以下 jQuery：

$('input:file').change(function(){
    var ext = $(this).val().split('.').pop().toLowerCase();
    $('#label').toggle(ext != 'pdf');
});

我想要做的只是切换#label是否所有 5 个input:file元素都通过了验证（仅限 pdf 扩展名）。或者没有选择文件。

目前，如果我.jpg先选择a，则#label显示，然后如果我选择a .pdf，则#label消失。这是不正确的，因为在五个元素.jpg之一中仍然有一个选择。input:file

编辑：小提琴在这里

Answer 1

那这个呢？

$('input:file').change(function(){

    $('input:file').each(function(){
      var ext =   $(this).split('.').pop().toLowerCase();

        $('#label').toggle(ext != 'jpg');
    });
});​

Answer 2

您需要将其更改为：

$('input:file').change(function(){
    var
        all_ok = true,
        inputs_set = $('input:file');

    for (var e in inputs_set) {
        if (e.val().split('.').pop().toLowerCase() != 'pdf') {
            all_ok = false;
        }
    }

    $('#label').toggle(!all_ok);
});

Answer 3

设法结合两个答案来做到这一点： -

$('input:file').change(function() {  
    var allok = true;
    $('input:file').each(function() {
        if ($(this).val() !== "" &&
            $(this).val().split('.').pop().toLowerCase() != 'pdf') {
                allok = false;
        }
    });
    $('#label').toggle(!allok);
});