跳到主要内容

6.2.2 Blazor 表单与校验

表单是业务系统中最常见的交互。Blazor 提供 EditForm、输入组件和数据注解校验，帮助你用 C# 描述输入规则和提交行为。

学习目标​

  • 能使用 EditForm 绑定模型并提交。
  • 能使用数据注解声明基本校验规则。
  • 能展示字段级错误和提交失败提示。
  • 能处理提交中、成功和失败状态。

应用场景​

  • 创建任务、编辑资料、登录注册、后台配置页。
  • 表单字段较多，需要统一校验提示。
  • 与 ASP.NET Core API 共享部分 DTO 或校验规则。

示例模型​

public sealed class CreateTodoFormModel
{
    [Required(ErrorMessage = "标题不能为空")]
    [StringLength(120, ErrorMessage = "标题不能超过 120 个字符")]
    public string Title { get; set; } = string.Empty;

    [StringLength(500, ErrorMessage = "备注不能超过 500 个字符")]
    public string? Description { get; set; }
}

表单组件​

<EditForm Model="model" OnValidSubmit="SubmitAsync">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <label>
        标题
        <InputText @bind-Value="model.Title" />
        <ValidationMessage For="() => model.Title" />
    </label>

    <label>
        备注
        <InputTextArea @bind-Value="model.Description" />
        <ValidationMessage For="() => model.Description" />
    </label>

    <button type="submit" disabled="@isSubmitting">
        @(isSubmitting ? "提交中..." : "创建任务")
    </button>
</EditForm>

@if (!string.IsNullOrWhiteSpace(errorMessage))
{
    <p role="alert">@errorMessage</p>
}

@code {
    private readonly CreateTodoFormModel model = new();
    private bool isSubmitting;
    private string? errorMessage;

    private async Task SubmitAsync()
    {
        isSubmitting = true;
        errorMessage = null;

        try
        {
            await TodoApi.CreateAsync(model);
        }
        catch (Exception)
        {
            errorMessage = "创建任务失败，请稍后再试";
        }
        finally
        {
            isSubmitting = false;
        }
    }
}

重点难点​

  • 前端校验提升体验，但后端仍必须重复校验。
  • 提交中要禁用按钮，避免重复创建。
  • 表单模型可以和 API DTO 分开，避免 UI 状态污染接口契约。
  • 对服务器返回的字段级错误，需要映射到 Blazor 的校验消息。

常见误区​

误区推荐做法
只做前端校验前后端都校验，后端是最终边界
提交失败只在控制台打印页面展示用户可理解的错误
表单和实体共用一个类使用专门 Form Model 或 DTO

练习​

  • 给截止日期添加校验：不能早于今天。
  • 增加提交成功后的清空表单逻辑。
  • 把后端字段错误显示到对应输入框下方。