Blazor 表单验证依托 EditForm 组件、数据注解、ValidationSummary 和 ValidationMessage 实现;通过绑定模型、添加 [Required] 等特性自动校验,并支持 IValidatableObject 或 FluentValidation 进行跨字段自定义验证。

Blazor 实现表单验证主要靠内置的 EditForm 组件 + 数据注解(Data Annotations)+ ValidationSummary 和 ValidationMessage,配合模型绑定自动触发校验逻辑。核心是让 Blazor 知道“什么时候校验”和“怎么显示错误”。
用 EditForm 包裹表单并绑定模型
EditForm 是 Blazor 表单验证的入口组件,它会自动监听内部输入控件的变化,并在提交或手动触发时执行验证。
- 给
EditForm的Model参数传入一个 C# 类实例(比如Person) - 用
@bind-Value绑定到InputText、InputNumber等内置输入组件,它们会自动注册验证状态 - 提交按钮用
触发OnValidSubmit或OnInvalidSubmit
在模型类上加数据注解(Data Annotations)
这是最常用、最轻量的验证方式。在模型属性上添加如 [Required]、[EmailAddress]、[StringLength(10)] 等特性:
public class Person
{
[Required(ErrorMessage = "姓名不能为空")]
public string Name { get; set; }
[EmailAddress(ErrorMessage = "邮箱格式不正确")]
public string Email { get; set; }
[Range(1, 120, ErrorMessage = "年龄必须在 1 到 120 之间")]
public int Age { get; set; }}
Blazor 会自动读取这些特性并生成验证规则,无需额外代码。
显示验证结果:ValidationSummary 和 ValidationMessage
ValidationSummary 用于汇总所有错误,常放在表单顶部;ValidationMessage 针对单个字段,放在对应输入框下方:
-
显示全部错误信息(默认只显示 OnSubmit 后的错误) -
显示 Email 字段的实时错误提示 - 注意:
For必须是表达式,不能写成字符串或变量名
自定义验证逻辑(IValidatableObject 或 FluentValidation)
当需要跨字段验证(比如“密码”和“确认密码”是否一致)或复杂业务规则时:
- 实现
IValidatableObject接口,在Validate方法里写逻辑,返回ValidationResult - 或者集成
FluentValidation:安装 NuGet 包FluentValidation.Blazor,注册验证器,再通过EditContext手动附加 - 示例场景:两个日期字段,要求“结束时间 ≥ 开始时间”,这种没法用单字段注解搞定,适合用
IValidatableObject
基本上就这些。不需要手写 JS,也不用管理脏检查,Blazor 的验证是响应式的、可组合的,而且和 .NET 生态无缝衔接。










