Blazor 怎么集成 FluentValidation

2次阅读

Blazor 中集成 FluentValidation 用于表单模型验证,提升客户端体验并保持服务端逻辑一致:安装 FluentValidation 和 FluentValidation.Blazor 包,创建继承 AbstractValidator 的验证器并注册为 Singleton,再在 EditForm 中使用 FluentValidationValidator 组件替代 DataAnnotationsValidator。

Blazor 怎么集成 FluentValidation

Blazor 中集成 FluentValidation 主要用于表单模型验证,提升客户端体验并保持服务端验证逻辑一致。核心思路是:用 FluentValidation 编写验证规则,再通过 Blazor 的 EditContextDataAnnotationsValidator(或自定义验证器)将规则接入表单生命周期。

1. 安装必要 NuGet 包

确保项目引用以下包:

  • FluentValidation(主库,如 v11+)
  • FluentValidation.Blazor(官方支持包,v6+ 适配 .net 6/7/8,含 FluentValidationValidator 组件)

运行命令(以 .NET 8 项目为例):

dotnet add package FluentValidation
dotnet add package FluentValidation.Blazor

2. 创建验证器类

为你的模型(比如 Person)编写继承自 AbstractValidator<t></t> 的验证器:

public class Person {     public string Name { get; set; } = string.Empty;     public int Age { get; set; } }  public class PersonValidator : AbstractValidator<Person> {     public PersonValidator()     {         RuleFor(x => x.Name).NotEmpty().MinimumLength(2);         RuleFor(x => x.Age).InclusiveBetween(0, 150);     } }

推荐在 DI 容器中注册为 Singleton(验证器无状态,线程安全):

Blazor 怎么集成 FluentValidation

Leonardo.ai

一个免费的ai绘画生成平台,专注于视频游戏图片素材的制作。

Blazor 怎么集成 FluentValidation 185

查看详情 Blazor 怎么集成 FluentValidation

builder.Services.AddFluentValidationClientsideadapters();
builder.Services.AddSingleton, PersonValidator>();

3. 在 Blazor 组件中使用验证

.razor 文件中启用验证流程:

  • <editform></editform> 包裹表单,并绑定 EditContext
  • 添加 <fluentvalidationvalidator></fluentvalidationvalidator>(来自 FluentValidation.Blazor)替代默认的 DataAnnotationsValidator
  • <validationsummary></validationsummary><validationmessage></validationmessage> 显示错误

示例:

@using FluentValidation.Blazor  <EditForm Model="@person" OnValidSubmit="HandleValidSubmit">     <FluentValidationValidator />     <ValidationSummary />      <div>         <InputText @bind-Value="person.Name" placeholder="姓名" />         <ValidationMessage For="@(() => person.Name)" />     </div>      <div>         <InputNumber @bind-Value="person.Age" placeholder="年龄" />         <ValidationMessage For="@(() => person.Age)" />     </div>      <button type="submit">提交</button> </EditForm>  @code {     private Person person = new();     private void HandleValidSubmit() => Console.WriteLine("提交成功"); }

4. 高级技巧(可选)

手动触发验证:注入 IValidator<t></t>,调用 ValidateAsync 获取结果,适用于非表单场景或自定义校验时机。
本地化错误消息:配置 LanguageManager 或重写 WithMessage 使用资源文件。
服务端验证联动:API 返回 ValidationProblemDetails 时,前端可用 FluentValidation 规则做预检,减少无效请求。

基本上就这些。FluentValidation.Blazor 让验证逻辑复用、提示友好、扩展性强,比纯 DataAnnotations 更灵活,也更容易和后端共享规则。

text=ZqhQzanResources