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应用于输入。但是，为了让它不引人注目地工作，我不得不重构规则来获取自定义消息（http://docs.jquery.com/Plugins/Validation/Reference#Refactoring_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（）或$（“＃parent input：first”）或$（“input [type = file]：last”）选择器，以便输入不需要静态名称。 / p>

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("|", ",");

在$（document）ready函数中：

            $.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."/>

使用Jquery验证动态表单，不显眼地验证图像上传？

3 个答案: