Blazor入手教程（七）表单
Blazor为表单元素定义了一些内置组件
除此之外还有EditForm组件搭配起来十分好用
EditForm 提供了一系列数据验证的属性/方法，这样我们不用自己再去实现了。
|
属性/方法名 |
说明 |
|
Modal |
表单实体模型，必填 |
|
OnValidSubmit/OnInvalidSubmit |
提交表单时，验证通过/未通过 的回调函数 |
|
OnSubmit |
提交表单时的回调函数，和上面的两个属于“或”的关系， 使用了OnValidSubmit/OnInvalidSubmit就不能再使用OnSubmit。同理，使用了OnSubmit就不能使用OnValidSubmit/OnInvalidSubmit。 OnSubmit可以用来做一些自定义的验证 |
|
DataAnnotationsValidator |
启用数据注解验证，就是特性验证。 |
|
ValidationSummary |
验证结果摘要。验证不合法时，会在表单的顶部用html标签显示具体错误。也是继承自ComponentBase的一种组件 |
模型验证数据注解
验证结果摘要ValidationSummary
Blazor提供的验证能应对绝大多数场景，如果有特殊的场景，你也可以自定义实现一些验证。
相关代码：
@page "/FormSample" @using System.ComponentModel.DataAnnotations; <h3>表单</h3> <p>@stu.ToString()</p> <EditForm Model="@stu" OnValidSubmit="onValidSubmit" OnInvalidSubmit="onInvalidSubmit"> <DataAnnotationsValidator></DataAnnotationsValidator> <ValidationSummary></ValidationSummary> <div class="form-inline"> 姓名：<InputText @bind-Value="stu.name"></InputText> </div> <div class="form-inline"> 年龄： </div> <div class="form-inline"> 生日：<InputDate @bind-Value="stu.birthday"></InputDate> </div> <div class="form-inline"> 是否婚配： <InputCheckbox @bind-Value="stu.ismarried"></InputCheckbox> </div> <div class="form-inline"> 现居城市： <InputSelect @bind-Value="stu.city"> <option value="北京">北京</option> <option value="上海">上海</option> <option value="广州">广州</option> <option value="深圳">深圳</option> </InputSelect> </div> <button type="submit">OK</button> </EditForm> @code { public class student { [Required] [MaxLength(length:10, ErrorMessage ="名字最大长度不能超过10位")] public string name { get; set; } = "小爵"; //姓名 [Range(18,45,ErrorMessage ="年龄必须在18-45岁之间")] public int age { get; set; } = 28; //年龄 public DateTime birthday { get; set; } = System.DateTime.Now;//生日 public string city { get; set; } = "北京"; //所在城市 public bool ismarried { get; set; } = false; //是否婚配 public override string ToString() { return $"姓名：{name}，年龄：{age},生日：{birthday},城市：{city}，是否婚配：{ismarried}"; } } public student stu = new student() { }; private EditContext editContext; protected override void OnInitialized() { editContext = new EditContext(stu); } public void onSubmit( ) { Console.WriteLine("on onSubmit"); } public void onValidSubmit( ) { Console.WriteLine("on onValidSubmit"); } public void onInvalidSubmit( ) { Console.WriteLine(" onInvalidSubmit"); } }