Blazor 怎么实现表单验证

来源:这里教程网 时间:2026-02-21 17:34:37 作者:

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; }
<pre class="brush:php;toolbar:false;">[EmailAddress(ErrorMessage = "邮箱格式不正确")]
public string Email { get; set; }
[Range(1, 120, ErrorMessage = "年龄必须在 1 到 120 之间")]
public int Age { get; set; }

}

Blazor 会自动读取这些特性并生成验证规则,无需额外代码。

显示验证结果:ValidationSummary 和 ValidationMessage

ValidationSummary
用于汇总所有错误,常放在表单顶部;
ValidationMessage
针对单个字段,放在对应输入框下方:

<validationsummary></validationsummary>
显示全部错误信息(默认只显示 OnSubmit 后的错误)
<validationmessage for="@(() => model.Email)"></validationmessage>
显示 Email 字段的实时错误提示
注意:
For
必须是表达式,不能写成字符串或变量名

自定义验证逻辑(IValidatableObject 或 FluentValidation)

当需要跨字段验证(比如“密码”和“确认密码”是否一致)或复杂业务规则时:

实现
IValidatableObject
接口,在
Validate
方法里写逻辑,返回
ValidationResult
或者集成
FluentValidation
:安装 NuGet 包
FluentValidation.Blazor
,注册验证器,再通过
EditContext
手动附加
示例场景:两个日期字段,要求“结束时间 ≥ 开始时间”,这种没法用单字段注解搞定,适合用
IValidatableObject

基本上就这些。不需要手写 JS,也不用管理脏检查,Blazor 的验证是响应式的、可组合的,而且和 .NET 生态无缝衔接。

相关推荐