使用Jquery验证动态表单的图片上传是否不显着？

Question

我有一个图片上传是在一个动态表单上创建的。我正在尝试制作它，这样我就可以验证上传的文件是一个实际的图像，并且不引人注意地这样做。我读过关于.rules()设置和使用accept属性的文章，但这需要输入字段名(http://docs.jquery.com/Plugins/Validation/Methods/accept)。由于表单是动态的，所以我不知道字段名。生成上传输入的视图如下所示：

 <input type="file" size="20" name="@(Model.FormItem.Id + "-image")" id="@(Model.FormItem.Id + "-image")" />

所以我所有的文件输入都有一个"-image“后缀。是否有方法使用jquery选择器来为验证器规则添加规则，而不是使用特定的字段名？

编辑好吧，很明显，我没有解释什么问题是好的。也许解决办法是如此简单，不知何故，我错过了。我知道如何使用jQuery选择器，但从我看到的rules语法示例来看，您必须为规则提供一个静态字段名。如何将验证规则分配给选择器而不是静态字段名？

所以现在这就是我所拥有的

 var validatorData = $('#items-form').data('validator');

        $.extend(validatorData.settings, {
            rules: {
                static_field_name: { accept: "jpg|png" }
            },
            messages: {
                static_field_name_message: "The file must be an image."
            }
        });

如果我用适当的选择器static_field_name替换$('input[name$="-image"]')，这也是行不通的(显然)。那我该怎么做？

Answer 1

我了解了如何使用.addClassRules()这样做：

$.validator.addClassRules("image-upload", {
       accept: "jpg|png|gif"
});

然后将类image-upload应用于输入。但是，为了使它正常工作，我不得不重构规则以获得自定义消息(rules)：

$.validator.addMethod("acceptImageTypes", $.validator.methods.accept,
  "Selected File must be an image.");

        $.validator.addClassRules("image-upload", {
            acceptImageTypes: "jpg|png|gif"
        });

然后将标记更改为：

<label>Image</label>
<input type="file" size="20" data-val="true" class="image-upload" name="@(Model.FormItem.Id + "-image")" id="@(Model.FormItem.Id + "-image")" />
<span class="field-validation-valid" data-valmsg-for="@(Model.FormItem.Id + "-image")" data-valmsg-replace="true">File must be an image.</span>

Answer 2

我认为解决这一问题的方法有两种：

1)使用jQuery的.children()或$(“#父输入:first”)或$("inputtype=file:last")选择器，这样您的输入就不需要静态名称。

2)如果在给定的动态名称中有任何类型的模式，则对jQuery选择器使用正则表达式：

( a) jquery：http://api.jquery.com/attribute-ends-with-selector/

( b)或完全正则化方式：http://james.padolsey.com/javascript/regex-selector-for-jquery/

这应该是最难的部分。然后你就可以像平时一样添加你的规则了。

Answer 3

当然，你的答案是有效的，我补充说，这是一种稍微不同的方式去剥掉同一只猫。

在cshtml页面的c#代码部分：

//only allow these file types for upload
var allowedUploadExtensions = ".CSV|.DOC|.DOCX|.JPG|.JPEG|.PDF|.XLS|.XLSX|.TIF|.TIFF";    
var acceptMessage = allowedUploadExtensions.Replace("|", ",");

在您的$(文档)就绪函数中：

            $.validator.addMethod('isValidFileExtension', function (value, element) {
            if (value == '')
                return true;  //data-val-required will catch lack of value.
            var extension = value.substr((value.lastIndexOf('.'))).toUpperCase();
            var validFileExtensions = new String('@allowedUploadExtensions').toUpperCase().split('|');
            return $.inArray(extension, validFileExtensions) > -1;
        });

        $('.file-upload').rules('add', { isValidFileExtension: true, messages: { isValidFileExtension: 'Invalid file extension, valid extensions are @acceptMessage'} });

然后在你的标记中：

<input type="file" name="UploadedFile" id="UploadedFile" 
                    class="file-upload"
                    data-val="true" 
                    data-val-required="Please select a document to upload."/>