Blazor 表单验证用
DataAnnotations很直接,核心是给模型属性加特性(如
[Required]、
[EmailAddress]),再配合
EditForm和
ValidationSummary/
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:
<EditForm Model="@user" OnValidSubmit="HandleValidSubmit">
<DataAnnotationsValidator />
<ValidationSummary />
<pre class="brush:php;toolbar:false;"><InputText @bind-Value="user.Name" />
<ValidationMessage For="@(() => user.Name)" />
<InputEmail @bind-Value="user.Email" />
<ValidationMessage For="@(() => user.Email)" />
<button type="submit">提交</button>
DataAnnotationsValidator是关键组件,没有它,特性不会生效;
ValidationMessage的
For参数必须是表达式(
@(() => ...)),不能写字符串或变量。
手动触发表单验证
默认只在提交或失去焦点时校验。如需主动校验(比如点击“下一步”但不提交),可注入
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或自定义异步验证的活儿。
