Blazor 怎么实现表单验证-C#.Net教程-PHP中文网

Blazor 怎么实现表单验证

畫卷琴夢

发布： 2025-12-21 06:09:18

原创

442人浏览过

Blazor 表单验证依托 EditForm 组件、数据注解、ValidationSummary 和 ValidationMessage 实现；通过绑定模型、添加 [Required] 等特性自动校验，并支持 IValidatableObject 或 FluentValidation 进行跨字段自定义验证。

blazor 怎么实现表单验证

Blazor 实现表单验证主要靠内置的 EditForm 组件 + 数据注解（Data Annotations）+ ValidationSummary 和 ValidationMessage，配合模型绑定自动触发校验逻辑。核心是让 Blazor 知道“什么时候校验”和“怎么显示错误”。

用 EditForm 包裹表单并绑定模型

EditForm 是 Blazor 表单验证的入口组件，它会自动监听内部输入控件的变化，并在提交或手动触发时执行验证。

给 EditForm 的 Model 参数传入一个 C# 类实例（比如 Person）
用 @bind-Value 绑定到 InputText、InputNumber 等内置输入组件，它们会自动注册验证状态
提交按钮用触发 OnValidSubmit 或 OnInvalidSubmit

在模型类上加数据注解（Data Annotations）

这是最常用、最轻量的验证方式。在模型属性上添加如 [Required]、[EmailAddress]、[StringLength(10)] 等特性：

public class Person
{
    [Required(ErrorMessage = "姓名不能为空")]
    public string Name { get; set; }
<pre class="brush:php;toolbar:false;">[EmailAddress(ErrorMessage = "邮箱格式不正确")]
public string Email { get; set; }

[Range(1, 120, ErrorMessage = "年龄必须在 1 到 120 之间")]
public int Age { get; set; }

登录后复制

}

Blazor 会自动读取这些特性并生成验证规则，无需额外代码。

Validate实现表单验证

查看详情

显示验证结果：ValidationSummary 和 ValidationMessage

ValidationSummary 用于汇总所有错误，常放在表单顶部；ValidationMessage 针对单个字段，放在对应输入框下方：

<validationsummary></validationsummary> 显示全部错误信息（默认只显示 OnSubmit 后的错误）
<validationmessage for="@(() => model.Email)"></validationmessage> 显示 Email 字段的实时错误提示
注意：For 必须是表达式，不能写成字符串或变量名

自定义验证逻辑（IValidatableObject 或 FluentValidation）

当需要跨字段验证（比如“密码”和“确认密码”是否一致）或复杂业务规则时：

实现 IValidatableObject 接口，在 Validate 方法里写逻辑，返回 ValidationResult
或者集成 FluentValidation：安装 NuGet 包 FluentValidation.Blazor，注册验证器，再通过 EditContext 手动附加
示例场景：两个日期字段，要求“结束时间 ≥ 开始时间”，这种没法用单字段注解搞定，适合用 IValidatableObject

基本上就这些。不需要手写 JS，也不用管理脏检查，Blazor 的验证是响应式的、可组合的，而且和 .NET 生态无缝衔接。

以上就是Blazor 怎么实现表单验证的详细内容，更多请关注php中文网其它相关文章！