Blazor 怎么实现表单验证

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

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 会自动读取这些特性并生成验证规则，无需额外代码。

标签： js ai 邮箱 c# .net red