Blazor 数据验证(6)

Blazor 提供一组输入组件。 输入组件会将绑定字段数据处理到模型，并在提交窗体时验证用户输入。
下表显示了可用的输入组件:

EditForm

EditForm 组件通过 EditContext 包装这些输入组件并协调验证过程。 创建 EditForm 时，可以使用 Model 参数指
定要绑定到的模型实例。 验证通常是使用数据批注完成的，并且可以进行扩展。 若要启用基于数据批注的验证，请
将 DataAnnotationsValidator 组件添加为 EditForm 的子组件。 EditForm 组件提供了一个用于处理有效（
OnValidSubmit ）和无效（ OnInvalidSubmit ）提交的方便事件。 还有一个更通用的 OnSubmit 事件，可让你自行触发
和处理验证。若要显示验证错误摘要，请使用 ValidationSummary 组件。

示例

下面示例演示一个EditForm验证Model参数 (为了便于测试,这里将实体模型写在了@code { } 当中)。

• 在@code{} 当中,创建一个 Student类型,提供Code与Name属性
• 在页面中定义EditForm, 绑定Model 与验证提交的方法HandleValidSubmit
• EditForm中定义两个InputText用于接受输入内容
• button按钮用于提交整个模型的数据

@page "/"
@using Microsoft.AspNetCore.Components.Forms 

    <EditForm Model="@student" OnValidSubmit="HandleValidSubmit">
        <DataAnnotationsValidator />
        <ValidationSummary />
        <InputText  @bind-Value="@student.Code" />
        <InputText  @bind-Value="@student.Name" />
        <button type="submit">submit</button>
    </EditForm>

@code {
    @using System.ComponentModel.DataAnnotations;

    private Student student = new Student();
    private void HandleValidSubmit()
    {
        // Save the data
    }

    public class Student
    {
        [Required(AllowEmptyStrings = false, ErrorMessage = "必填项!")]
        public string Name { get; set; }

        [StringLength(2, ErrorMessage = "超出规定长度！")]
        public string Code { get; set; }
    }
}

• 错误输入的效果:
  

Blazor 数据验证(6)

原文：https://www.cnblogs.com/zh7791/p/12750715.html