Blazor怎么实现表单验证 Blazor EditForm与DataAnnotations教程_技术教程

Blazor 表单验证核心是 EditForm 配合 DataAnnotations 特性（如 [Required]、[EmailAddress]），结合 ValidationSummary 和 ValidationMessage 实现开箱即用的实时验证；需模型属性含 public set，EditForm 自动触发验证，支持自定义逻辑与样式优化。

Blazor 中实现表单验证，核心是 EditForm 组件配合 DataAnnotations 特性（如 [Required]、[EmailAddress]），再结合 ValidationSummary 和 ValidationMessage 实时反馈。不需要手动写 JS，也不依赖第三方库，原生支持开箱即用。

定义带验证规则的模型类

先在 C# 模型上标注数据注解，这是验证逻辑的源头：

[Required(ErrorMessage = "用户名不能为空")] —— 必填校验
[EmailAddress(ErrorMessage = "邮箱格式不正确")] —— 格式校验
[StringLength(20, MinimumLength = 2, ErrorMessage = "昵称长度为2-20个字符")] —— 长度限制
[Range(1, 120, ErrorMessage = "年龄必须在1到120之间")] —— 数值范围

注意：属性必须是 public set，否则 Blazor 无法绑定和验证；推荐使用自动属性或完整属性（含 set）。

在组件中使用 EditForm 绑定模型

EditForm 是 Blazor 表单的根容器，它会自动监听字段变化、触发验证、管理 EditContext：

用 @bind-Value 绑定输入框，比如
每个输入控件需搭配 ValidationMessage 显示对应字段错误，例如：
整个表单顶部或底部加汇总所有错误
提交时通过 OnValidSubmit 处理合法数据，OnInvalidSubmit 可选处理验证失败逻辑

不需要手动调用验证方法 —— EditForm 在每次输入、失焦、提交时自动触发验证。

自定义验证逻辑（非 DataAnnotations 场景）

当需要跨字段校验（如“密码”和“确认密码”一致）或业务规则（如“注册邮箱不能是公司内部域名”），可手动添加验证器：

创建继承 ValidationAttribute 的自定义特性（如 [CompareTo("Password")]）
或在页面中注入 EditContext，用 AddValidator 注册一个 FieldCssClassProvider 或
ValidationMessageStore 手动添加错误
更灵活的方式：在 OnValidSubmit 中做最终检查，若失败则调用 editContext.NotifyValidationStateChanged() 刷新 UI

例如：确认密码不一致时，用 validationMessageStore.Add("ConfirmPassword", "两次输入的密码不一致");，再触发状态更新。

样式与用户体验优化

默认验证只显示文字，但你可以轻松增强交互体验：

给输入框加 CSS 类：通过 FieldCssClassProvider 或监听 EditContext.OnValidationStateChanged 动态设置 is-invalid 类
禁用提交按钮直到表单有效：
失焦时立即验证（默认是提交时才全量验证）：给 InputText 等组件加 @onblur="() => editContext.Validate()"
中文错误提示建议统一放在模型属性上（用 ErrorMessage），避免分散在 UI 层