Blazor中IBrowserFile变更时自定义ValidationAttribute不触发验证问题

问题根因 #

• Blazor 内置的 InputFile 组件没有像普通输入组件（如InputText）那样内置值变更后自动触发EditContext验证的逻辑，文件选择后仅完成属性赋值，不会主动通知验证系统执行校验。
• 你同时为InputFile声明了@bind-Value和自定义OnChange事件，@bind-Value本质是语法糖，内部已经绑定了OnChange事件处理赋值逻辑，重复声明会导致默认绑定逻辑被覆盖，可能出现属性值更新异常、验证无法触发的问题。
• 额外提示：你代码中<div div="form-control row">是笔误，应改为class="form-control row"，不过该问题不影响验证逻辑。

修复方案 #

你可以选择以下任意一种方式修复，推荐根据你的.NET版本选择更简洁的写法：

方案1：手动处理OnChange事件（兼容所有.NET版本） #

移除@bind-Value绑定，完全手动处理文件赋值+验证触发：

1. 修改页面InputFile代码：

<DataAnnotationsValidator />
<div class="form-control row">
    <label for="@RegisterModel.File" class="col-form-label">File:</label>
    <InputFile OnChange="@LoadFiles" class="form-control-file"></InputFile>
    <ValidationMessage For="()=>RegisterModel.File"/>
</div>

2. 在代码块中初始化EditContext，实现LoadFiles方法：

// 声明EditContext实例
private EditContext EditContext { get; set; }
// 你的模型实例
private RegisterEmployeeModel RegisterEmployeeModel { get; set; } = new();

protected override void OnInitialized()
{
    // 绑定模型到EditContext
    EditContext = new EditContext(RegisterEmployeeModel);
}

private void LoadFiles(InputFileChangeEventArgs e)
{
    // 手动给属性赋值
    RegisterEmployeeModel.File = e.File;
    // 手动触发该字段的验证
    EditContext.NotifyFieldChanged(FieldIdentifier.Create(() => RegisterEmployeeModel.File));
}

3. 确保你的EditForm绑定的是EditContext实例，而非直接绑定Model：

<EditForm EditContext="EditContext">
    <!-- 表单内容 -->
</EditForm>

方案2：使用@bind:after触发验证（适用于.NET 7及以上版本） #

如果要保留@bind-Value的简洁写法，可以借助@bind:after在值绑定完成后主动触发验证：

1. 修改InputFile代码：

<InputFile @bind-Value="RegisterEmployeeModel.File" @bind-Value:after="TriggerFileValidation" class="form-control-file"></InputFile>

2. 实现触发验证的方法：

private void TriggerFileValidation()
{
    EditContext.NotifyFieldChanged(FieldIdentifier.Create(() => RegisterEmployeeModel.File));
}

校验自定义验证特性 #

确保你的FileTypeValidation特性正确适配IBrowserFile类型，参考写法：

public class FileTypeValidationAttribute : ValidationAttribute
{
    protected override ValidationResult? IsValid(object? value, ValidationContext validationContext)
    {
        if (value is not IBrowserFile file)
        {
            return new ValidationResult("请选择上传文件");
        }
        // 替换为你需要的校验逻辑，比如限制允许的文件类型、大小等
        var allowedContentTypes = new[] { "image/png", "image/jpeg", "application/pdf" };
        if (!allowedContentTypes.Contains(file.ContentType.ToLower()))
        {
            return new ValidationResult("仅支持上传png、jpg、pdf格式的文件");
        }
        return ValidationResult.Success;
    }
}

内容的提问来源于stack exchange，提问作者PontiacGTX