最新要闻

广告

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

 警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

  1. 首页
  2. 移动通信
  3. 内容

打开MASA Blazor的正确姿势6：表单验证

来源：博客园


【资料图】

对比Blazor内置的表单组件及其验证（EditForm），MASA Blaozr提供了功能更加丰富的表单组件及验证功能，即可以设置字段级验证，也可以设置表单级验证。而其中表单级验证，可以使用DataAnnotations和FluentValidation两种验证方式。

一、字段级验证

1、Rules属性

MASA Blazor所有输入型表单组件，如文本框、单选框、复选框、下拉框、开关、滑块等，都有一个Rules属性。Rules属性的值，是Func类型的集合，即List>。

  • Func委托的参数：类型为字符串，是当前表单组件的输入值。
  • Func委托的返回值：类型为StringBoolean，可以返回true、false、或表示错误信息的字符串。返回true，表示验证通过；返回false，表示验证不通过；返回字符串，表示验证不通过，字符串为错误提示信息。
  • 验证规则集合：List中每一个Func委托，表示一个验证规则，按顺序执行。需要注意的是，MASA Blazor的表单组件，默认每次只显示一条当时触发的错误提示信息，可以通过ErrorCount设置。

2、字段级验证案例

@code{    private string title = "测试标题";    private string content = "测试内容";    //“标题”的验证规则只有一个    private List> titleRules = new()    {        v => v.Length <= 20 ? true : "不得超过20个字符"    };    //“正文”的验证规则有两个，当输入值发生变化时，按顺序验证，视图层每次只能显示当前触发的错误    private List> contentRules    {        get        {            var rules = new List>();            //验证规则1和2            //返回true，表示验证通过；返回字符串，表示验证不通过，且返回错误信息            Func rule1 = (v) => v.Length <= 20 ? true : $"不得超过20个字符";            Func rule2 = (v) => v.Contains("hello") ? true : $"必须包含hello";            //将规则1和规则2加入到规则集合中            rules.Add(rule1);            rules.Add(rule2);            return rules;        }    }}

注：案例中未使用MForm组件，但MForm和输入型表单组件的Rules可以一起使用，两者不冲突。

二、表单级验证

1、概述

虽然可以为每个表单组件定义单独的验证规则Rules，但使用还是比较繁琐。大多数情况下，我们主要使用表单级验证。通过MForm组件，以及DataAnnotations或者FluentValidation验证方式，实现更加高效的表单验证。

  • MForm组件：MFrom组件相当于HTML原生标签form，或Blazor的内置组件EditForm，作为表单组件的父组件使用。MForm组件属性主要包括：Model-表单绑定及验证的对象，EnableValidation-开启表单验证，Value-是否通过表单验证，EnableI18n-支持检验信息的I18n多语言读取。
  • DataAnnotations：AspNetCore内置的模型检验，通过特性方式，标注验证规则，前后端通用。直接引入：@using System.ComponentModel.DataAnnotations
  • FluentValidation：.NET中最常用的第三方验证库，前后端通用。安装nutget包后引用：@using FluentValidation

2、DataAnnotations验证方式

@using System.ComponentModel.DataAnnotations;                 提交
@code{    //表单一般绑定一个Model对象    private Student stu = new Student();    //使用特性标注，为表单绑定的对象设置验证规则    //Model一般使用独立的CS文件，此处仅仅是为了方便举例    class Student    {        [Required(ErrorMessage ="姓名必填！")]        [MaxLength(10,ErrorMessage ="不得超过10个字符！")]        public string? Name { get; set; }        [Range(0,100,ErrorMessage ="必须介于0至100！")]        public int Age { get; set; }        [EmailAddress(ErrorMessage ="必须输入Email")]        public string? Email { get; set; }    }    //提交表单，根据验证结果，执行相应逻辑    private void HandleValidSubmit()    {        Console.WriteLine("验证通过后的执行逻辑");            }    private void HandleInvalidSubmit()    {        Console.WriteLine("验证失败后的执行逻辑");    }}

注：使用DataAnnotations验证方式，操作简便，但使Model与验证耦合。同时，DataAnnotations的验证规则也比较有限。

3、FluentValidation验证方式

@using FluentValidation;     
@code{    private Student stu = new Student();    class Student    {        public string? Name { get; set; }        public int Age { get; set; }        public string? Email { get; set; }    }    //为Student类创建一个验证类    //验证类继承AbstractValidator类，在构造函数中为Student类的属性设置验证规则    class StudentValidator : AbstractValidator    {        public StudentValidator()        {            RuleFor(s => s.Name).NotEmpty().WithMessage("姓名必填！").MaximumLength(10).WithMessage("不得超过10个字符");            RuleFor(s => s.Age).InclusiveBetween(0, 100).WithMessage("必须介于0至100！");            RuleFor(s => s.Email).EmailAddress().WithMessage("必须输入Email");        }    }    private void HandleValidSubmit()//...略，和DataAnnotations一样}

注：使用FluentValidation验证方式，稍微繁琐些，但实现了Model类与验证的解耦，且提供了更加丰富的验证规则。

4、验证集合类型

1)DataAnnotations验证方式:

@using System.ComponentModel.DataAnnotations;    ......        @foreach (var item in stu.Likes)    {            }    ......
@code {    //初始化3个空的爱好项目    private Student stu = new Student()    {        Likes = new List        {            new Like{Id = 1},            new Like{Id = 2},            new Like{Id = 3}        }    };    class Student    {        [Required(ErrorMessage = "姓名必填！")]        [MaxLength(10, ErrorMessage = "不得超过10个字符！")]        public string? Name { get; set; }        [Range(0, 100, ErrorMessage = "必须介于0至100！")]        public int Age { get; set; }        [EmailAddress(ErrorMessage = "必须输入Email")]        public string? Email { get; set; }        //集合使用EnumerableValidation特性标注        [EnumerableValidation]         public List Likes { get; set; }    }    class Like    {        public int Id{ get; set; }        //集合的项目类型，一样使用特性方式标注验证规则        [Required(ErrorMessage = "爱好项目必填！")]        public string? LikeItem { get; set; }    }    ......}

2)FluentValidation验证方式:

@using FluentValidation;     ......
@code {    //初始化3个空的爱好项目    private Student stu = new Student()    {        Likes = new List        {            new Like{Id = 1},            new Like{Id = 2},            new Like{Id = 3}        }    };    //Model    class Student    {        public string? Name { get; set; }        public int Age { get; set; }        public string? Email { get; set; }        public List? Likes { get; set; }    }    class Like    {        public int Id{ get; set; }        public string? LikeItem { get; set; }    }    //验证规则    class StudentValidator : AbstractValidator    {        public StudentValidator()        {            RuleFor(s => s.Name).NotEmpty().WithMessage("姓名必填！").MaximumLength(10).WithMessage("不得超过10个字符");            RuleFor(s => s.Age).InclusiveBetween(0, 100).WithMessage("必须介于0至100！");            RuleFor(s => s.Email).EmailAddress().WithMessage("必须输入Email");            //为集合类型的属性设置验证规则            RuleForEach(s => s.Likes).SetValidator(new LikeValidator());        }    }    class LikeValidator : AbstractValidator    {        public LikeValidator()        {            RuleFor(l => l.LikeItem).NotEmpty().WithMessage("爱好项目必填！");        }    }    ......}

5、表单的验证方式

1）输入型表单组件的输入值变化时，会自动触发验证规则2）使用Type类型为submit的按钮提交时，会触发表单验证（详见上面的所有案例，均使用这种方式）3）通过@ref获取MForm对象，手动验证

@using FluentValidation;                 手动验证    重置验证    重置表单
@code {    private bool isValidate = true;    private MForm form;    ......    //通过MForm对象的Validate()方法，手动触发验证    private void Validate()    {        form.Validate();    }    //通过MForm对象的ResetValidation()方法，手动重置验证    private void ResetValidation()    {        form.ResetValidation();    }    //通过MForm对象的Reset()方法，手动重置表单    private void Reset()    {        form.Reset();    }    ......}

6、使用I18n实现验证信息的多语言输出

1）安装I18n

  • 在wwwroot目录下新建I18n文件夹
  • 在I18n文件夹下分别创建zh-CN.json，en-US.json，supportedCultures.json文件
  • 在入口文件Program.cs文件中，注册I18n服务
//zh-CN.json{  "StudentValidateMessage": {    "NameRequired": "姓名必填！",    "NameLength": "姓名不得超过10个字符",    "AgeBetween": "年龄必须介于0至100",    "Email": "必须输入Email"  }}//en-US.json{  "StudentValidateMessage": {    "NameRequired": "Name is Required",    "NameLength": "Name must smaller than 10",    "AgeBetween": "Age must between 0 and 100",    "Email": "Email must be EmailAddress"  }}//supportedCultures.json，排第一的项目为默认语言[  "zh-CN",  "en-US"]//Program.cs//1、Blazor Server模式，注册I18n服务services.AddMasaBlazor().AddI18nForServer("wwwroot/I18n");//2、Blazor WASM模式，注册I18n服务await builder.Services.AddMasaBlazor().AddI18nForWasmAsync($"{builder.HostEnvironment.BaseAddress}/I18n");

2）通过依赖注入方式，使用I18n

@using FluentValidation;@using BlazorComponent.I18n;    ......
@code {    private Student stu = new Student();    class Student    {        public string? Name { get; set; }        public int Age { get; set; }    }    class StudentValidator : AbstractValidator    {        //注入I18n        private readonly I18n i18n;        public StudentValidator(I18n i18n)        {            this.i18n = i18n;            //调用I18n的T()方法，读取多语言            RuleFor(s => s.Name).NotEmpty().WithMessage(i18n.T("StudentValidateMessage.NameRequired"));            ......        }    }    ......}

三、输入型表单组件中与验证相关的属性

  1. Rules：设置验证规则
  2. HideDetails：隐藏提示和验证错误等信息。true/false/auto，当设置为 auto 时，只有在有信息要显示时，才会显示信息。
  3. Error：手动设置验证不通过
  4. ErrorCount：一次性显示错误信息的条数，默认只显示一条
  5. ErrorMessages：手动设置验证不通过的错误信息
  6. Success：手动设置验证通过
  7. SuccessMessages：手动设置验证通过的成功信息
  8. ValidateOnBlur：？
  9. ValueExpression：？

关键词：