ASP.NET Core Blazor 核心功能二：Blazor表单和验证

news/2025/11/4 11:23:51/文章来源:https://www.cnblogs.com/shenchuanchao/p/19189573

大家好，我是码农刚子。本文介绍了Blazor中EditForm组件的使用及表单验证方案。主要内容包括：

1）EditForm基础用法，通过Model参数绑定模型，使用DataAnnotationsValidator实现数据注解验证；

2）自定义验证规则实现，通过继承ComponentBase创建CustomValidator组件，结合ValidationMessageStore管理验证消息；

3）集成第三方验证库FluentValidation，展示如何定义复杂业务规则验证。文章提供了完整代码示例，涵盖内置验证、自定义验证和第三方验证三种方案，帮助开发者灵活处理Blazor表单验证需求。

一、`EditForm` 组件使用

Blazor 的 EditForm 是一个强大的组件，用于处理表单输入和验证。它通过绑定模型和验证逻辑，简化了表单的开发过程。以下是 EditForm 的核心功能和使用示例。

Blazor 表单内置组件

67b1af17adffb47f738b8efbc8f1fc12

基本功能

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}");// 这里可以添加提交数据到服务器的逻辑
    }
}