ASP.NET Core Blazor EditForm内置表单验证显示ValidationMessage

Blazor 框架支持表单并提供内置的输入组件：

绑定到使用数据注释的模型的 EditForm 组件

内置输入组件

我们可以把Model绑定到EditForm的Model属性，然后使用Model属性的数据注释验证表单。

启用数据注释验证需要 DataAnnotationsValidator 组件。

可以使用ValidationSummary组件用于汇总所有验证消息，可以根据需要使用它。

下面是一个简单的表单验证代码示例：

ArticleEdit.razor

@using BlazorBlog.Data
@page "/manage/articles/edit"

<PageTitle>Edit article</PageTitle>

<EditForm Model="@request" OnValidSubmit="@HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />
    <input type="hidden" id="Id" />
    <div class="row">
        <div class="mb-3">
            <label class="form-label" for="Title">Title</label>
            <InputText class="form-control" id="Title" @bind-Value="request.Title" />
            <ValidationMessage For="() => request.Title" />
        </div>
        <div class="col-lg-6 mb-3">
            <label class="form-label" for="Status">Status</label>
            <InputSelect class="form-select" id="Status" @bind-Value="request.Status">
                <option value="">Choose...</option>
                <option value="1">Pending</option>
                <option value="2" >Approved</option>
                <option value="3">Rejected</option>
            </InputSelect>
            <ValidationMessage For="() => request.Status" />
        </div>
        <div class="mb-3">
            <label class="form-label" for="ArticleContent">ArticleContent</label>
            <InputTextArea class="form-control" id="ArticleContent" @bind-Value="request.ArticleContent" />
            <ValidationMessage For="() => request.ArticleContent" />
        </div>
        <div class="text-end">
            <button type="submit" class="btn btn-primary btn-submit">
                Submit
            </button>
        </div>
    </div>
</EditForm>

@code {
    public ArticleRequest request = new ArticleRequest();
    protected void OnInitialized()
    {

    }
    protected void HandleValidSubmit()
    {
        // ...
    }
}

ArticleRequest.cs

using System.ComponentModel.DataAnnotations;

namespace BlazorBlog.Data
{
    public class ArticleRequest
    {
        public int? Id { get; set; }
        [Required]
        [MaxLength(10, ErrorMessage = "最长10个字符")]
        public string Title { get; set; } = null!;
        [Required(ErrorMessage = "请输入文章正文")]
        public string ArticleContent { get; set; } = null!;
        public string? Description { get; set; }
        [Required]
        public int? Status { get; set; }
    }
}

运行效果：

如图所示，我什么都没有填写，点击Submit按钮后，显示了自己配置的ErrorMessage，如果没有设置则显示默认的ErrorMessage。

EditForm 为处理表单提交提供了以下回调:

OnValidSubmit 可以在提交具有有效字段的窗体时分配要运行的事件处理程序。

OnInvalidSubmit 可以在提交具有无效字段的窗体时分配要运行的事件处理程序。

OnSubmit 可以分配要运行的事件处理程序，而不管表单字段的验证状态如何。

这里需要注意，如果我们需要使用内置的表单验证同时显示ValidationMessage的话， 我们需要使用OnValidSubmit处理提交事件。 如果使用OnSubmit的话，即使验证失败也不会显示ValidationMessage。

Blazor 框架提供了用于接收和验证用户输入的内置输入组件：