Blazor入手教程(七)表单
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"); } }