Question

修改

我发现问题在于View组件无法使用@section（see ViewComponent and @Section #2910 ），因此使用不引人注目的库添加自定义客户端验证似乎是不可能的（或非常复杂）。而且，由于无法将所需的javascript包含到View Component中，这让我很后悔采用这种方法来模块化我的应用程序...

我正在学习在客户端支持下创建自定义验证属性。我能够为字符串属性实现一个自定义验证器，并且效果很好，但是当我尝试为输入文件创建一个验证器时，它不起作用（即，当我在计算机中选择一个文件时，该应用程序不会显示验证消息。服务器端验证有效。这是一些代码，展示了我的实现。

模型的类别

public class UploadPanelModel
{
    public int? ID { get; set; }
    public string Title { get; set; }
    public string Description { get; set; } //Raw HTML with the panel description
    [FileType(type:  "application/pdf")]
    [FileSize(maxSize: 5000000)]
    public IFormFile File { get; set; }
    public byte[] FileBytes { get; set; }
    public ModalModel Modal { get; set; } //Only used if the Upload panel uses a modal.

验证者

public class FileSizeAttribute : ValidationAttribute, IClientModelValidator
{
    private long _MaxSize { get; set; }
    public FileSizeAttribute (long maxSize)
    {
        _MaxSize = maxSize;
    }
    protected override ValidationResult IsValid(object value, ValidationContext validationContext)
    {
        UploadPanelModel panel = (UploadPanelModel)validationContext.ObjectInstance;
        return (panel.File==null || panel.File.Length <= _MaxSize) ?  ValidationResult.Success : new ValidationResult(GetFileSizeErrorMessage(_MaxSize));
    }
    private string GetFileSizeErrorMessage(long maxSize)
    {
        double megabytes = maxSize / 1000000.0;
        return $"El archivo debe pesar menos de {megabytes}MB";
    }
    public void AddValidation(ClientModelValidationContext context)
    {
        if(context == null)
        {
            throw new ArgumentNullException(nameof(context));
        }
        MergeAttribute(context.Attributes, "data-val", "true");
        MergeAttribute(context.Attributes, "data-val-filesize", GetFileSizeErrorMessage(_MaxSize));
        var maxSize = _MaxSize.ToString();
        MergeAttribute(context.Attributes, "data-val-filesize-maxsize", maxSize);         
    }
    private bool MergeAttribute(IDictionary<string, string> attributes, string key, string value)
    {
        if (attributes.ContainsKey(key))
        {
            return false;
        }
        attributes.Add(key, value);
        return true;
    }
}

Razor视图中的javascript

@section Scripts{
@{await Html.RenderPartialAsync("_ValidationScriptsPartial");}


<script type="text/javascript">
    $.validator.addMethod('filesize',
        function (value, element, params) {
            var size = $((params[0]).val()).size(),
                maxSize = params[1];
            if (size < maxSize) {
                return false;
            }
            else {
                return false;
            }
        }
    );
    $.validator.unobtrusive.adapters.add('filesize',
        ['maxSize'],
        function (options) {
            var element = $(options.form).find('input#File')[0];
            options.rules['filesize'] = [element, options.params['maxSize']];
            options.messages['filesize'] = options.message;
        }
    );
</script>

我总是在javascript方法中返回false，以强制应用程序显示验证错误，而不管所选的文件如何，但仍然无法正常工作。

Answer 1

您的addMethod()函数将引发错误，因为params[0]不是jQuery对象，并且没有.val()（您在错误的位置也有$）。您将需要使用

var size = params[0].files[0].size;

但是我建议您将脚本编写为

$.validator.unobtrusive.adapters.add('filesize', ['maxsize'], function (options) {
    options.rules['filesize'] = { maxsize: options.params.maxsize };
    if (options.message) {
        options.messages['filesize'] = options.message;
    }
});

$.validator.addMethod("filesize", function (value, element, param) {
    if (value === "") {
        return true;
    }
    var maxsize = parseInt(param.maxsize);
    if (element.files != undefined && element.files[0] != undefined && element.files[0].size != undefined) {
        var filesize = parseInt(element.files[0].size);
        return filesize <= maxsize ;
    }
    return true; // in case browser does not support HTML5 file API
});

IClientValidator是否支持输入文件？

1 个答案: