如何在 Blazor 中寫出第一個表單驗證Blazored.FluentValidation 保姆級示例教程【免費下載鏈接】FluentValidationA library for using FluentValidation with Blazor項目地址: https://gitcode.com/gh_mirrors/flue/FluentValidation想在 Blazor 中寫出第一個表單驗證Blazored.FluentValidation正是為此而生的開源庫它把業(yè)界流行的 FluentValidation 校驗框架無縫接入 Blazor 的EditForm讓你用最少的代碼實現(xiàn)專業(yè)級的表單校驗體驗。本篇文章將用保姆級示例教程帶你從零開始完成 Blazor 表單驗證全程無需糾結(jié)底層細節(jié)照著做就能跑通Blazored.FluentValidation 是什么為什么它能簡化 Blazor 表單驗證Blazor 自帶的DataAnnotations校驗功能雖簡單但對復雜規(guī)則如跨字段校驗、異步唯一性檢查、規(guī)則分組就力不從心了。Blazored.FluentValidation巧妙地把 FluentValidation 的驗證器接入 Blazor 的EditContext實現(xiàn)了三大殺手锏?自動關(guān)聯(lián)放在EditForm內(nèi)即可自動生效字段校驗、整表校驗全托管?智能查找驗證器優(yōu)先從依賴注入容器獲取找不到時自動掃描程序集?完美異步原生支持MustAsync等異步規(guī)則郵箱查重、用戶名占用檢測輕松搞定它的核心實現(xiàn)只靠兩個文件撐起整個框架FluentValidationsValidator.cs 負責組件聲明周期EditContextFluentValidationExtensions.cs 負責把校驗結(jié)果寫回 Blazor 的ValidationMessageStore感興趣的同學可以翻翻源碼代碼量不大但設計相當精巧。第一步一分鐘完成安裝最快配置方法打開 NuGet 包管理器搜索Blazored.FluentValidation或直接在包管理器控制臺執(zhí)行Install-Package Blazored.FluentValidation然后在根目錄的_Imports.razor中加入一行引用using Blazored.FluentValidation安裝完成接下來我們來構(gòu)建第一個表單驗證示例。第二步編寫模型類與驗證器規(guī)則首先定義一個Person模型并為其編寫繼承自AbstractValidatorT的驗證器。這里以項目示例 samples/Shared/SharedModels/Person.cs 為藍本規(guī)則一目了然姓名必填且不超過 50 個字符年齡必須介于 0 到 150 之間郵箱必填、格式合法并且調(diào)用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); // 模擬數(shù)據(jù)庫查詢 return email?.ToLower() ! mailmy.com; } } 提示項目中的完整示例在samples/BlazorServer依賴注入模式和samples/BlazorWebAssembly程序集掃描模式兩個示例工程里雙端體驗可以對照查看。第三步在 EditForm 中接入 FluentValidationValidator這是最核心的一步把FluentValidationValidator /放進EditForm再配合ValidationSummary和ValidationMessage校驗體系就自動運轉(zhuǎn)起來了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(表單校驗通過提交成功); }運行起來你就會發(fā)現(xiàn)字段一失焦就校驗、點提交整表校驗錯誤信息精準顯示在每個字段下方——這就是 Blazor 表單驗證該有的體驗如何手動觸發(fā)校驗有時你需要在按鈕點擊時主動校驗而非依賴表單提交可以給組件加ref然后調(diào)用Validate()方法code { private FluentValidationValidator? _fluentValidationValidator; private void Submit() { var result _fluentValidationValidator!.Validate(); Console.WriteLine(result ? 校驗通過 : 校驗失敗); } }第四步進階技巧——異步驗證的正確打開方式當驗證器包含MustAsync這類異步規(guī)則時請務必使用ValidateAsync()而不是同步的Validate()否則異步結(jié)果可能丟失private async Task SubmitFormAsync() { if (await _fluentValidationValidator!.ValidateAsync()) { Console.WriteLine(異步校驗通過); } }框架內(nèi)部會把異步校驗任務暫存在EditContext的PendingAsyncValidation屬性中等待完成這一設計在 EditContextFluentValidationExtensions.cs 中有詳細體現(xiàn)原理值得一看。第五步RuleSets 分組校驗與完整錯誤信息按需校驗部分字段使用 FluentValidation 的 RuleSets 可以對規(guī)則分組只校驗你想校驗的部分。示例 samples/BlazorServer/Pages/Index.razor 中就演示了「只校驗姓名」的場景_fluentValidationValidator?.Validate(options options.IncludeRuleSets(Names));獲取完整的 ValidationFailure 詳情默認 Blazor 只顯示錯誤文案但如果你想拿到Severity嚴重級別、錯誤碼等完整信息可以調(diào)用GetFailuresFromLastValidation()var lastResult _fluentValidationValidator?.GetFailuresFromLastValidation();這在實現(xiàn)「警告不阻斷提交、錯誤才阻斷」的高級交互時非常有用。性能優(yōu)化務必理解 DisableAssemblyScanning 參數(shù)默認情況下組件會先查依賴注入容器再掃描程序集找驗證器。程序集掃描有一定開銷且會吞掉掃描第三方依賴時的異常。推薦做法場景推薦配置已在 DI 中注冊驗證器DisableAssemblyScanningtrue跳過掃描、性能最佳不想手動注冊WebAssembly 端常見保持默認自動反射查找例如 Blazor Server 示例就在Program.cs中注冊驗證器并在頁面里顯式關(guān)閉掃描builder.Services.AddTransientIValidatorPerson, PersonValidator();FluentValidationValidator DisableAssemblyScanningtrue /寫在最后至此你已經(jīng)成功寫出 Blazor 中的第一個表單驗證回顧一下核心要點NuGet 安裝Blazored.FluentValidation并添加using為模型編寫AbstractValidatorT驗證器在EditForm內(nèi)放置FluentValidationValidator /異步規(guī)則記得用ValidateAsync()追求性能時開啟DisableAssemblyScanning想獲取全部示例源碼可以執(zhí)行g(shù)it clone https://gitcode.com/gh_mirrors/flue/FluentValidation拉取倉庫對照samples目錄下的兩個示例工程Blazor Server 與 Blazor WebAssembly和tests目錄下的測試代碼立刻就能上手?？烊邮謱崿F(xiàn)你的第一個 Blazor 表單驗證吧【免費下載鏈接】FluentValidationA library for using FluentValidation with Blazor項目地址: https://gitcode.com/gh_mirrors/flue/FluentValidation創(chuàng)作聲明：本文部分內(nèi)容由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正是為此而生的開源庫它把業(yè)界流行的 FluentValidation 校驗框架無縫接入 Blazor 的EditForm讓你用最少的代碼實現(xiàn)專業(yè)級的表單校驗體驗。本篇文章將用保姆級示例教程帶你從零開始完成 Blazor 表單驗證全程無需糾結(jié)底層細節(jié)照著做就能跑通Blazored.FluentValidation 是什么為什么它能簡化 Blazor 表單驗證Blazor 自帶的DataAnnotations校驗功能雖簡單但對復雜規(guī)則如跨字段校驗、異步唯一性檢查、規(guī)則分組就力不從心了。Blazored.FluentValidation巧妙地把 FluentValidation 的驗證器接入 Blazor 的EditContext實現(xiàn)了三大殺手锏?自動關(guān)聯(lián)放在EditForm內(nèi)即可自動生效字段校驗、整表校驗全托管?智能查找驗證器優(yōu)先從依賴注入容器獲取找不到時自動掃描程序集?完美異步原生支持MustAsync等異步規(guī)則郵箱查重、用戶名占用檢測輕松搞定它的核心實現(xiàn)只靠兩個文件撐起整個框架FluentValidationsValidator.cs 負責組件聲明周期EditContextFluentValidationExtensions.cs 負責把校驗結(jié)果寫回 Blazor 的ValidationMessageStore感興趣的同學可以翻翻源碼代碼量不大但設計相當精巧。第一步一分鐘完成安裝最快配置方法打開 NuGet 包管理器搜索Blazored.FluentValidation或直接在包管理器控制臺執(zhí)行Install-Package Blazored.FluentValidation然后在根目錄的_Imports.razor中加入一行引用using Blazored.FluentValidation安裝完成接下來我們來構(gòu)建第一個表單驗證示例。第二步編寫模型類與驗證器規(guī)則首先定義一個Person模型并為其編寫繼承自AbstractValidatorT的驗證器。這里以項目示例 samples/Shared/SharedModels/Person.cs 為藍本規(guī)則一目了然姓名必填且不超過 50 個字符年齡必須介于 0 到 150 之間郵箱必填、格式合法并且調(diào)用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); // 模擬數(shù)據(jù)庫查詢 return email?.ToLower() ! mailmy.com; } } 提示項目中的完整示例在samples/BlazorServer依賴注入模式和samples/BlazorWebAssembly程序集掃描模式兩個示例工程里雙端體驗可以對照查看。第三步在 EditForm 中接入 FluentValidationValidator這是最核心的一步把FluentValidationValidator /放進EditForm再配合ValidationSummary和ValidationMessage校驗體系就自動運轉(zhuǎn)起來了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(表單校驗通過提交成功); }運行起來你就會發(fā)現(xiàn)字段一失焦就校驗、點提交整表校驗錯誤信息精準顯示在每個字段下方——這就是 Blazor 表單驗證該有的體驗如何手動觸發(fā)校驗有時你需要在按鈕點擊時主動校驗而非依賴表單提交可以給組件加ref然后調(diào)用Validate()方法code { private FluentValidationValidator? _fluentValidationValidator; private void Submit() { var result _fluentValidationValidator!.Validate(); Console.WriteLine(result ? 校驗通過 : 校驗失敗); } }第四步進階技巧——異步驗證的正確打開方式當驗證器包含MustAsync這類異步規(guī)則時請務必使用ValidateAsync()而不是同步的Validate()否則異步結(jié)果可能丟失private async Task SubmitFormAsync() { if (await _fluentValidationValidator!.ValidateAsync()) { Console.WriteLine(異步校驗通過); } }框架內(nèi)部會把異步校驗任務暫存在EditContext的PendingAsyncValidation屬性中等待完成這一設計在 EditContextFluentValidationExtensions.cs 中有詳細體現(xiàn)原理值得一看。第五步RuleSets 分組校驗與完整錯誤信息按需校驗部分字段使用 FluentValidation 的 RuleSets 可以對規(guī)則分組只校驗你想校驗的部分。示例 samples/BlazorServer/Pages/Index.razor 中就演示了「只校驗姓名」的場景_fluentValidationValidator?.Validate(options options.IncludeRuleSets(Names));獲取完整的 ValidationFailure 詳情默認 Blazor 只顯示錯誤文案但如果你想拿到Severity嚴重級別、錯誤碼等完整信息可以調(diào)用GetFailuresFromLastValidation()var lastResult _fluentValidationValidator?.GetFailuresFromLastValidation();這在實現(xiàn)「警告不阻斷提交、錯誤才阻斷」的高級交互時非常有用。性能優(yōu)化務必理解 DisableAssemblyScanning 參數(shù)默認情況下組件會先查依賴注入容器再掃描程序集找驗證器。程序集掃描有一定開銷且會吞掉掃描第三方依賴時的異常。推薦做法場景推薦配置已在 DI 中注冊驗證器DisableAssemblyScanningtrue跳過掃描、性能最佳不想手動注冊WebAssembly 端常見保持默認自動反射查找例如 Blazor Server 示例就在Program.cs中注冊驗證器并在頁面里顯式關(guān)閉掃描builder.Services.AddTransientIValidatorPerson, PersonValidator();FluentValidationValidator DisableAssemblyScanningtrue /寫在最后至此你已經(jīng)成功寫出 Blazor 中的第一個表單驗證回顧一下核心要點NuGet 安裝Blazored.FluentValidation并添加using為模型編寫AbstractValidatorT驗證器在EditForm內(nèi)放置FluentValidationValidator /異步規(guī)則記得用ValidateAsync()追求性能時開啟DisableAssemblyScanning想獲取全部示例源碼可以執(zhí)行g(shù)it clone https://gitcode.com/gh_mirrors/flue/FluentValidation拉取倉庫對照samples目錄下的兩個示例工程Blazor Server 與 Blazor WebAssembly和tests目錄下的測試代碼立刻就能上手?？烊邮謱崿F(xiàn)你的第一個 Blazor 表單驗證吧【免費下載鏈接】FluentValidationA library for using FluentValidation with Blazor項目地址: https://gitcode.com/gh_mirrors/flue/FluentValidation創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考