如何在 Blazor 中写出第一个表单验证？Blazored.FluentValidation 保姆级示例教程
【免费下载链接】FluentValidationA library for using FluentValidation with Blazor项目地址: https://gitcode.com/gh_mirrors/flue/FluentValidation
想在 Blazor 中写出第一个表单验证？Blazored.FluentValidation正是为此而生的开源库，它把业界流行的 FluentValidation 校验框架无缝接入 Blazor 的EditForm，让你用最少的代码实现专业级的表单校验体验。本篇文章将用保姆级示例教程，带你从零开始完成 Blazor 表单验证，全程无需纠结底层细节，照着做就能跑通！
Blazored.FluentValidation 是什么？为什么它能简化 Blazor 表单验证
Blazor 自带的DataAnnotations校验功能虽简单，但对复杂规则（如跨字段校验、异步唯一性检查、规则分组）就力不从心了。Blazored.FluentValidation巧妙地把 FluentValidation 的验证器接入 Blazor 的EditContext，实现了三大杀手锏：
- ✅自动关联：放在
EditForm内即可自动生效，字段校验、整表校验全托管 - ✅智能查找验证器：优先从依赖注入容器获取，找不到时自动扫描程序集
- ✅完美异步：原生支持
MustAsync等异步规则，邮箱查重、用户名占用检测轻松搞定
它的核心实现只靠两个文件撑起整个框架：FluentValidationsValidator.cs 负责组件声明周期，EditContextFluentValidationExtensions.cs 负责把校验结果写回 Blazor 的ValidationMessageStore，感兴趣的同学可以翻翻源码，代码量不大但设计相当精巧。
第一步：一分钟完成安装（最快配置方法）
打开 NuGet 包管理器，搜索Blazored.FluentValidation，或直接在包管理器控制台执行：
Install-Package Blazored.FluentValidation然后在根目录的_Imports.razor中加入一行引用：
@using Blazored.FluentValidation安装完成！接下来我们来构建第一个表单验证示例。
第二步：编写模型类与验证器规则
首先定义一个Person模型，并为其编写继承自AbstractValidator<T>的验证器。这里以项目示例 samples/Shared/SharedModels/Person.cs 为蓝本，规则一目了然：
- 姓名必填且不超过 50 个字符
- 年龄必须介于 0 到 150 之间
- 邮箱必填、格式合法，并且调用
MustAsync做异步查重
public class PersonValidator : AbstractValidator<Person> { public PersonValidator() { RuleFor(p => p.FirstName) .NotEmpty().WithMessage("You must enter your first name") .MaximumLength(50); RuleFor(p => p.Age) .NotNull().WithMessage("You must enter your age") .GreaterThanOrEqualTo(0) .LessThan(150); RuleFor(p => p.EmailAddress) .NotEmpty().WithMessage("You must enter an email address") .EmailAddress().WithMessage("You must provide a valid email address") .MustAsync(IsUniqueAsync).WithMessage("Email address must be unique"); } private static async Task<bool> IsUniqueAsync(string? email) { await Task.Delay(300); // 模拟数据库查询 return email?.ToLower() != "mail@my.com"; } }💡 提示：项目中的完整示例在
samples/BlazorServer（依赖注入模式）和samples/BlazorWebAssembly（程序集扫描模式）两个示例工程里，双端体验可以对照查看。
第三步：在 EditForm 中接入 FluentValidationValidator
这是最核心的一步！把<FluentValidationValidator />放进<EditForm>，再配合ValidationSummary和ValidationMessage，校验体系就自动运转起来了：
<EditForm Model="@_person" OnValidSubmit="@SubmitValidForm"> <FluentValidationValidator /> <ValidationSummary /> <p> <label>姓名：</label> <InputText @bind-Value="@_person.FirstName" /> <ValidationMessage For="@(() => _person.FirstName)" /> </p> <p> <label>邮箱：</label> <InputText @bind-Value="@_person.EmailAddress" /> <ValidationMessage For="@(() => _person.EmailAddress)" /> </p> <button type="submit">保存</button> </EditForm> @code { private readonly Person _person = new(); private void SubmitValidForm() => Console.WriteLine("表单校验通过，提交成功！"); }运行起来你就会发现：字段一失焦就校验、点提交整表校验，错误信息精准显示在每个字段下方——这就是 Blazor 表单验证该有的体验！
如何手动触发校验？
有时你需要在按钮点击时主动校验（而非依赖表单提交），可以给组件加@ref，然后调用Validate()方法：
@code { private FluentValidationValidator? _fluentValidationValidator; private void Submit() { var result = _fluentValidationValidator!.Validate(); Console.WriteLine(result ? "校验通过" : "校验失败"); } }第四步：进阶技巧——异步验证的正确打开方式
当验证器包含MustAsync这类异步规则时，请务必使用ValidateAsync()而不是同步的Validate()，否则异步结果可能丢失：
private async Task SubmitFormAsync() { if (await _fluentValidationValidator!.ValidateAsync()) { Console.WriteLine("异步校验通过！"); } }框架内部会把异步校验任务暂存在EditContext的PendingAsyncValidation属性中等待完成，这一设计在 EditContextFluentValidationExtensions.cs 中有详细体现，原理值得一看。
第五步：RuleSets 分组校验与完整错误信息
按需校验部分字段
使用 FluentValidation 的 RuleSets 可以对规则分组，只校验你想校验的部分。示例 samples/BlazorServer/Pages/Index.razor 中就演示了「只校验姓名」的场景：
_fluentValidationValidator?.Validate(options => options.IncludeRuleSets("Names"));获取完整的 ValidationFailure 详情
默认 Blazor 只显示错误文案，但如果你想拿到Severity（严重级别）、错误码等完整信息，可以调用GetFailuresFromLastValidation()：
var lastResult = _fluentValidationValidator?.GetFailuresFromLastValidation();这在实现「警告不阻断提交、错误才阻断」的高级交互时非常有用。
性能优化：务必理解 DisableAssemblyScanning 参数
默认情况下，组件会先查依赖注入容器，再扫描程序集找验证器。程序集扫描有一定开销，且会吞掉扫描第三方依赖时的异常。
推荐做法：
| 场景 | 推荐配置 |
|---|---|
| 已在 DI 中注册验证器 | DisableAssemblyScanning="true"，跳过扫描、性能最佳 |
| 不想手动注册（WebAssembly 端常见） | 保持默认，自动反射查找 |
例如 Blazor Server 示例就在Program.cs中注册验证器，并在页面里显式关闭扫描：
builder.Services.AddTransient<IValidator<Person>, PersonValidator>();<FluentValidationValidator DisableAssemblyScanning="@true" />写在最后
至此，你已经成功写出 Blazor 中的第一个表单验证！回顾一下核心要点：
- NuGet 安装
Blazored.FluentValidation并添加@using - 为模型编写
AbstractValidator<T>验证器 - 在
EditForm内放置<FluentValidationValidator /> - 异步规则记得用
ValidateAsync() - 追求性能时开启
DisableAssemblyScanning
想获取全部示例源码，可以执行git clone https://gitcode.com/gh_mirrors/flue/FluentValidation拉取仓库，对照samples目录下的两个示例工程（Blazor Server 与 Blazor WebAssembly）和tests目录下的测试代码，立刻就能上手。快去动手实现你的第一个 Blazor 表单验证吧！🚀
【免费下载链接】FluentValidationA library for using FluentValidation with Blazor项目地址: https://gitcode.com/gh_mirrors/flue/FluentValidation
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
