ASP.NET Core Blazor 核心功能二：Blazor表單和驗證
大家好，我是碼農剛子。本文介紹了Blazor中EditForm組件的使用及表單驗證方案。主要內容包括：
1）EditForm基礎用法，通過Model參數(shù)綁定模型，使用DataAnnotationsValidator實現(xiàn)數(shù)據(jù)注解驗證；
2）自定義驗證規(guī)則實現(xiàn)，通過繼承ComponentBase創(chuàng)建CustomValidator組件，結合ValidationMessageStore管理驗證消息；
3）集成第三方驗證庫FluentValidation，展示如何定義復雜業(yè)務規(guī)則驗證。文章提供了完整代碼示例，涵蓋內置驗證、自定義驗證和第三方驗證三種方案，幫助開發(fā)者靈活處理Blazor表單驗證需求。
一、EditForm 組件使用
Blazor 的 EditForm 是一個強大的組件，用于處理表單輸入和驗證。它通過綁定模型和驗證邏輯，簡化了表單的開發(fā)過程。以下是 EditForm 的核心功能和使用示例。
Blazor 表單內置組件
基本功能
EditForm 組件通過 Model 參數(shù)綁定到一個模型實例，并使用 DataAnnotationsValidator 組件支持基于數(shù)據(jù)注釋的驗證。它提供了以下事件回調：
- OnValidSubmit：當表單驗證通過時觸發(fā)。
- OnInvalidSubmit：當表單驗證失敗時觸發(fā)。
- OnSubmit：無論驗證狀態(tài)如何，都會觸發(fā)。
以下是一個簡單的表單示例：
@page "/formsample" @using System.ComponentModel.DataAnnotations; <h3>表單</h3> <p>@stu.ToString()</p> <EditForm Model="@stu" OnValidSubmit="onValidSubmit" OnInvalidSubmit="onInvalidSubmit"> <DataAnnotationsValidator></DataAnnotationsValidator> <ValidationSummary></ValidationSummary> <div class="form-inline"> 姓名：<InputText @bind-Value="stu.name"></InputText> <ValidationMessage For="() => stu.name" /> </div> <div class="form-inline"> 年齡：<InputNumber @bind-Value="stu.age"></InputNumber> </div> <div class="form-inline"> 生日：<InputDate @bind-Value="stu.birthday"></InputDate> </div> <div class="form-inline"> 是否婚配： <InputCheckbox @bind-Value="stu.ismarried"></InputCheckbox> </div> <div class="form-inline"> 現(xiàn)居城市： <InputSelect @bind-Value="stu.city"> <option value="北京">北京</option> <option value="上海">上海</option> <option value="廣州">廣州</option> <option value="深圳">深圳</option> </InputSelect> </div> <button type="submit">Submit</button> </EditForm> @code { public class student { [Required] [StringLength(10, ErrorMessage = "名字最大長度不能超過10位")] public string name { get; set; } = "碼農剛子"; //姓名 [Range(18, 45, ErrorMessage = "年齡必須在18-45歲之間")] public int age { get; set; } = 26; //年齡 public DateTime birthday { get; set; } = System.DateTime.Now;//生日 public string city { get; set; } = "深圳"; //所在城市 public bool ismarried { get; set; } = false; //是否婚配 public override string ToString() { return $"姓名：{name}，年齡：{age},生日：{birthday},城市：{city}，是否婚配：{ismarried}"; } } public student stu = new student() { }; private EditContext editContext; protected override void OnInitialized() { editContext = new EditContext(stu); } public void onSubmit() { Console.WriteLine("on onSubmit"); } public void onValidSubmit() { Console.WriteLine("on onValidSubmit"); } public void onInvalidSubmit() { Console.WriteLine(" onInvalidSubmit"); } }
驗證與錯誤處理
通過 ValidationSummary 組件可以顯示所有驗證錯誤，而 ValidationMessage 組件可以針對特定字段顯示錯誤信息。數(shù)據(jù)注釋如 [Required] 和 [StringLength] 用于定義驗證規(guī)則。
EditForm 提供了一系列數(shù)據(jù)驗證的屬性/方法，這樣我們不用自己再去實現(xiàn)了。
|
屬性/方法名 |
說明 |
|
Modal |
表單實體模型，必填 |
|
OnValidSubmit/OnInvalidSubmit |
提交表單時，驗證通過/未通過 的回調函數(shù) |
|
OnSubmit |
提交表單時的回調函數(shù)，和上面的兩個屬于“或”的關系， 使用了OnValidSubmit/OnInvalidSubmit就不能再使用OnSubmit。同理，使用了OnSubmit就不能使用OnValidSubmit/OnInvalidSubmit。 OnSubmit可以用來做一些自定義的驗證 |
|
DataAnnotationsValidator
|
啟用數(shù)據(jù)注解驗證，就是特性驗證。 |
|
ValidationSummary |
驗證結果摘要。驗證不合法時，會在表單的頂部用html標簽顯示具體錯誤。也是繼承自ComponentBase的一種組件 |
二、自定義驗證規(guī)則
自定義 ValidationMessageStore
如果需要更復雜的校驗邏輯，可以使用 ValidationMessageStore 手動管理驗證消息。
我們來自定義一個驗證組件：
關于驗證的組件思路，我們首先肯定是要從ComponentBase組件來集成，然后我們上面有學習到<EditForm>會定義一個級聯(lián)值，我們自定義的組件也是嵌入到EditForm中，因此我們需要定義級聯(lián)參數(shù)從而引用該值，我們先放代碼：
using Microsoft.AspNetCore.Components; using Microsoft.AspNetCore.Components.Forms; namespace BlazorApp { public class CustomValidator:ComponentBase { private ValidationMessageStore messageStore; [CascadingParameter] private EditContext currentEditContext { get; set; } protected override void OnInitialized() { if (currentEditContext == null) { throw new InvalidOperationException($"{nameof(CustomValidator)} requires a cascading " + $"parameter of type {nameof(EditContext)}. For example, you can use {nameof(CustomValidator)} " + $"inside an EditForm."); } messageStore = new ValidationMessageStore(currentEditContext); currentEditContext.OnValidationRequested += (s, e) => messageStore.Clear(); currentEditContext.OnFieldChanged += (s, e) => messageStore.Clear(e.FieldIdentifier); } public void DisplayErrors(Dictionary<string, List<string>> errors) { foreach (var error in errors) { var fieldIdentifier = new FieldIdentifier(currentEditContext.Model, error.Key); messageStore.Add(fieldIdentifier, error.Value); } currentEditContext.NotifyValidationStateChanged(); } public void ClearErrors() { messageStore.Clear(); currentEditContext.NotifyValidationStateChanged(); } } }
我們需要注意到，在這個組件里我們同時監(jiān)聽了EditContext的onValidationRequest事件，以及OnFieldChange事件，同時我們使用了一個字段ValidationMessageStore, 主要是用于驗證的消息保存，另外我們使用DisplayErrors 收集來自組件的錯誤信息，同時使用EditContext通知訂閱了事件ValidationStateChanged的接收者。
然后我們在EditForm里應用該組件，代碼如下：
@page "/formsample1" @using System.ComponentModel.DataAnnotations; <h3>表單</h3> <p>@stu.ToString()</p> <EditForm Model="@stu" OnValidSubmit="@HandleValidSubmit"> <DataAnnotationsValidator></DataAnnotationsValidator> <CustomValidator @ref="customValidator" /> <div class="form-inline"> 姓名：<InputText @bind-Value="stu.name"></InputText> <ValidationMessage For="() => stu.name" /> </div> <div class="form-inline"> 年齡：<InputNumber @bind-Value="stu.age"></InputNumber> <ValidationMessage For="() => stu.age" /> </div> <div class="form-inline"> 生日：<InputDate @bind-Value="stu.birthday"></InputDate> </div> <div class="form-inline"> 是否婚配： <InputCheckbox @bind-Value="stu.ismarried"></InputCheckbox> </div> <div class="form-inline"> 現(xiàn)居城市： <InputSelect @bind-Value="stu.city"> <option value="北京">北京</option> <option value="上海">上海</option> <option value="廣州">廣州</option> <option value="深圳">深圳</option> </InputSelect> </div> <button type="submit">Submit</button> </EditForm> @code { public class student { [Required] [StringLength(10, ErrorMessage = "名字最大長度不能超過10位")] public string name { get; set; } = "碼農剛子"; //姓名 public int age { get; set; } = 26; //年齡 public DateTime birthday { get; set; } = System.DateTime.Now;//生日 public string city { get; set; } = "深圳"; //所在城市 public bool ismarried { get; set; } = false; //是否婚配 public override string ToString() { return $"姓名：{name}，年齡：{age},生日：{birthday},城市：{city}，是否婚配：{ismarried}"; } } public student stu = new student() { }; private CustomValidator customValidator; private ValidationMessageStore messageStore; private void HandleValidSubmit() { customValidator.ClearErrors(); var errors = new Dictionary<string, List<string>>(); if (stu.name == "admin") { errors.Add(nameof(stu.name), new List<string> { "姓名不能為 admin" }); } if (stu.age < 18 || stu.age > 60) { errors.Add(nameof(stu.age), new List<string> { "年齡必須在 18 到 60 歲之間" }); } if (errors.Count > 0) { customValidator.DisplayErrors(errors); } else { Console.WriteLine($"表單提交成功:{stu.ToString()}！"); } } }
三、第三方驗證庫（如 FluentValidation）
在 Blazor 應用中，使用像 FluentValidation 這樣的第三方庫來處理表單驗證，可以讓你擺脫內置數(shù)據(jù)注解的限制，更靈活地定義復雜的業(yè)務驗證規(guī)則。社區(qū)提供了諸如 Blazored.FluentValidation 這樣的庫來簡化集成工作。
1. 安裝 NuGet 包
根據(jù)你選擇的 FluentValidation Blazor 集成庫，在項目目錄下執(zhí)行安裝命令，或者手動打開管理NuGet程序包，搜索安裝。例如，使用 Blazored.FluentValidation包：
dotnet add package FluentValidation
dotnet add package Blazored.FluentValidation
2. 創(chuàng)建模型與驗證器
創(chuàng)建一個數(shù)據(jù)模型（例如 User 類）和對應的驗證器類。
// 模型類 public class User { public string Name { get; set; } public string Email { get; set; } } // 驗證器類 using FluentValidation; public class UserValidator : AbstractValidator<User> { public UserValidator() { // 定義驗證規(guī)則 RuleFor(user => user.Name) .NotEmpty().WithMessage("姓名不能為空。") // 非空驗證 .MaximumLength(10).WithMessage("姓名長度不能超過10個字符。"); // 最大長度驗證 RuleFor(user => user.Email) .NotEmpty().WithMessage("郵箱地址不能為空。") .EmailAddress().WithMessage("請輸入有效的郵箱地址。"); // 郵箱格式驗證 } }
3. 注冊驗證器服務
在 Program.cs 文件中，將你的自定義驗證器注冊到依賴注入容器中。
using FluentValidation; // ... 其他服務配置 builder.Services.AddTransient<IValidator<User>, UserValidator>();
4. 在 Blazor 組件中使用
在你的 Razor 組件（.razor 文件）中，使用 <FluentValidationValidator> 組件來啟用 FluentValidation。
@page "/user-form" @using BlazorApp.Data <!-- 根據(jù)實際使用的庫引入命名空間 --> @using Blazored.FluentValidation @using FluentValidation <EditForm Model="@user" OnValidSubmit="HandleValidSubmit"> <!-- 使用 FluentValidation 驗證器 --> <FluentValidationValidator /> <div class="form-group"> <label for="name">姓名：</label> <InputText id="name" @bind-Value="user.Name" class="form-control" /> <!-- 顯示該字段的驗證消息 --> <ValidationMessage For="@(() => user.Name)" /> </div> <div class="form-group"> <label for="email">郵箱：</label> <InputText id="email" @bind-Value="user.Email" class="form-control" /> <ValidationMessage For="@(() => user.Email)" /> </div> <button type="submit" class="btn btn-primary">提交</button> <!-- 顯示驗證摘要 --> <ValidationSummary /> </EditForm> @code { private User user = new User(); private void HandleValidSubmit() { // 當表單通過所有驗證時，會執(zhí)行此方法 Console.WriteLine($"提交用戶：{user.Name}, {user.Email}"); // 這里可以添加提交數(shù)據(jù)到服務器的邏輯 } }
以上就是《ASP.NET Core Blazor 核心功能二：Blazor表單和驗證》的全部內容，希望你有所收獲。關注、點贊，持續(xù)分享。
浙公網(wǎng)安備 33010602011771號