0

我有一个在动态表单上创建的图像上传。我正在尝试这样做，以便我可以验证上传的文件是实际图像，并且不显眼地执行此操作。我已经阅读了有关 .rules() 设置和使用接受属性的信息，但这需要您输入字段名称 (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"]')。那么我该怎么做呢？

4

3 回答 3

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>
于 2012-11-07T17:42:20.867 回答
0

我看到了两种可能的方法来解决这个问题：

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

2）如果您在给定的动态名称中有任何类型的模式，请为您的 jQuery 选择器使用正则表达式：
a）jquery 方式：http
://api.jquery.com/attribute-ends-with-selector/ b）或完整正则表达式方式：http: //james.padolsey.com/javascript/regex-selector-for-jquery/

那应该是困难的部分。然后你可以像往常一样添加你的规则。

于 2012-11-06T23:01:42.043 回答
0

当然，您的答案有效，我将其添加为对同一只猫进行剥皮的略有不同的方法。

在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."/>
于 2014-02-25T21:50:48.587 回答