大家好，我是码农刚子。本文介绍了Blazor中EditForm组件的使用及表单验证方案。主要内容包括：
1）EditForm基础用法，通过Model参数绑定模型，使用DataAnnotationsValidator实现数据注解验证；
2）自定义验证规则实现，通过继承ComponentBase创建CustomValidator组件，结合ValidationMessageStore管理验证消息；
3）集成第三方验证库FluentValidation，展示如何定义复杂业务规则验证。文章提供了完整代码示例，涵盖内置验证、自定义验证和第三方验证三种方案，帮助开发者灵活处理Blazor表单验证需求。
一、EditForm 组件使用
Blazor 的 EditForm 是一个强大的组件，用于处理表单输入和验证。它通过绑定模型和验证逻辑，简化了表单的开发过程。以下是 EditForm 的核心功能和使用示例。
Blazor 表单内置组件
基本功能
EditForm 组件通过 Model 参数绑定到一个模型实例，并使用 DataAnnotationsValidator 组件支持基于数据注释的验证。它提供了以下事件回调：
- OnValidSubmit：当表单验证通过时触发。
- OnInvalidSubmit：当表单验证失败时触发。
- OnSubmit：无论验证状态如何，都会触发。
以下是一个简单的表单示例：
@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"> 现居城市： <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 组件可以针对特定字段显示错误信息。数据注释如 [Required] 和 [StringLength] 用于定义验证规则。
EditForm 提供了一系列数据验证的属性/方法，这样我们不用自己再去实现了。
|
属性/方法名 |
说明 |
|
Modal |
表单实体模型，必填 |
|
OnValidSubmit/OnInvalidSubmit |
提交表单时，验证通过/未通过 的回调函数 |
|
OnSubmit |
提交表单时的回调函数，和上面的两个属于“或”的关系， 使用了OnValidSubmit/OnInvalidSubmit就不能再使用OnSubmit。同理，使用了OnSubmit就不能使用OnValidSubmit/OnInvalidSubmit。 OnSubmit可以用来做一些自定义的验证 |
|
DataAnnotationsValidator
|
启用数据注解验证，就是特性验证。 |
|
ValidationSummary |
验证结果摘要。验证不合法时，会在表单的顶部用html标签显示具体错误。也是继承自ComponentBase的一种组件 |
二、自定义验证规则
自定义 ValidationMessageStore
如果需要更复杂的校验逻辑，可以使用 ValidationMessageStore 手动管理验证消息。
我们来自定义一个验证组件：
关于验证的组件思路，我们首先肯定是要从ComponentBase组件来集成，然后我们上面有学习到<EditForm>会定义一个级联值，我们自定义的组件也是嵌入到EditForm中，因此我们需要定义级联参数从而引用该值，我们先放代码：
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(); } } }
我们需要注意到，在这个组件里我们同时监听了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"> 现居城市： <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 这样的第三方库来处理表单验证，可以让你摆脱内置数据注解的限制，更灵活地定义复杂的业务验证规则。社区提供了诸如 Blazored.FluentValidation 这样的库来简化集成工作。
1. 安装 NuGet 包
根据你选择的 FluentValidation Blazor 集成库，在项目目录下执行安装命令，或者手动打开管理NuGet程序包，搜索安装。例如，使用 Blazored.FluentValidation包：
dotnet add package FluentValidation dotnet add package Blazored.FluentValidation
2. 创建模型与验证器
创建一个数据模型（例如 User 类）和对应的验证器类。
// 模型类 public class User { public string Name { get; set; } public string Email { get; set; } } // 验证器类 using FluentValidation; public class UserValidator : AbstractValidator<User> { public UserValidator() { // 定义验证规则 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 <!-- 根据实际使用的库引入命名空间 --> @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() { // 当表单通过所有验证时，会执行此方法 Console.WriteLine($"提交用户：{user.Name}, {user.Email}"); // 这里可以添加提交数据到服务器的逻辑 } }
以上就是《ASP.NET Core Blazor 核心功能二：Blazor表单和验证》的全部内容，希望你有所收获。关注、点赞，持续分享。
![洛谷 P11345 [KTSC 2023 R2] 基地简化 题解](http://www.itfaba.com/wp-content/themes/kemi/timthumb.php?src=http://www.itfaba.com/wp-content/themes/kemi/img/random/3.jpg&w=218&h=124&zc=1)
