jquery - 使用自定义验证的 FileExtension Validation 会创建重复和无效的 data-* 属性

Question

这个问题是在我根据 my previous question 中提到的答案尝试后提出的。我关注了 this article 完全相同的方式，但验证的是 image files 而不是文章中提到的 doc files。

描述:我有一个 input 控件 type=file 用于上传图像文件，它存在于 之一>部分 View 。 partialview 在 click button 时加载。要应用 model 中提到的 validations，请将 unobtrusive 显式添加到 form。但是在完成上述文章中提到的所有设置之后，我无法验证 submit 上的文件以及 创建的 data-* >unobtrusive validation 非常可疑，或者更确切地说是无效。下面是显示我的设置的代码，这里是 html，它是通过具有无效 data-* 属性的非侵入式验证创建的，可能是因为验证没有发生。

<input data-charset="file" data-val="true" data-val-fileextensions="" data-val-fileextensions-fileextensions="png,jpg,jpeg" id="File" multiple="multiple" name="File" type="file" value="">

加载局部 View Js

$('.getpartial').on('click', function () {
    $('.loadPartial').empty().load('/Home/GetView',function () {
        var form = $('form#frmUploadImages');
        form.data('validator', null);
        $.validator.unobtrusive.parse(form);
        $(function () {
            jQuery.validator.unobtrusive.adapters.add('fileextensions', ['fileextensions'], function (options) {
                var params = {
                    fileextensions: options.params.fileextensions.split(',')
                };
                options.rules['fileextensions'] = params;
                if (options.message) {
                    options.messages['fileextensions'] = options.message;
                }
            });

            jQuery.validator.addMethod("fileextensions", function (value, element, param) {
                var extension = getFileExtension(value);
                var validExtension = $.inArray(extension, param.fileextensions) !== -1;
                return validExtension;
            });

            function getFileExtension(fileName) {
                var extension = (/[.]/.exec(fileName)) ? /[^.]+$/.exec(fileName) : undefined;
                if (extension != undefined) {
                    return extension[0];
                }
                return extension;
            };
        }(jQuery));
    })
})

模型类

public class ImageUploadModel
{
    [FileValidation("png|jpg|jpeg")]
    public HttpPostedFileBase File { get; set; }
}

查看

@model ProjectName.Models.ImageUploadModel

@using (Html.BeginForm("UploadImages", "Admin", FormMethod.Post, htmlAttributes: new { id = "frmUploadImages", novalidate = "novalidate", autocomplete = "off", enctype = "multipart/form-data" }))
{
    <div class="form-group">
        <span class="btn btn-default btn-file">
            Browse @Html.TextBoxFor(m => m.File, new { type = "file", multiple = "multiple", data_charset = "file" })
        </span>&nbsp;
        <span class="text-muted" id="filePlaceHolder">No files selected</span>
        @Html.ValidationMessageFor(m => m.File, null, htmlAttributes: new { @class = "invalid" })
    </div>
    <div class="form-group">
        <button class="btn btn-primary addImage pull-right">
            <i class="fa fa-upload"></i> Upload
        </button>
    </div>
}

最后是我的CustomFileValidation类

[AttributeUsage(AttributeTargets.Field | AttributeTargets.Property, AllowMultiple = false, Inherited = true)]
public class FileValidationAttribute : ValidationAttribute, IClientValidatable
{
    private List<string> ValidExtensions { get; set; }

    public FileValidationAttribute(string fileExtensions)
    {
        ValidExtensions = fileExtensions.Split('|').ToList();
    }

    public override bool IsValid(object value)
    {
        HttpPostedFileBase file = value as HttpPostedFileBase;
        if (file != null)
        {
            var fileName = file.FileName;
            var isValidExtension = ValidExtensions.Any(y => fileName.EndsWith(y));
            return isValidExtension;
        }
        return true;
    }

    public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
    {
        var rule = new ModelClientFileExtensionValidationRule(ErrorMessage, ValidExtensions);
        yield return rule;
    }
}
public class ModelClientFileExtensionValidationRule : ModelClientValidationRule
{
    public ModelClientFileExtensionValidationRule(string errorMessage, List<string> fileExtensions)
    {
        ErrorMessage = errorMessage;
        ValidationType = "fileextensions";
        ValidationParameters.Add("fileextensions", string.Join(",", fileExtensions));
    }
}

Answer 1

需要移动代码块

$(function () {
  ....
}(jQuery));

来自 $('.getpartial').on(..)在它之前运行，以便它是

<script>
  $(function () {
    ....
  }(jQuery));

  $('.getpartial').on('click', function () { // or just $('.getpartial').click(function() {
    $('.loadPartial').empty().load('/Home/GetView',function () { // recommend .load('@Url.Action("GetView", "Home")', function() {
      var form = $('form#frmUploadImages');
      form.data('validator', null);
      $.validator.unobtrusive.parse(form);
    });
  });
</script>

目前您加载内容，重新解析验证器，然后将方法添加到 jquery 验证，但为时已晚(验证器已被解析)

旁注:您不需要将验证函数包装在 $(function () { 中.可以删除它，只需使用 $.validator...而不是 jQuery.validator....正如您在代码的其他地方所做的那样。

至于“腥味”data-val-*属性，这正是您的代码生成的。您正在生成 ClientValidationRule名为 fileextensions (ValidationType = "fileextensions"; 代码)，然后添加它的属性也命名为 fileextensions (生成 ValidationParameters.Add("fileextensions", ..) 的 data-val-fileextensions-fileextensions="png,jpg,jpeg" 代码。至于 data-val-fileextensions="" ，生成它是为了存储错误消息，但您尚未生成错误消息，因此它是一个空字符串。

我建议对您的代码进行一些更改。

1. 将其重命名为 FileTypeAttribute这样你就可以灵活地 添加其他文件验证属性，例如 FileSizeAttribute验证最大尺寸。
2. 在构造函数中，生成一个默认的错误信息，例如 添加 private const string _DefaultErrorMessage = "Only the following file types are allowed: {0}";在构造函数的最后一行包含 ErrorMessage = string.Format(_DefaultErrorMessage, string.Join(" or ", ValidExtensions));
3. 更改 ValidationParameters.Add("fileextensions", ...)到(说) ValidationParameters.Add("validtypes", ...)所以它产生 data-val-fileextensions-validtypes="png,jpg,jpeg"这有点 更有意义(请注意，您需要将脚本更改为 ...add('fileextensions', ['validtypes'], function() ....

编辑

您的代码不适用于 <input type="file" multiple="multiple" ... />为此，您的属性(property)需要为 IEnumerable (请注意您的代码的一些小改动)

[FileType("png, jpg, jpeg")]
public IEnumerable<HttpPostedFileBase> Files { get; set; }

然后验证属性需要检查集合中的每个文件

[AttributeUsage(AttributeTargets.Property, AllowMultiple = false, Inherited = true)]
public class FileTypeAttribute : ValidationAttribute, IClientValidatable
{
    private const string _DefaultErrorMessage = "Only the following file types are allowed: {0}";
    private IEnumerable<string> _ValidTypes { get; set; }

    public FileTypeAttribute(string validTypes)
    {
        _ValidTypes = validTypes.Split(',').Select(s => s.Trim().ToLower());
        ErrorMessage = string.Format(_DefaultErrorMessage, string.Join(" or ", _ValidTypes));
    }

    protected override ValidationResult IsValid(object value, ValidationContext validationContext)
    {
        IEnumerable<HttpPostedFileBase> files = value as IEnumerable<HttpPostedFileBase>;
        if (files != null)
        {
            foreach(HttpPostedFileBase file in files)
            {
                if (file != null && !_ValidTypes.Any(e => file.FileName.EndsWith(e)))
                {
                    return new ValidationResult(ErrorMessageString);
                }
            }
        }
        return ValidationResult.Success;
    }
    public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
    {
        var rule = new ModelClientValidationRule
        {
            ValidationType = "filetype",
            ErrorMessage = ErrorMessageString
        };
        rule.ValidationParameters.Add("validtypes", string.Join(",", _ValidTypes));
        yield return rule;
    }
}

最后脚本需要检查每个文件

$.validator.unobtrusive.adapters.add('filetype', ['validtypes'], function (options) {
    options.rules['filetype'] = { validtypes: options.params.validtypes.split(',') };
    options.messages['filetype'] = options.message;
});

$.validator.addMethod("filetype", function (value, element, param) {
    for (var i = 0; i < element.files.length; i++) {
        var extension = getFileExtension(element.files[0].name);
        if ($.inArray(extension, param.validtypes) === -1) {
            return false;
        }
    }
    return true;
});

function getFileExtension(fileName) {
    if (/[.]/.exec(fileName)) {
        return /[^.]+$/.exec(fileName)[0].toLowerCase();
    }
    return null;
}