JQuery 验证输入文件类型

Question

我有一个可以包含 0-数百个 <input type="file"> 元素的表单。我根据动态添加到页面的数量来按顺序命名它们。

例如：

<input type="file" required="" name="fileupload1" id="fileupload1">
<input type="file" required="" name="fileupload2" id="fileupload2">
<input type="file" required="" name="fileupload3" id="fileupload3">
<input type="file" required="" name="fileupload999" id="fileupload999">

在我的 JQuery 中，我想在可接受的 MIME/文件类型上验证这些输入。像这样：

$("#formNew").validate({
    rules: {
        fileupload: {
            required: true, 
            accept: "image/jpeg, image/pjpeg"
        }
    }

我的问题是输入文件元素的name 属性是动态的。它必须是动态的，这样我的 Web 应用程序才能正确处理每次上传。所以显然在规则部分使用“fileupload”是行不通的。

如何为所有名称为“fileupload”的输入设置规则？

这是动态添加输入的代码：

var filenumber = 1;
$("#AddFile").click(function () { //User clicks button #AddFile
    $('<li><input type="file" name="FileUpload' + filenumber + '" id="FileUpload' + filenumber + '" required=""/> <a href="#" class="RemoveFileUpload">Remove</a></li>').prependTo("#FileUploader");
    filenumber++;
    return false;
});
$("#FileUploader").on('click', '.RemoveFileUpload', function () { //Remove input
    if (filenumber > 0) {
        $(this).parent('li').remove();
        filenumber--;
    }
    return false;
});

Answer 1

添加一个元素，使用rules方法添加规则

//bug fixed thanks to @Sparky
$('input[name^="fileupload"]').each(function () {
    $(this).rules('add', {
        required: true,
        accept: "image/jpeg, image/pjpeg"
    })
})

演示：Fiddle

---

更新

var filenumber = 1;
$("#AddFile").click(function () { //User clicks button #AddFile
    var $li = $('<li><input type="file" name="FileUpload' + filenumber + '" id="FileUpload' + filenumber + '" required=""/> <a href="#" class="RemoveFileUpload">Remove</a></li>').prependTo("#FileUploader");

    $('#FileUpload' + filenumber).rules('add', {
        required: true,
        accept: "image/jpeg, image/pjpeg"
    })

    filenumber++;
    return false;
});

Answer 2

所以，我遇到了同样的问题，遗憾的是，只是添加规则并没有奏效。我发现默认情况下，accept: 和 extension: 不是 JQuery validate.js 的一部分，它需要一个附加的Methods.js 插件才能使其工作。

因此，对于关注此主题但仍然无效的其他人，您可以尝试在上面的答案之外添加additional-Methods.js 到您的标签中，它应该可以工作。

Answer 3

在创建元素后立即使用the .rules('add') method...

var filenumber = 1;
$("#AddFile").click(function () { //User clicks button #AddFile

    // create the new input element
    $('<li><input type="file" name="FileUpload' + filenumber + '" id="FileUpload' + filenumber + '" /> <a href="#" class="RemoveFileUpload">Remove</a></li>').prependTo("#FileUploader");

    // declare the rule on this newly created input field        
    $('#FileUpload' + filenumber).rules('add', {
        required: true,  // <- with this you would not need 'required' attribute on input
        accept: "image/jpeg, image/pjpeg"
    });

    filenumber++; // increment counter for next time

    return false;
});

• 您仍然需要使用 .validate() 在 DOM 就绪处理程序中初始化插件。

• 您仍然需要使用 .validate() 为静态元素声明规则。页面加载时表单中的任何输入元素......在.validate() 中声明它们的规则。

• 您不需要使用.each()，当您只定位一个元素并将jQuery 选择器附加到.rules() 时。

• 当您使用.validate() 或.rules('add') 声明required 规则时，您不需要输入元素上的required 属性。无论出于何种原因，如果您仍然需要 HTML5 属性，至少使用正确的格式，例如 required="required"。

工作演示：http://jsfiddle.net/8dAU8/5/