ASP.NET Core Blazor EditForm内置表单验证显示ValidationMessage
2023-02-21
1718 0Blazor 框架支持表单并提供内置的输入组件:
绑定到使用数据注释的模型的 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 框架提供了用于接收和验证用户输入的内置输入组件:
Input component | Rendered 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固定带宽 续费与新购同价
领取 通义灵码 免费使用资格 兼容 Visual Studio Code、Visual Studio、JetBrains IDEs 等主流编程工具, 为你提供高效、流畅、舒心的智能编码体验!