第四章 表单（3）- 表单验证

在Blazor中，表单的验证可以通过两种方式实现，一种是使用Blazor所提供表单验证特性，另一种是使用ValidationMessageStore进行验证。

表单验证的基础使用(内置特性)

一、内置特性表单验证的开启

Blazor中，使用表单组件<EditForm>时，如果希望开启表单的验证功能，需要在表单中使用<DataAnnotationsValidator/>和<ValidationSummary/>或<ValidationMessage>组件。

1、开启特性验证系统

在表单中使用<DataAnnotationsValidator>组件可以将数据特性验证附加到关联的EditContext，从而开启特性验证系统（根据表单模型属性的特性声明或IValidatableObject接口的Validate方法进行验证）。

Blazor执行验证有两个节点：

• 当用户从某个字段中失焦时，将执行字段验证。 在字段验证期间，DataAnnotationsValidator组件将报告的所有验证结果与该字段相关联。
• 当用户提交表单时，将执行模型验证， 在模型验证期间，DataAnnotationsValidator组件尝试根据验证结果报告的成员名称来确定字段，与单个成员无关的验证结果将与模型而不是字段相关联。

2、验证信息展示组件

特定验证信息的展示组件

如果要展示指定字段的验证失败信息，可以使用<ValidationMessage>组件，并通过For组件参数设置要进行信息展示的对应属性。

综合验证信息的展示组件

如果想要展示表单中所有的验证失败信息，可以直接使用<ValidationSummary>组件，如果有需要，也可以通过其Model组件参数来设置对特定的模型。

需要注意的是，这两个组件都依赖于 ValidationMessageStore 类来获取表单字段的验证错误消息，当ValidationMessageStore对象中存在验证失败消息时，就可以通过上面的两个组件进行展示。

样式

<ValidationMessage>和<ValidationSummary>组件支持任意属性，验证失败的信息将添加到生成的 <div> 或 <ul> 元素中。

验证信息的CSS样式则通过wwwroot/css/app.css 或 wwwroot/css/site.css进行设置，如：

.validation-message {color: red;
}

• 示例

  @page "/AnnotationsTest"
  @using System.ComponentModel.DataAnnotations<EditForm Model="Model" OnValidSubmit="Submit" FormName="Form1"><DataAnnotationsValidator /><ValidationSummary /><div class="mb-3 w-25"><InputText @bind-Value="Model!.Name" /><ValidationMessage For="() => Model!.Name" /></div><div class="mb-3 w-25"><InputNumber @bind-Value="Model!.Age" /><ValidationMessage For="() => Model!.Age" /></div><div class="mb-3"><button type="submit">提交</button></div>
  </EditForm>@code {[SupplyParameterFromForm]public Student? Model { get; set; }protected override void OnInitialized(){Model ??= new();}void Submit(){Console.WriteLine(Model!.Name);}public class Student{[Required(ErrorMessage = "名字必须填写")]public string Name { get; set; } = null!;[Range(23, 30, ErrorMessage = "岁数只能是23~30")]public int Age { get; set; } = 23;}
  }
  

二、内置验证特性

ASP.NET Core 框架中提供了一批验证特性，通过验证特性可以为模型属性指定验证规则，这样使用验证特性可对模型类提供数据注解，好处是在没有运行应用程序的情况下，就能一目了然看到模型中每个属性应该处理什么样的数据，从而对模型对进行验证。

ASP.NET Core 中内置的验证特性

[Display]：设置属性名称，一般用于验证信息，若没有使用[Display]特性，则使用的是属性名

• Name：设置的属性名

[Required]：验证属性不可为 null

[StringLength]：验证字符串属性值是否未超过指定长度限制

[MaxLength]：验证设定的最大长度

[MinLength]：验证设定的最小长度

[Range]：验证属性值是否在指定范围内

[Compare]：验证模型中的两个属性是否匹配

[CreditCard]：验证属性是否为信用卡格式

[EmailAddress]：验证属性是否为电子邮件格式

[Phone]：验证属性是否为电话号码格式

[Url]：验证属性是否为 URL 格式

[RegularExpression]：验证属性值是否与指定的正则表达式匹配

[FileExtensions]：验证文件扩展名

[CustomValidation]：用于自定义验证逻辑，可以进行个性化验证

1、非空验证

[Required]：用于验证属性不可为 null

• ErrorMessage：验证失败时，显式的异常信息，可以使用{n}占位符，其中{0}表示Display设置的名或默认属性名

• AllowEmptyStrings：是否允许空字符串，默认为false

• 示例

  @page "/AnnotationsTest"
  @using System.ComponentModel.DataAnnotations<PageTitle>验证特性测试</PageTitle><EditForm Model="Model" OnValidSubmit="Submit"><DataAnnotationsValidator/><div class="mb-3 w-25"><label>姓名：<InputText @bind-Value="Model.Name"/><ValidationMessage For="()=> Model.Name"/></label></div><div class="w-25"><button class="btn btn-primary">提交</button></div>
  </EditForm>@code {[SupplyParameterFromForm]public Student Model { get; set; } = new();void Submit(){Console.WriteLine(Model?.Name);}public class Student{[Required(ErrorMessage = "{0}不可为空!")][Display(Name = "姓名")]public string Name { get; set; } = null!;}
  }
  

2、长度验证

[StringLength]：用于验证字符串属性值是否未超过指定长度限制

• MaximumLength：最大长度
• MinimumLength：最小长度
• ErrorMessage：验证失败时显式的异常信息，可以使用{n}占位符，其中{0}表示Display设置的名或默认属性名，{1}表示[StringLength]特性第一个属性值，即MaximumLength的值，{2}表示第二个属性值，即MinimumLength的值

[MaxLength]：验证设定的最大长度

[MinLength]：验证设定的最小长度

• 示例

  @page "/AnnotationsTest"
  @using System.ComponentModel.DataAnnotations<PageTitle>验证特性测试</PageTitle><EditForm Model="Model" OnValidSubmit="Submit"><DataAnnotationsValidator/><div class="mb-3 w-25"><label>地址：<InputText @bind-Value="Model.Address" /><ValidationMessage For="()=> Model.Address" /></label></div><div class="mb-3 w-25"><label>最大长度：<InputText @bind-Value="Model.MaxLength" /><ValidationMessage For="()=> Model.MaxLength" /></label></div><div class="mb-3 w-25"><label>最小长度：<InputText @bind-Value="Model.MinLength" /><ValidationMessage For="()=> Model.MinLength" /></label></div><div class="w-25"><button class="btn btn-primary">提交</button></div>
  </EditForm>@code {[SupplyParameterFromForm]public Student Model { get; set; } = new();void Submit(){//提交时的业务处理}public class Student{[Display(Name = "地址")][StringLength(5,MinimumLength=2,ErrorMessage="{0}的长度要在{2}~{1}之间")]public string? Address { get; set; }[Display(Name = "最大长度")][MaxLength(5, ErrorMessage = "{0}的最大长度为{1}")]public string? MaxLength { get; set; }[Display(Name = "最小长度")][MinLength(2, ErrorMessage = "{0}的最小长度为{1}")]public string? MinLength { get; set; }}
  }
  

3、正则验证

[RegularExpression]：验证属性值是否与指定的正则表达式匹配

• Pattern：正则校验规则

• ErrorMessage：验证失败时显式的异常信息，可以使用{n}占位符，其中{0}表示Display设置的名或默认属性名，{1}表示[RegularExpression]特性第一个属性值，即Pattern的值

• 示例

  @page "/AnnotationsTest"
  @using System.ComponentModel.DataAnnotations<PageTitle>验证特性测试</PageTitle><EditForm Model="Model" OnValidSubmit="Submit"><DataAnnotationsValidator/><div class="mb-3 w-25"><label>正则：<InputText @bind-Value="Model.Regex" /><ValidationMessage For="()=> Model.Regex" /></label></div><div class="w-25"><button class="btn btn-primary">提交</button></div>
  </EditForm>@code {[SupplyParameterFromForm]public Student Model { get; set; } = new();void Submit(){Console.WriteLine(Model?.Regex);}public class Student{[Display(Name = "正则数据")][RegularExpression("^[0-9]*[1-9][0-9]*$",ErrorMessage = "{0}不符合正则规则")] //正则public string? Regex { get; set; }}
  }
  

4、范围校验

[Range(minimum,maximum[,ErrorMessage])]：用于指定数值类型的最小值和最大值之间的范围

• minimum：数值最小值

• maximum：数值最大值

• ErrorMessage：验证失败时显式的异常信息，可以使用{n}占位符，其中{0}表示Display设置的名或默认属性名，{1}表示[Range]特性第一个属性值，即minimum的值，{2}表示第二个属性值，即maximum的值

• 示例

  @page "/AnnotationsTest"
  @using System.ComponentModel.DataAnnotations<PageTitle>验证特性测试</PageTitle><EditForm Model="Model" OnValidSubmit="Submit"><DataAnnotationsValidator/><div class="mb-3 w-25"><label>范围校验：<InputNumber @bind-Value="Model.Range"/><ValidationMessage For="()=> Model.Range"/></label></div><div class="w-25"><button class="btn btn-primary">提交</button></div>
  </EditForm>@code {[SupplyParameterFromForm]public Student Model { get; set; } = new();void Submit(){}public class Student{[Range(1, 5, ErrorMessage = "{0}最小值为{1}，最大值为{2}")]public int Range { get; set; }}
  }
  

5、对比校验

[Compare(otherProperty[,ErrorMessage])]：用于验证模型对象中的两个属性值是否相同，例如创建账号时的两次密码输入验证。

• otherProperty：要进行对比的属性名，可以借助nameof()方法来获取

• ErrorMessage：验证失败时显式的异常信息

• 示例

  @page "/AnnotationsTest"
  @using System.ComponentModel.DataAnnotations<PageTitle>验证特性测试</PageTitle><EditForm Model="Model" OnValidSubmit="Submit"><DataAnnotationsValidator/><div class="mb-3 w-25"><label>密码：<InputText @bind-Value="Model.Password" /></label></div><div class="mb-3 w-25"><label>密码校验：<InputText @bind-Value="Model.ConfirmPassword" /><ValidationMessage For="()=> Model.ConfirmPassword" /></label></div><div class="w-25"><button class="btn btn-primary">提交</button></div>
  </EditForm>@code {[SupplyParameterFromForm]public Student Model { get; set; } = new();void Submit(){Console.WriteLine(Model?.Password);}public class Student{public string? Password { get; set; }[Compare(nameof(Password), ErrorMessage = "密码不一致")]public string? ConfirmPassword { get; set; }}
  }
  

6、格式校验

[EmailAddress]：验证<InputText>组件中输入的内容是否为正确的电子邮箱地址格式

[Phone]：用于验证国际标准手机号格式的正确性，如果要检验中国的11位手机号码，可以使用[RegularExpression]特性进行验证

[CreditCard]：用于验证信用卡号码的正确性

[Url]：用于验证 URL 地址格式的正确性

• ErrorMessage：验证失败时，显式的异常信息，可以使用{0}表示Display设置的名或默认属性名

• 示例

  @page "/AnnotationsTest"
  @using System.ComponentModel.DataAnnotations<PageTitle>验证特性测试</PageTitle><EditForm Model="Model" OnValidSubmit="Submit"><DataAnnotationsValidator /><div class="mb-3 w-25"><label>邮箱：<InputText @bind-Value="Model.Email" /><ValidationMessage For="()=> Model.Email" /></label></div><div class="mb-3 w-25"><label>手机号：<InputText @bind-Value="Model.Phone" /><ValidationMessage For="()=> Model.Phone" /></label></div><div class="mb-3 w-25"><label>信用卡：<InputText @bind-Value="Model.CreditCard" /><ValidationMessage For="()=> Model.CreditCard" /></label></div><div class="mb-3 w-25"><label>URL：<InputText @bind-Value="Model.URL" /><ValidationMessage For="()=> Model.URL" /></label></div><div class="w-25"><button class="btn btn-primary">提交</button></div>
  </EditForm>@code {[SupplyParameterFromForm]public Student Model { get; set; } = new();void Submit(){Console.WriteLine(Model.Phone);}public class Student{//邮箱地址[Display(Name = "邮箱")][EmailAddress(ErrorMessage = "请输入正确的邮箱")]public string? Email { get; set; }[Display(Name = "手机号")][Phone(ErrorMessage = "请输入正确的手机号码")]public string? Phone { get; set; }[Display(Name = "信用卡")][CreditCard(ErrorMessage = "请输入正确的信用卡号")]public string? CreditCard { get; set; }[Url(ErrorMessage = "请输入正确的URL地址")]public string? URL { get; set; }}
  }
  

7、文件扩展名校验

[FileExtensions]：用于验证文件的扩展名。

• Extensions：设置要校验的文件扩展名，如果允许多个扩展名，可以使用逗号,隔开

• ErrorMessage：验证失败时，显式的异常信息，可以使用{0}表示Display设置的名或默认属性名

• 示例

  @page "/AnnotationsTest"
  @using System.ComponentModel.DataAnnotations<PageTitle>验证特性测试</PageTitle><EditForm Model="Model" OnValidSubmit="Submit"><DataAnnotationsValidator /><div class="mb-3 w-25"><label>文件名：<InputText @bind-Value="Model.FileName" /><ValidationMessage For="()=> Model.FileName" /></label></div><div class="w-25"><button class="btn btn-primary">提交</button></div>
  </EditForm>@code {[SupplyParameterFromForm]public FileModel Model { get; set; } = new();void Submit(){Console.WriteLine(Model.FileName);}public class FileModel{[FileExtensions(Extensions = "jpg,doc",ErrorMessage = "必须为jpg或doc文件")]public string? FileName { get; set; }}
  }
  

8、自定义校验

[CustomValidation(validatorType,methodName)]：用于自定义验证逻辑，可以进行个性化验证

• validatorType：Type类型，用于指定自定义校验方法所在的类型
• methodName：string类型，用于指定自定义的验证方法的名称

重点关注验证方法的几个要求：

• 必须为静态方法

• 必须返回ValidationResult类型，当验证方法验证成功时，返回ValidationResult.Success值，验证失败时，通过返回new ValidationResult(errorMessage)返回一条错误信息

• 接收两个参数，一个为目标校验值，一个为ValidationContext对象，可以通过该对象的ObjectInstance属性获取目标校验属性的所在对象

• 示例

  @page "/AnnotationsTest"
  @using System.ComponentModel.DataAnnotations<PageTitle>验证特性测试</PageTitle><EditForm Model="Model" OnValidSubmit="Submit"><DataAnnotationsValidator /><div class="mb-3 w-25"><label>姓名：<InputText @bind-Value="Model.Name" /><ValidationMessage For="()=> Model.Name" /></label></div><div class="mb-3 w-25"><label>岁数：<InputNumber @bind-Value="Model.Age" /><ValidationMessage For="()=> Model.Age" /></label></div><div class="w-25"><button class="btn btn-primary">提交</button></div>
  </EditForm>@code {[SupplyParameterFromForm]public CustomModel Model { get; set; } = new();void Submit(){Console.WriteLine(Model.Name);}public class CustomModel{[CustomValidation(typeof(CustomValidator), nameof(CustomValidator.ValidationName))]public string? Name { get; set; }[CustomValidation(typeof(CustomValidator), nameof(CustomValidator.ValidationAge))]public int Age { get; set; }}public class CustomValidator{public static ValidationResult? ValidationName(string data, ValidationContext validationContext){   //可以通过ValidationContext对象获取校验值，也可以直接使用第一个参数//string name = ((CustomModel)validationContext.ObjectInstance).Name!;if (data != null && data.Contains("ABC")){return ValidationResult.Success;}//返回错误信息return new ValidationResult("商品名称必须包含 ABC !");}public static ValidationResult? ValidationAge(int data, ValidationContext validationContext){//可以通过ValidationContext对象获取校验值，也可以直接使用第一个参数//int age = ((CustomModel)validationContext.ObjectInstance).Age!;  if (data > 0 && data < 100){return ValidationResult.Success;}//返回错误信息return new ValidationResult("岁数必须在0~100之间");}}
  }
  

二、模型校验

有时候需要对多个属性进行综合性的验证，比如两个人属性的大小对比、开始和结束时间的先后约束、总数限制等等，因为依赖多个属性共同完成的校验，无法通过单个特性来实现，此时就需要用到IValidatableObject 接口。

IValidatableObject 是 .NET 中的一个接口，用于实现对象级别的自定义验证逻辑。它的核心作用是允许开发者编写复杂的验证规则，尤其是那些涉及多个属性或需要动态判断的验证场景，而不仅仅依赖于单个属性的特性声明（如 [Required]、[Range] 等）。

1、定义模型校验

表单模型通过继承IValidatableObject接口并实现Validate方法即可定义模型校验的规则。在表单进行提交时，会自动进行模型校验。

• 示例

  public class Order : IValidatableObject
  {public DateTime StartDate { get; set; }public DateTime EndDate { get; set; }public int Quantity { get; set; }public IEnumerable<ValidationResult> Validate(ValidationContext validationContext){// 规则1：结束时间必须晚于开始时间if (EndDate < StartDate){yield return new ValidationResult("结束时间必须晚于开始时间");}// 规则2：数量不能超过 100（假设需要动态判断）if (Quantity > 100){yield return new ValidationResult("数量不能超过 100", new[] { nameof(Quantity) });}}
  }
  

2、模型校验

模型校验的错误信息可以通过<ValidationSummary/>组件展示，如果只希望展示模型校验的异常信息，只需要通过Model属性绑定到指定的表单模型对象上即可。

• 示例

  <EditForm Model="Input" method="post" OnValidSubmit="LoginUser" Enhance FormName="Login"><DataAnnotationsValidator /><ValidationSummary Model="@Input"/>......
  </EditForm >
  

自定义表单验证(ValidationMessageStore)

一、表单验证的过程控制

Blazor中，使用EditForm组件时，可以使用EditContext和ValidationMessageStore对象来控制表单的验证过程。

1、ValidationMessageStore

在 Blazor 中，ValidationMessageStore是一个用于管理和存储验证错误消息的服务。它提供了一种集中管理和显示验证错误消息的机制，可以方便地在整个应用程序中使用。

构造方法

ValidationMessageStore(EditContext)：设置对应编辑上下文对象的ValidationMessageStore实例。

常用属性

this[Expression<Func<Object>>]：索引器，获取指定字段在此ValidationMessageStore中的验证消息。

常用方法

Add(Expression<Func<Object>>, String)：为指定字段添加验证信息。

• 第一个参数中，是一个返回需要设置验证信息的字段的Lamda表达式

Add(Expression<Func<Object>>, IEnumerable<String>)：为指定字段添加多条验证信息。

Clear()：清除所有的消息。

Clear(Expression<Func<Object>>)：消除指定字段的消息。

2、EditContext

在表单的验证过程中，EditContext作为上下文对象，起到了承上启下的作用。

常用属性

Model：object属性，获取当前EditContext对象所关联的表单模型对象。

ShouldUseFieldIdentifiers：是否对表单模型字段使用唯一标识，可以确保在验证错误消息中能够准确地指示出错的字段，特别是在处理复杂表单时非常有用，默认情况下为true。如果希望简化验证错误消息，可以将该属性设置为false。

常用方法

bool Validate()：表单验证是否通过。

FieldIdentifier Field(string fieldName)：获取对应字段的可编辑唯一标识对象。

IEnumerable<string> GetValidationMessages([Expression<Func<object>> accessor/FieldIdentifier fieldIdentifier])：获取全部或指定字段的验证错误信息，当表单字段验证失败时，Blazor会将相应的错误消息存储在EditContext对象中，可以通过此方法获取，以便在UI中进行自定义展示。

bool IsModified([Expression<Func<object>> accessor/FieldIdentifier fieldIdentifier])：任意字段或指定字段是否已被改变。

bool IsValid(Expression<Func<object>> accessor/FieldIdentifier fieldIdentifier)：指定字段是否验证通过。

NotifyValidationStateChanged()：当字段的验证状态发生变化时，可以调用此方法来通知Blazor组件进行重新渲染。

常用事件

OnValidationRequested(object? sender,ValidationRequestedEventArgs args)：在EditForm表单发起验证时会触发，可以在事件处理函数中进行验证处理。

OnFieldChanged(object? sender, FieldChangedEventArgs args)：当字段内容发生变化时触发。

OnValidationStateChanged(object? sender, TEventArgs e)：在表单验证状态发生变化时触发，例如字段的验证结果从有效变为无效或从无效变为有效时触发。

3、综合示例

• 示例

  @page "/starship-8"
  @rendermode InteractiveServer
  @implements IDisposable
  @inject ILogger<Starship8> Logger<h2>Holodeck Configuration</h2><EditForm EditContext="editContext" OnValidSubmit="Submit" FormName="Starship8"><div><label><InputCheckbox @bind-Value="Model!.Subsystem1" />Safety Subsystem</label></div><div><label><InputCheckbox @bind-Value="Model!.Subsystem2" />Emergency Shutdown Subsystem</label></div><div><ValidationMessage For="() => Model!.Options"/></div><div><button type="submit">Update</button></div>
  </EditForm>@code {private EditContext? editContext;[SupplyParameterFromForm]public Holodeck? Model { get; set; }private ValidationMessageStore? messageStore;protected override void OnInitialized(){Model ??= new();editContext = new(Model);editContext.OnValidationRequested += HandleValidationRequested;messageStore = new(editContext);}private void HandleValidationRequested(object? sender,ValidationRequestedEventArgs args){//清除上一次遗留的验证结果信息messageStore?.Clear();//自定义验证逻辑if (!Model!.Options){messageStore?.Add(() => Model.Options, "Select at least one.");}}private void Submit(){Logger.LogInformation("Submit called: Processing the form");}public class Holodeck{public bool Subsystem1 { get; set; }public bool Subsystem2 { get; set; }public bool Options => Subsystem1 || Subsystem2;}public void Dispose(){if (editContext is not null){editContext.OnValidationRequested -= HandleValidationRequested;}}
  }
  

二、自定义验证器组件

Blazor 框架提供了 DataAnnotationsValidator 验证器组件，用于在EditForm表单中开启特性验证。

如果对表单中的验证逻辑、顺序有自定义的需求，可以通过继承ComponentBase来创建自定义的验证器组件。

• 大多数情况下，可以使用自定义的验证特性来代替自定义验证器组件。

继承ComponentBase创建自定义验证器组件时，可以尝试实现如下内容：

• 表单的EditContext是组件的级联参数，可以在自定义验证器组件中接收该对象

• 初始化验证器组件时，创建一个基于EditContext对象的新的ValidationMessageStore来维护当前表单的错误列表

• 定义DisplayErrors(Dictionary<string, List<string>> errors)方法，当开发人员调用此方法时，将验证信息设置到ValidationMessageStore对象中。

• 发生以下任一情况时，将清除消息：

  • 引发 EditContext 的 OnValidationRequested 事件时，将ValidationMessageStore对象的所有异常消息清除
  • 引发 OnFieldChanged 事件时，将验证失败的字段清除
  • ClearErrors 方法由开发人员代码调用。 所有错误都将被清除。

• CustomValidation.cs

  public class CustomValidation : ComponentBase
  {private ValidationMessageStore? messageStore;[CascadingParameter]private EditContext? CurrentEditContext { get; set; }protected override void OnInitialized(){if (CurrentEditContext is null){throw new InvalidOperationException($"{nameof(CustomValidation)} requires a cascading " +$"parameter of type {nameof(EditContext)}. " +$"For example, you can use {nameof(CustomValidation)} " +$"inside an {nameof(EditForm)}.");}messageStore = new(CurrentEditContext);CurrentEditContext.OnValidationRequested += (s, e) => messageStore?.Clear();CurrentEditContext.OnFieldChanged += (s, e) => messageStore?.Clear(e.FieldIdentifier);}public void DisplayErrors(Dictionary<string, List<string>> errors){if (CurrentEditContext is not null){foreach (var err in errors){messageStore?.Add(CurrentEditContext.Field(err.Key), err.Value);}CurrentEditContext.NotifyValidationStateChanged();}}public void ClearErrors(){messageStore?.Clear();CurrentEditContext?.NotifyValidationStateChanged();}
  }
  

• Starship9.razor

  @page "/starship-9"
  @inject ILogger<Starship9> Logger<h1>Starfleet Starship Database</h1><h2>New Ship Entry Form</h2><EditForm Model="Model" OnValidSubmit="Submit" FormName="Starship9"><CustomValidation @ref="customValidation"/><ValidationSummary/><div><label>Primary Classification:<InputSelect @bind-Value="Model!.Classification"><option value="">Select classification ...</option><option checked="@(Model!.Classification == "Exploration")" value="Exploration">Exploration</option><option checked="@(Model!.Classification == "Diplomacy")" value="Diplomacy">Diplomacy</option><option checked="@(Model!.Classification == "Defense")"  value="Defense">Defense</option></InputSelect></label></div><div><label>Description (optional):<InputTextArea @bind-Value="Model!.Description"/></label></div><div><button type="submit">Submit</button></div>
  </EditForm>@code {private CustomValidation? customValidation;[SupplyParameterFromForm]public Starship? Model { get; set; }protected override void OnInitialized() =>Model ??= new() { ProductionDate = DateTime.UtcNow };private void Submit(){customValidation?.ClearErrors();var errors = new Dictionary<string, List<string>>();if (Model!.Classification == "Defense" && string.IsNullOrEmpty(Model.Description)){errors.Add(nameof(Model.Description),new() { "For a 'Defense' ship classification, " + "'Description' is required." });}if (errors.Any()){customValidation?.DisplayErrors(errors);}else{Logger.LogInformation("Submit called: Processing the form");}}
  }
  

三、自定义验证特性

在实际项目开发过程中，大多数情况下，使用自定义验证特性就可以满足表单上的验证需求，并且自定义验证特性的复用性更强一些，其实现过程具体如下：

• 继承ValidationAttribute

• 重写IsValid方法，返回验证结果

• 示例

  public class ClassicMovieAttribute : ValidationAttribute
  {public ClassicMovieAttribute(int year)=> Year = year;public int Year { get; }//返回验证信息public string GetErrorMessage() =>$"Classic movies must have a release year no later than {Year}.";protected override ValidationResult? IsValid(object? value, ValidationContext validationContext){var movie = (Movie)validationContext.ObjectInstance;var releaseYear = ((DateTime)value!).Year;if (movie.Genre == Genre.Classic && releaseYear > Year){return new ValidationResult(GetErrorMessage());}return ValidationResult.Success;}
  }
  

IsValid方法可以接收字段值以及一个ValidationContext参数。ValidationContext为验证的上下文对象，可以从中取得一些验证相关的信息。此外还可以通过ValidationContext对象获取IOC容器中服务。

• 示例

  public class SaladChefValidatorAttribute : ValidationAttribute
  {protected override ValidationResult? IsValid(object? value,ValidationContext validationContext){//这里假定SaladChef已经在Program.cs中注册了服务，其SaladToppers属性为一个字符串数组var saladChef = validationContext.GetRequiredService<SaladChef>();if (saladChef.SaladToppers.Contains(value?.ToString())){return ValidationResult.Success;}return new ValidationResult("Is that a Vulcan salad topper?! " +"The following toppers are available for a Ten Forward salad: " +string.Join(", ", saladChef.SaladToppers));}
  }
  

四、自定义CSS

默认情况下，Blazor框架在wwwroot/css/app.css 或 wwwroot/css/site.css中设置了表单验证失败信息的基本样式

实现步骤

在wwwroot/css/app.css 或 wwwroot/css/site.css中添加自定义的验证失败样式

• 示例

  .validField {border-color: lawngreen;
  }.invalidField {background-color: tomato;
  }
  

创建自定义的样式提供类

• 继承FieldCssClassProvider

• 重写GetFieldCssClass方法，返回对应CSS的class名称

• CustomFieldClassProvider.cs

  using Microsoft.AspNetCore.Components.Forms;public class CustomFieldClassProvider : FieldCssClassProvider
  {public override string GetFieldCssClass(EditContext editContext, in FieldIdentifier fieldIdentifier){var isValid = editContext.IsValid(fieldIdentifier);return isValid ? "validField" : "invalidField";}
  }
  

设置表单的验证演示提供对象

• 调用表单的EditContext实例的SetFieldCssClassProvider方法，将CustomFieldClassProvider设置为表单的验证样式提供对象

• Starship13.razor

  @page "/starship-13"
  @using System.ComponentModel.DataAnnotations
  @inject ILogger<Starship13> Logger<EditForm EditContext="editContext" OnValidSubmit="Submit" FormName="Starship13"><DataAnnotationsValidator /><ValidationSummary /><div><label>Identifier: <InputText @bind-Value="Model!.Id" /></label></div><div><button type="submit">Submit</button></div>
  </EditForm>@code {private EditContext? editContext;[SupplyParameterFromForm]public Starship? Model { get; set; }protected override void OnInitialized(){Model ??= new();editContext = new(Model);editContext.SetFieldCssClassProvider(new CustomFieldClassProvider());}private void Submit(){Logger.LogInformation("Submit called: Processing the form");}public class Starship{[Required][StringLength(10, ErrorMessage = "Id is too long.")]public string? Id { get; set; }}
  }
  

上面的示例中，是对表单模型的所有字段都生效的，如果只希望对指定的一些字段使用自定义样式，其他字段继续使用默认样式的话，就需要在GetFieldCssClass方法中，根据需求返回对应的CSS类名

• CustomFieldClassProvider.cs

  using Microsoft.AspNetCore.Components.Forms;public class CustomFieldClassProvider : FieldCssClassProvider
  {public override string GetFieldCssClass(EditContext editContext,in FieldIdentifier fieldIdentifier){var isValid = editContext.IsValid(fieldIdentifier);if (fieldIdentifier.FieldName == "Name"){return isValid ? "validField" : "invalidField";}else{if (editContext.IsModified(fieldIdentifier)){return isValid ? "modified valid" : "modified invalid";}else{return isValid ? "valid" : "invalid";}}}
  }
  

表单模型的嵌套验证

虽然Blazor框架提供了DataAnnotationsValidator来验证表单，但是DataAnnotationsValidator仅验证绑定到表单的模型的基础类型的直接成员，并不能验证表单模型中的复杂类型（引用类型）属性。

如果想要验证绑定模型的整个对象图（包括模型中的复杂类型），可以尝试使用Microsoft.AspNetCore.Components.DataAnnotations.Validation 包提供的 ObjectGraphDataAnnotationsValidator组件

• Microsoft.AspNetCore.Components.DataAnnotations.Validation可以从Nuget中下载
• Microsoft.AspNetCore.Components.DataAnnotations.Validation包据官方介绍，处于试验阶段，不知道有啥坑等着，能不用就先别用。

实现步骤

先创建一个表单模型类

• 示例

  public class ShipDescription
  {[Required][StringLength(40, ErrorMessage = "Description too long (40 char).")]public string? ShortDescription { get; set; }[Required][StringLength(240, ErrorMessage = "Description too long (240 char).")]public string? LongDescription { get; set; }
  }
  

在模型中的复杂类型属性上，使用[ValidateComplexType]特性

• 示例

  public class Starship
  {...[ValidateComplexType]public ShipDescription ShipDescription { get; set; } = new();...
  }
  

在EditForm表单中，使用<ObjectGraphDataAnnotationsValidator>组件

• 示例

  <EditForm ...><ObjectGraphDataAnnotationsValidator />...
  </EditForm>