如何在 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模型并为其编写继承自AbstractValidatorT的验证器。这里以项目示例 samples/Shared/SharedModels/Person.cs 为蓝本规则一目了然姓名必填且不超过 50 个字符年龄必须介于 0 到 150 之间邮箱必填、格式合法并且调用MustAsync做异步查重public class PersonValidator : AbstractValidatorPerson { 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 Taskbool IsUniqueAsync(string? email) { await Task.Delay(300); // 模拟数据库查询 return email?.ToLower() ! mailmy.com; } } 提示项目中的完整示例在samples/BlazorServer依赖注入模式和samples/BlazorWebAssembly程序集扫描模式两个示例工程里双端体验可以对照查看。第三步在 EditForm 中接入 FluentValidationValidator这是最核心的一步把FluentValidationValidator /放进EditForm再配合ValidationSummary和ValidationMessage校验体系就自动运转起来了EditForm Model_person OnValidSubmitSubmitValidForm 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 typesubmit保存/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 中注册验证器DisableAssemblyScanningtrue跳过扫描、性能最佳不想手动注册WebAssembly 端常见保持默认自动反射查找例如 Blazor Server 示例就在Program.cs中注册验证器并在页面里显式关闭扫描builder.Services.AddTransientIValidatorPerson, PersonValidator();FluentValidationValidator DisableAssemblyScanningtrue /写在最后至此你已经成功写出 Blazor 中的第一个表单验证回顾一下核心要点NuGet 安装Blazored.FluentValidation并添加using为模型编写AbstractValidatorT验证器在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），仅供参考 如何在 Blazor 中写出第一个表单验证？Blazored.FluentValidation 保姆级示例教程
如何在 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模型并为其编写继承自AbstractValidatorT的验证器。这里以项目示例 samples/Shared/SharedModels/Person.cs 为蓝本规则一目了然姓名必填且不超过 50 个字符年龄必须介于 0 到 150 之间邮箱必填、格式合法并且调用MustAsync做异步查重public class PersonValidator : AbstractValidatorPerson { 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 Taskbool IsUniqueAsync(string? email) { await Task.Delay(300); // 模拟数据库查询 return email?.ToLower() ! mailmy.com; } } 提示项目中的完整示例在samples/BlazorServer依赖注入模式和samples/BlazorWebAssembly程序集扫描模式两个示例工程里双端体验可以对照查看。第三步在 EditForm 中接入 FluentValidationValidator这是最核心的一步把FluentValidationValidator /放进EditForm再配合ValidationSummary和ValidationMessage校验体系就自动运转起来了EditForm Model_person OnValidSubmitSubmitValidForm 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 typesubmit保存/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 中注册验证器DisableAssemblyScanningtrue跳过扫描、性能最佳不想手动注册WebAssembly 端常见保持默认自动反射查找例如 Blazor Server 示例就在Program.cs中注册验证器并在页面里显式关闭扫描builder.Services.AddTransientIValidatorPerson, PersonValidator();FluentValidationValidator DisableAssemblyScanningtrue /写在最后至此你已经成功写出 Blazor 中的第一个表单验证回顾一下核心要点NuGet 安装Blazored.FluentValidation并添加using为模型编写AbstractValidatorT验证器在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），仅供参考