返回

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

2023-02-21 ASP.NET Core Blazor EditForm EditForm内置表单验证 ValidationMessage 1142 0

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; }
    }
}

运行效果:

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

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

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

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

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

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

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

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

Input componentRendered as
InputCheckbox
<input type="checkbox">
InputDate<TValue><input type="date">
InputFile<input type="file">
InputNumber<TValue><input type="number">
InputRadio<TValue><input type="radio">
InputRadioGroup<TValue>Group of child InputRadio<TValue>
InputSelect<TValue><select>
InputText<input>
InputTextArea<textarea>

您可能感兴趣:

阿里云 云服务器 99元1年 2核2G 3M固定带宽 续费与新购同价

DOVE 网络加速器免费试用

顶部