首页 > 其他分享 >宏观上理解blazor中的表单验证

宏观上理解blazor中的表单验证

时间:2023-09-24 20:12:18浏览次数:62  
标签:EditContext 验证 表单 FieldState 消息 blazor ValidationMessageStore

概述

表单验证的最终效果大家都懂,这里不阐述了,主要从宏观角度说说blazor中表单验证框架涉及到的类,以及它们是如何协作的,看完这个,再看官方文档也许能更轻松点。

blazor中的验证框架分为两部分:基础验证框架 和 基于数据注释Atrrbute的验证器,当然也提供了很多扩展点。注意我们通常使用数据注释Atrrbute的验证器,但它仅仅是在基础验证框架上扩展而来的,并不是核心,我们下面先分析基础验证框架,后续再说基于数据注释的验证。

表单验证是围绕表单,往往一个表单绑定到一个对象,我这里称为编辑模型,表单中的输入框与这个对象属性绑定。

我们先把基础验证框架看作一个整体,从几个角度分析:

 

  1. 产生验证消息,这个不属于验证框架的核心部分,验证框架只需要提供一个方法,当框架外部产生验证时,调用此方法,让验证框架去记录即可
  2. 存储验证消息是验证框架的核心工作之一,我们可以想象使用一个Dictionary<字段,List<验证消息>>来存储,key对应编辑模型的一个字段,value是验证消息集合,一个字段可能有多个验证消息。
  3. 我们可以定义两个组件用于展示验证消息,一个用于汇总展示,一个用户展示指定指定的验证消息,它们从验证框架获取验证信息进行显示。
  4. 清空验证消息,验证框架内部从存储中清空即可,可以向外暴露个事件,还可以留个方法允许外部主动调用清空验证消息,最好再允许外部清空指定字段的验证消息。
  5.  下面说明下blazor中表单验证的关键类,以及它们之间的关系。

基础验证框架先是定义几个零散的类,各自负责处理自己的部分,然后通过引用、方法调用把几个类串联起来。

字段标识FieldIdentifier

前面说存储验证消息时,类似这么个类型:Dictionary<字段,List<验证消息>>,简单的情况“字段”可以用个string类型,但我们是在内存中,可以用更直接的方式。

FieldIdentifier = 编辑模型的引用 + 字段名,它就代表编辑模型的某个字段。后续我们要操作某个字段,往往都是用这个参数。

验证消息存储器ValidationMessageStore

ValidationMessageStore是用这样一个字段Dictionary<FieldIdentifier, List<string>> _messages来存储验证消息的。key是字段,value是此字段的多个验证消息。也提供了插入、删除等验证消息等方法。

它一般是有我们自己的代码new出来的,或者有扩展的验证器,如 基于数据注释的验证器new出来的。new它的时候会把editContext对象传进来,后面会用。

当调用这个对象添加验证消息时,它会存储此字段的验证消息,并且调用editContext获取字段状态FieldState,将自身的引用传递给它,以便FieldState将来反向通过存储器来查询验证状态。

字段状态FieldState

FieldState表示字段的状态,所谓的状态就是 这个字段是否修改过、以及获取它关联的验证消息(本质上是从ValidationMessageStore获取,后面会说)。

为啥不跟字段标识FieldIdentifier合并为一个类呢?
字段标识只是代表某个字段,在很多方法参数时都会用到,它比较轻量;而字段状态是存储了字段是否修改和验证消息列表的,相对来说比较重,那些方法可能仅仅是想通过字段标识做查找,并不关心内部的状态

它包含一个ValidationMessageStore的列表,获取此字段的验证消息时,就是遍历这个列表获取的。但FieldState不负责向存储器添加验证消息。这个列表如何来的,验证消息存储器ValidationMessageStore已经说明了。

表单编辑上下文EditContext

可以把EditContext理解为 :字段状态FieldState列表 + 编辑模型实例,注意它不引用ValidationMessageStore,之所以这样设计是想保持EditContext轻量。

那主要关心的就是FieldState列表的crud操作
创建FieldState,则是外部想通过EditContext获取字段状态时,若有就返回,否则创建并记录下来。
读取就直接遍历FieldState咯。
删除:好像木有,也没有必要
改:找到字段状态,直接改咯。

另外:一个EditForm与一个EditContext关联,EditForm内部的组件会通过级联方式获得editContext的引用

额外的,它还提供字段变化时、请求验证时的相关事件。

小结

  1. 保持EditContext轻量,它不引用具体的验证存储器,而是只包含 字段状态 + 编辑模型实例,通过EditContext遍历里面的字段状态FieldState,获取验证消息,字段状态内部是遍历存储器列表获取验证消息。
  2. 将验证状态存储器抽离出来,哪里想向编辑上下文添加字段验证,就new ValidationMessageStore(editContext);然后Add验证消息即可。
  3. 便于扩展,比如后面的基于数据注解的验证器,它就是自己new ValidationMessageStore(editContext),然后使用注解验证方式向其添加验证。

验证消息的展示

展示就比较简单了,EditForm与EditContext关联的,它会级联传递到表单的子组件,子组件通过EditContext遍历字段就能拿到验证消息。

ValidationSummary

它是汇总显示所有验证消息,它通过级联参数获取EditContext引用,遍历然后显示验证消息。

ValidationMessage

原理类似,它显示指定字段的验证消息。

基于数据注释验证器扩展

所谓的验证器,无非是定义一个类,让它持有EditContext的引用,然后它内部new ValidationMessageStore(editContext),然后通过自己的方式验证后,Add验证消息到ValidationMessageStore即可。

DataAnnotationsValidator

组件是个空壳,它通过级联参数拿到EditContext对象,然后调用EditContextDataAnnotationsExtensions中定义的扩展方法,创建了一个实现IDispose的对象,组件释放时会释放这个对象

这个核心对象内部new ValidationMessageStore(editContext),用来存储验证消息。

它在初始化时会注册:

_editContext.OnFieldChanged += OnFieldChanged;
_editContext.OnValidationRequested += OnValidationRequested;

字段变化时,验证,或者外部向editContext请求验证时,触发验证。然后将验证消息Add到存储器中。

标签:EditContext,验证,表单,FieldState,消息,blazor,ValidationMessageStore
From: https://www.cnblogs.com/jionsoft/p/17726550.html

相关文章

  • 如何实现「点击验证码,验证码刷新」的效果?
    在注册或者登录时,因为验证码看不清,用户会想要换一个,方便的方式,是点击验证码,自动更换。思路很简单,只需要在后台获取的验证码输出url,加上时间即可,url变化,验证码自然会跟着刷新。开发环境(java)前台示例:<span><imgid="registerCaptchaImg"src="${pageContext.request.contextPat......
  • 使用原生js提交form表单
    主要函数functionform(formId,callback){try{consttarget=document.getElementById(formId);target.addEventListener("submit",(e)=>{e.preventDefault();constformData=newFormDa......
  • python生成图片验证码的demo
    下面是一个使用Python生成图片验证码的简单示例:fromPILimportImage,ImageDraw,ImageFontimportrandomdefgenerate_captcha(text,width,height,font_path,font_size):#创建一个空白图片image=Image.new('RGB',(width,height),(255,255,255))dr......
  • 浏览器如何验证HTTPS证书的合法性?(转)
    浏览器拿到了服务端的数字证书后,要怎么校验该数字证书是真实有效的呢?这个过程很多人没有关注到,我这里详细说下。数字证书和CA机构在说校验数字证书是否可信的过程前,我们先来看看数字证书是什么,一个数字证书通常包含了:公钥;持有者信息;证书认证机构(CA)的信息;CA对这份文......
  • 嵌入式软件调试与验证1概述
    1嵌入式软件调试与验证技术概述1.1调试和验证过程的重要性近年来,嵌入式系统(ESEmbeddedsystems)因其灵活的操作和可能性而被广泛应用于电子系统行业。嵌入式系统由硬件、软件和其他模块(如机械)组成,旨在作为更大系统的一部分执行特定任务。网络物理系统(CPSCyber-PhysicalSyste......
  • 用户登录~生成图片验证码(identify(生成图片验证码)插件)
    1.效果图:2.以用户登录实现生成图片验证功能:使用identify(生成图片验证码)插件identify:这是一个vue的插件,使用canvas来生成图形验证码2.1下载identify插件,npm安装 npmiidentify2.2具体参数如下:2.2在components目录新建一个SIdentify.vue,把以下代码复制进去!<tem......
  • 远程连接问题处理“远程计算机需要网络级别身份验证,而你的计算机不支持该验证。请联
    1.问题描述  本地机器与远程服务器连接时(初次连接),提示如下错误:远程计算机需要网络级别身份验证,而你的计算机不支持该验证。请联系你的系统管理员或技术人员来获得帮助。2.问题处理  a.开始-运行-输入“gpedit.msc”,进入“本地组策略编辑器”。  b.本地计算机策略-->计......
  • BootstrapBlazor组件库,NET8.0使用教程
    BootstrapBlazor组件库,NET8.0使用教程BootstrapBlazor组件库官网https://www.blazor.zone/componentsBootstrapBlazor组件库github仓库地址https://github.com/dotnetcore/BootstrapBlazorBootstrapBlazor组件库gitee仓库地址https://gitee.com/LongbowEnterprise/Bootstrap......
  • jQuery对输入框进行验证,只允许输入字母和数字
    使用jQuery来对这两个输入框进行验证,确保只允许输入字母和数字,不允许输入中文字符。以下是相应的示例代码:<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title></title> <scriptsrc="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js&qu......
  • Spring Security多因素身份验证
    什么是多因素身份验证?多因素身份验证是指使用多个不同的身份验证因素来确认用户的身份。通常情况下,这些因素包括以下几个方面:知道的因素:例如密码、PIN码等拥有的因素:例如手机、U盾等生物特征因素:例如指纹、面部识别等多因素身份验证可以提高系统的安全性,因为攻-击者需......