Blazor 表单验证 DataAnnotations 使用方法

10次阅读

Blazor 表单验证使用 DataAnnotations 特性(如 [Required]、[EmailAddress])声明规则,配合 EditForm、DataAnnotationsValidator 及 ValidationMessage 组件实现自动校验;需注入 EditContext 调用 Validate() 手动触发,并支持自定义验证特性。

Blazor 表单验证 DataAnnotations 使用方法

Blazor 表单验证用 DataAnnotations 很直接,核心是给模型属性加特性(如 [Required][EmailAddress]),再配合 EditFormValidationSummary/ValidationMessage 组件自动触发校验。

模型上标注验证规则

在 C# 模型类中,用 System.ComponentModel.DataAnnotations 命名空间下的特性声明约束:

  • [Required]:字段必填(空字符串或 null 都不通过)
  • [StringLength(50, MinimumLength = 2)]:限制长度范围
  • [EmailAddress]:基础 邮箱 格式检查(正则匹配,不发邮件验证)
  • [Range(18, 120)]:数值范围(支持 int、double 等)
  • [RegularExpression(@"^d{3}-d{2}-d{4}$")]:自定义正则(如社保号格式)

注意:这些特性只影响客户端显示逻辑和基础服务端验证,不替代 后端 业务校验。

在 EditForm 中启用验证

把模型绑定到 EditForm,它会自动监听输入变化并触发 DataAnnotationsValidator

           
      

DataAnnotationsValidator 是关键组件,没有它,特性不会生效;ValidationMessageFor 参数必须是表达式(@(() => ……)),不能写字符串或变量。

手动触发表单验证

默认只在提交或失去焦点时校验。如需主动校验(比如点击“下一步”但不提交),可注入 EditContext

  • 在组件中定义 private EditContext? editContext;
  • EditForm 上添加 @ref="editContext"
  • 调用 editContext?.Validate() 即可立即运行所有规则

校验结果会更新 UI,ValidationSummary 和各 ValidationMessage 也会同步刷新。

自定义验证特性(可选进阶)

内置特性不够用时,可继承 ValidationAttribute 写自己的规则:

public class FutureDateAttribute : ValidationAttribute {protected override ValidationResult? IsValid(object? value, ValidationContext validationContext)     {if (value is DateTime date && date < DateTime.Today)             return new ValidationResult("日期不能早于今天");         return ValidationResult.Success;     } }

然后像其他特性一样加到属性上:[FutureDate]。服务端同样生效,Blazor WebAssembly 也支持(因代码 AOT 编译后仍可执行)。

基本上就这些。DataAnnotations 验证轻量、声明式、前后端复用,适合大多数场景。注意别依赖它做复杂业务判断(比如“用户名是否已存在”得靠后端 API),那是 ValidationMessageStore 或自定义异步验证的活儿。

text=ZqhQzanResources