Blazor EditForm 组件使用教程

EditForm 是 Blazor 表单核心组件，需绑定模型并用 Data Annotations 实现验证；提供 OnValidSubmit 和 OnInvalidSubmit 事件分别处理通过与失败场景；支持自定义验证器及避免常见陷阱如手动赋值未通知上下文。

Blazor 的 EditForm 是处理表单提交与验证的核心组件，它把模型绑定、验证触发、提交逻辑封装得简洁又可控。用好它，关键不是堆代码，而是理清“模型—验证—事件”三者的协作关系。

绑定模型并启用基础验证

EditForm 必须通过 Model 参数绑定一个 C# 实体对象，Blazor 才能自动追踪字段变化、触发验证、映射输入控件值。推荐使用 [Required]、[StringLength] 等数据注解（Data Annotations），这是最轻量且内置支持的验证方式。

示例：

public class UserInput<br>{<br>    [Required(ErrorMessage = "用户名不能为空")]<br>    public string? Name { get; set; }<br><br>    [EmailAddress(ErrorMessage = "邮箱格式不正确")]<br>    public string? Email { get; set; }<br>}

在 Razor 组件中绑定：

<EditForm Model="@userInput" OnValidSubmit="@HandleValidSubmit"><br>    <InputText @bind-Value="userInput.Name" /><br>    <ValidationMessage For="@(() => userInput.Name)" /><br>    <InputEmail @bind-Value="userInput.Email" /><br>    <ValidationMessage For="@(() => userInput.Email)" /><br>    <button type="submit">提交</button><br></EditForm>

区分有效/无效提交的两种回调

EditForm 提供两个独立事件： • OnValidSubmit：仅当模型通过所有验证时触发，适合执行保存、跳转等主业务逻辑 • OnInvalidSubmit：验证失败时触发，可用于埋点、聚焦首个错误字段或自定义提示

两者互斥，不会同时执行。不需要手动调用 Validate() —— 提交瞬间 Blazor 自动校验整个模型。

标签： ai 邮箱 c# 表单提交 .net red