目录

前言EditForm 表单组件注意事项 关于 css 样式手动验证总结

前言

表单验证是任何系统都会存在的功能。如果你是使用 Blazor 中内置的验证组件，你需要提前掌握 System.ComponentModel.DataAnnotations 验证注解特性的用法，即：

public class LoginViewModel { [Required(ErrorMessage = "不能为空")] public string UserName { get; set; } [Required(ErrorMessage ="不能为空")] [StringLength(30, ErrorMessage = "不能超过 {1} 个字符")] public string Password { get; set; } }

如果不会的小朋友，请移步百度自己查询。

EditForm 表单组件

在 MVC 时代，我们使用 Html.BeginForm() 来定义表单区域。在 Blazor 中我们使用 EditForm 组件来定义表单区域。

所有的表单组件，一般由 InputXXX 开头的组件，要求放在组件 EditForm 中。

在Blazor —— 数据绑定已经讲过这个知识。

然后使用 EditForm 的 Model 属性，表示要验证的模型。下面是一套完整的示例代码如下：

@page "/form" @using System.ComponentModel.DataAnnotations <EditForm Model="model" OnValidSubmit="Login"> <DataAnnotationsValidator/> <div class="alert alert-danger"> <ValidationSummary /> </div> <div class="form-group"> <label>用户名</label> <InputText @bind-Value="model.UserName" /> <ValidationMessage For="()=>model.UserName"/> </div> <div class="form-group"> <label>密码</label> <InputText type="password" @bind-Value="model.Password" /> <ValidationMessage For="()=>model.Password" /> </div> <div class="form-group"> <button class="btn btn-primary" type="submit">登录</button> </div> @if (success) { <div class="alert alert-success">表单验证成功！</div> } </EditForm> @code{ LoginViewModel model = new LoginViewModel(); public class LoginViewModel { [Display(Name ="用户名")] [Required(ErrorMessage = "{0}不能为空")] public string UserName { get; set; } [Display(Name = "密码")] [Required(ErrorMessage = "{0}不能为空")] [StringLength(30, ErrorMessage = "不能超过 {1} 个字符")] public string Password { get; set; } } bool success; async Task Login() { success = true; } }

注意事项

LoginViewModel 必须要先实例化（即 new ），否贼会报空引用异常。EditForm 必须绑定要么 EditContext 要么 Model，二选一。在 EditForm 中要提交的按钮，一定必须是 type="submit" 类型。触发表单提交的事件是 EditForm 的 OnValidSubmit 而不是按钮的 @onclick 事件。要使验证有效，必须在 EditForm 里添加 DataAnnotationsValidator 组件。使用 ValidationMessage 并且要求使用 For 属性（必须使用 Lambda 表达式）绑定要输出错误的字段。如果要输出全局错误，则使用 ValidationSummary 组件。

关于 css 样式

如果你是通过 Visual Studio 的模板创建的项目，打开你的 wwwroot/css/site.css 文件，找到下面这段样式：

.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; } .invalid { outline: 1px solid red; } .validation-message { color: red; }

这三个样式的名字是组件默认加上的，也只能叫这个名字…很无语，也没暴露出属性给自定义，这点表示蛋疼…

如果你没有的话，就复制到你的 css 样式表里把。

手动验证

有时候的需求，可能要求通过其他的方式来触发验证，而不是通过提交按钮。这个时候我们就不能单纯滴使用 EditForm 的 Model 属性，而需要使用 EditContext 属性。

在使用前，我们需要自己初始化一个 EditContext 类型的变量，然后给 EditForm 的 EditContext 属性赋值：

EditContext context; protected override void OnInitialized() { context = new EditContext(model); } <EditForm EditContext = "@context"> ... </EditForm>

然后手动调用 context.Validate() 方法，返回一个布尔值，true 表示验证通过。

if (context.Validate()) { //验证通过 }

总结

这篇文章通过一段完整的代码，把表单验证进行了说明，而且还将手动验证的方式也进行了介绍。其实只要自己多尝试一下就很容易掌握的，前端其实很有意思。