Blazor中基于MudBlazor的Fluent异步验证失效及异步调用Form.Validate()问题
问题详情
MudBlazor 表单支持在Blazor应用中结合FluentValidation实现校验能力,我完全参照官方文档的示例编写了相关代码,同步校验场景全部运行正常,但是一旦引入依赖异步函数的自定义校验规则,校验逻辑就无法生效,想请问有没有支持异步执行的表单批量校验实现方式?
已实现的同步校验流程
- 编写通用FluentValueValidator基类
public FluentValueValidator(Action<IRuleBuilderInitial<T, T>> rule) { rule(RuleFor(x => x)); } - 创建具体校验器实例(示例为
dependencyLinkValidator)public FluentValueValidator<string> dependencyLinkValidator = new FluentValueValidator<string>(x => x .NotEmpty().WithMessage("{PropertyName} cannot be empty.").WithName("Link")); - 将校验器绑定到MudForm组件
Validation="dependencyLinkValidator.Validation" - 常规交互下,用户在输入框键入新内容时会自动触发表单实时校验;我会在用户点击提交按钮时调用
Form.Validate(),完成表单内所有控件的批量校验Form.Validate();
以上实现下,哪怕是自定义校验规则都可以正常工作。
出问题的异步校验代码
我新增了带异步依赖的校验规则后,校验逻辑就不再生效:
public FluentValueValidator<string> dependencyLinkValidator = new FluentValueValidator<string>(x => x .NotEmpty().WithMessage("{PropertyName} cannot be empty.") .MustAsync(async (x, cancellation) => { return await AsyncFunction(x); }).WithMessage("Site doesn't exist") .WithName("Link"));
问题成因
问题的根源很简单:MudForm 自带的Validate()是同步实现,内部只会调用FluentValidation的同步校验接口,整个执行流程里根本不会触发MustAsync配置的异步规则,你写的异步函数自然不会被执行。
可用解决路径
- 最省事的方案:把MudBlazor升级到6.0.0及以上正式版本,这个版本的MudForm已经内置了原生异步校验方法
ValidateAsync(),直接替换提交按钮里原来的同步调用即可
这个方法内部会走FluentValidation的异步校验流程,所有配置了// 之前的同步批量校验 Form.Validate(); // 替换为异步版本 await Form.ValidateAsync();MustAsync的规则都会被正常执行,可覆盖输入时实时校验、提交时全表单批量校验两类场景。 - 如果项目受兼容性限制无法升级,也可以绕开组件自带的同步校验逻辑:手动遍历当前表单绑定的所有FluentValidation校验器实例,直接调用每个实例自带的
ValidateAsync()方法拿到校验结果,再将结果同步到MudForm的公开状态字段,一样能实现异步批量校验的效果。 - 容易踩的坑:异步校验的lambda里不要直接修改组件的UI属性,跨线程操作容易导致页面状态不同步,最好把校验逻辑纯化为只返回校验结果,不要耦合UI操作。
内容的提问来源于stack exchange,提问作者RandomSlav
相关产品推荐
相关产品推荐

