在表单中,你应该向网站用户提供有关如何正确填写每个值的说明,但你也应该检查他们输入的值。Blazor提供了简单的工具,这些工具可使用最少的自定义代码执行此验证。
在本单元中,你将了解如何对模型进行注释以使Blazor知道需要哪些数据,以及如何配置表单以正确地验证和响应用户数据。
当你收集来自网站用户的信息时,必须检查其是否有意义且格式是否正确:
网站用户熟悉用于检查其输入的详细信息是否存在以及格式是否正确的验证规则。必填字段通常标有星号或“必填”标签。如果他们省略了某个值或输入了格式错误的值,将看到一条指示他们如何解决问题的验证消息。当用户按Tab键离开某个字段或单击“提交”按钮时,可能会显示验证消息。
下面是一个示例表单,其中用户提交了无效数据。在这种情况下,表单底部有验证消息并且无效字段用红色突出显示。你将在下一练习中生成此表单:
最好使验证消息尽可能有帮助。不要假定用户了解所有信息:例如,并非每个人都知道有效电子邮件地址的格式。
在Blazor中使用EditForm组件时,有多种验证选项可供选择,而无需编写复杂的代码:
usingSystem.ComponentModel.DataAnnotations;publicclassPizza{publicintId{get;set;}[Required]publicstringName{get;set;}publicstringDescription{get;set;}[EmailAddress]publicstringChefEmail{get;set;}[Required][Range(10.00,25.00)]publicdecimalPrice{get;set;}}我们将在表单中使用此模型,以使BlazingPizza员工能够将新的比萨添加到菜单中。它包含[Required]属性以确保Name和Price值始终完整。它还使用[Range]属性来检查输入的比萨价格是否在合理范围内。最后,它使用[EmailAddress]属性来检查输入的ChefEmail值是否是有效的电子邮件地址。
可以在模型中使用的其他注释包括:
注意
如果表单验证失败,消息将显示在ValidationSummary和ValidationMessage组件中。若要自定义这些消息,可以为模型中每个字段的数据注释添加一个ErrorMessage属性:
publicclassPizza{publicintId{get;set;}[Required(ErrorMessage="Youmustsetanameforyourpizza.")]publicstringName{get;set;}publicstringDescription{get;set;}[EmailAddress(ErrorMessage="Youmustsetavalidemailaddressforthechefresponsibleforthepizzarecipe.")]publicstringChefEmail{get;set;}[Required][Range(10.00,25.00,ErrorMessage="Youmustsetapricebetween$10and$25.")]publicdecimalPrice{get;set;}}内置验证属性用途广泛,你可以使用正则表达式来检查多种文本模式。但如果具有特定或不寻常的验证要求,则使用内置属性可能无法完全满足这些要求。在这些情况下,可以创建自定义验证属性。首先创建一个从ValidationAttribute类继承的类并替代IsValid方法:
publicclassPizzaBase:ValidationAttribute{publicstringGetErrorMessage()=>$"Sorry,that'snotavalidpizzabase.";protectedoverrideValidationResultIsValid(objectvalue,ValidationContextvalidationContext){if(value!="Tomato"||value!="Pesto"){returnnewValidationResult(GetErrorMessage());}returnValidationResult.Success;}}现在,可以在模型类中使用内置属性时,使用自定义验证属性:
publicclassPizza{publicintId{get;set;}[Required(ErrorMessage="Youmustsetanameforyourpizza.")]publicstringName{get;set;}publicstringDescription{get;set;}[EmailAddress(ErrorMessage="Youmustsetavalidemailaddressforthechefresponsibleforthepizzarecipe.")]publicstringChefEmail{get;set;}[Required][Range(10.00,25.00,ErrorMessage="Youmustsetapricebetween$10and$25.")]publicdecimalPrice{get;set;}[PizzaBase]publicstringBase{get;set;}}在表单提交时,在服务器端处理表单验证使用EditForm组件时,有三个事件可用于响应表单提交:
如果使用OnSubmit,则不会触发其他两个事件。可改用EditContext参数来检查是否处理输入数据。如果要编写自己的逻辑来处理表单提交,请使用此事件:
@page"/admin/createpizza"
Addanewpizzapizza.Name)"/>pizza.ChefEMail)"/>pizza.Price"/>@code{privatePizzapizza=new();voidHandleSubmission(EditContextcontext){booldataIsValid=context.Validate();if(dataIsValid){//Storevaliddatahere}}}如果改用OnValidSubmit和OnInvalidSubmit,则不必在每个事件处理程序中检查验证状态:@page"/admin/createpizza"
Addanewpizzapizza.Name)"/>pizza.ChefEMail)"/>pizza.Price"/>@code{privatePizzapizza=new();voidProcessInputData(EditContextcontext){//Storevaliddatahere}voidShowFeedback(EditContextcontext){//Takeactionheretohelptheusercorrecttheissues}}
@page"/admin/createpizza"