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绑定输入框,比如
<inputtext></inputtext>每个输入控件需搭配
ValidationMessage显示对应字段错误,例如:
<validationmessage for="@(() => user.Email)"></validationmessage>整个表单顶部或底部加
<validationsummary></validationsummary>汇总所有错误 提交时通过
OnValidSubmit处理合法数据,
OnInvalidSubmit可选处理验证失败逻辑
不需要手动调用验证方法 ——
EditForm在每次输入、失焦、提交时自动触发验证。
自定义验证逻辑(非 DataAnnotations 场景)
当需要跨字段校验(如“密码”和“确认密码”一致)或业务规则(如“注册邮箱不能是公司内部域名”),可手动添加验证器:
创建继承ValidationAttribute的自定义特性(如
[CompareTo("Password")])
或在页面中注入 EditContext,用
AddValidator注册一个
FieldCssClassProvider或
ValidationMessageStore手动添加错误 更灵活的方式:在
OnValidSubmit中做最终检查,若失败则调用
editContext.NotifyValidationStateChanged()刷新 UI
例如:确认密码不一致时,用
validationMessageStore.Add("ConfirmPassword", "两次输入的密码不一致");,再触发状态更新。
样式与用户体验优化
默认验证只显示文字,但你可以轻松增强交互体验:
给输入框加 CSS 类:通过FieldCssClassProvider或监听
EditContext.OnValidationStateChanged动态设置
is-invalid类 禁用提交按钮直到表单有效:
<button type="submit" disabled>注册</button>失焦时立即验证(默认是提交时才全量验证):给
InputText等组件加
@onblur="() => editContext.Validate()"中文错误提示建议统一放在模型属性上(用
ErrorMessage),避免分散在 UI 层
基本上就这些 —— 不复杂但容易忽略细节,比如忘记
set访问器、没加
For表达式、或混淆了客户端验证和服务器端验证边界(DataAnnotations 在 Blazor Server/WASM 都生效,但敏感逻辑仍需后端二次校验)。
