Blazor 表单验证 DataAnnotations 使用方法

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

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
或自定义异步验证的活儿。

相关推荐