格子表单GRID-FORM | 必填项检验 BUG 修复实录

格子表单/GRID-FORM已在Github 开源,如能帮到您麻烦给个星🤝

GRID-FORM 系列文章

  • 基于 VUE3 可视化低代码表单设计器
  • 嵌套表单与自定义脚本交互
  • 文档网站搭建(VitePress)与部署(Github Pages)
  • 必填项检验 BUG 修复实录

#1 缘起

格子表单支持设置字段为必填项,组件会在数据提交前自检,发现有必填字段留空,则抛出异常。

增加子(嵌套)表单功能后,上述校验出现 BUG 🐛,感谢热心网友的 ISSUE 提醒。

#1.1 原因分析

原校验流程:

  1. 表单初始化时,构建必填项集合 formRequired : Map<String, Object>(以字段编号作为 KEY,元素包括:label/字段中文,msg/提示信息,regex/正则表达式)
  2. 校验时,遍历 formRequired ,匹配格则
  3. 若有字段(1个或多个)检查未通过,抛出异常

代码如下:

const _checkRequire = formObj=>{let fails = []Object.keys(formRequired).forEach(key=>{let { regex, msg, label } = formRequired[key]if(!formObj[key])   fails.push(`${label}${key})未填写`)else{if(!!regex && !RegExp(regex).test(formObj[key])) {fails.push(msg||`${label}${key})校验未通过`)}}})if(fails.length){props.debug && track(`[表单检查]`, fails)return emits("failed", fails)}
}

子表单下,字段编号可能重复,嵌套对象下遍历时不能正常匹配。如上图表单的校验过程 :

// 构建的规则
const formRequired = {school: { label:"学校名称", regex: "", msg:"" }
}// 用户填写表单
const formData = {name: "fdgs",origin: "21,age: 123,educates: [{ type:"小学", from:"2024-02-18", school:"e121321" }]
}// 检验时,遍历 formRequired,提取出 school,发现在 formData 中没有 formData['school'],于是报错

#2 思路

首先想到的解决方案,就是支持嵌套对象的检查:递归对当前层级的数据对象进行检查,直至没有下层嵌套。

/*** 检测必填项* 子表单(非 SIMPLE)必填无法正常检测*      https://github.com/0604hx/grid-form/issues/3** @param {Array<import('.').FormItem>} items - 表单定义项* @param {Object} bean - 与 items 对应的数据对象* @param {Array<String>} fails - 错误清单* @param {String} prefix - 前缀文本*/
const _checkRequire = (items, bean, fails, prefix="")=>{for(const item of items){if(item._container === true){switch(item.category){case SINGLE:_checkRequire(item.items, bean[item._uuid]||{}, fails)breakcase MULTIPLE:const rows = bean[item._uuid]if(Array.isArray(rows)){for (let i = 0; i < rows.length; i++) {const row = rows[i]_checkRequire(item.items, row, fails, `[${item._text||item.title}的第${i+1}条]`)}}breakdefault:_checkRequire(item.items, bean, fails)}}else if(item._required == true){//检查必填表单项是否符合预期if(!bean[item._uuid])fails.push(`${prefix}${item._text}${item._uuid})未填写`)else{if(!!item._regex && !RegExp(item._regex).text(bean[item._uuid]))fails.push(prefix+(item._message || `${item._text}${item._uuid})校验未通过:${item._regex}`))}}}
}

新思路删除了中间变量 formRequired,仅在提交前遍历全部表单项进行校验,能够精准到子表单的某一行,理论上支持无限嵌套😎。

#3 尾声

修复后,效果如下:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/745083.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

搭建谷歌Gemini

前言 Gemini是Google AI于2023年发布的大型语言模型&#xff0c;拥有强大的文本生成、理解和转换能力。它基于Transformer模型架构&#xff0c;并使用了大量文本和代码数据进行训练。Gemini可以执行多种任务&#xff0c;包括&#xff1a; 生成文本&#xff1a;可以生成各种类…

一张图让你学会Python

有编程基础的人一看就可以了解 Python 的用法了。真正的 30 分钟上手。 国外一高手画的&#xff0c;现把它翻译成中文&#xff0c;入门超简单 python入门神图!(看不清可以“另存为”查看)

C++类和对象一

#include <iostream> using namespace std;//设计一个学生类 class CStudent {public: //公有成员void InputData(){cout << "请输入学号";cin >> sno;cout << "请输入姓名";cin >> sname;cout << "请输入分…

③【Docker】Docker部署Nginx

个人简介&#xff1a;Java领域新星创作者&#xff1b;阿里云技术博主、星级博主、专家博主&#xff1b;正在Java学习的路上摸爬滚打&#xff0c;记录学习的过程~ 个人主页&#xff1a;.29.的博客 学习社区&#xff1a;进去逛一逛~ ③【Docker】Docker部署Nginx docker拉取nginx…

Linux环境下安装DGL及其CUDA

前段时间看到一篇AAAI2024的论文Patch-wise Graph Contrastive Learning for Image Translation&#xff0c;它采用GNN的思想来进行image-to-image translation的任务&#xff0c;非常的新颖&#xff0c;但我进行复现的时候&#xff0c;发现直接下载它里面需要的DGL库是无法运行…

第一次vp蓝桥杯

最失败的一集&#xff0c;这是学了个什么&#xff1f; 果然是一个很失败的人呢&#xff0c;第一次逃晚自习就被辅导员发现了呢&#xff0c;还给我打电话&#xff0c;虽然知道可能他也没办法。但这就更体现我很失败了。 题也不会写&#xff0c;其他的方面也不是很如意。嘻嘻嘻…

【Flutter 面试题】Flutter如何处理响应式布局?

【Flutter 面试题】Flutter如何处理响应式布局&#xff1f; 文章目录 写在前面口述回答补充说明完整代码示例运行结果详细说明 写在前面 &#x1f64b; 关于我 &#xff0c;小雨青年 &#x1f449; CSDN博客专家&#xff0c;GitChat专栏作者&#xff0c;阿里云社区专家博主&am…

NB-IoT模块

目录 一. NB-IoT模块实物图 二. BC20/NB-IoT模块产品规格 三. 指令顺序 1. AT判断BC20模组是否正常 2. ATE0返回OK&#xff0c;已经返回回显 3. ATCSQ 4. AT_CEREG? 5. ATCGATT? 6. ATCGATT? 四. OneNet 连接 1. AT 查看 NB(当前NB)&#xff0c;云平台根据这两个…

从顺序表到链表再到队列和栈

1.顺序表 顺序表&#xff0c;简单的说&#xff0c;就是一种用结构体储存的数组。只是一般顺序表还有着记录存入数据个数size和数组总空间位置个数capacity 我们要定义一个顺序表的结构体&#xff0c;就要先确定顺序表的储存的数据&#xff0c;然后假设数组是固定长度&am…

链表的分类有哪些?

1、典型回答 链表 (Linked List) 是一种常见的线性数据结构&#xff0c;由一系列节点(Node)组成。每个节点都包含数据(element) 和一个指向下一个节点的指针 (next) 。通过这种方式&#xff0c;每个节点可以按照顺序链接在一起&#xff0c;形成一个链表。 线性数据结构是一种常…

ArcGIS学习(十五)用地适宜性评价

ArcGIS学习(十五)用地适宜性评价 本任务给大家带来的内容是用地适宜性评价。 用地适宜性评价是大家在平时工作中最常接触到的分析场景之一。尤其是在国土空间规划的大背景下,用地适宜性评价变得越来越重要。 此外,我们之前的任务主要是使用矢量数据进行分析。本案例是主讲…

Java中的 “==” 与 equals 的区别

Java中的 “” 与 equals 的区别 1.“” 在Java中有两大类数据类型&#xff0c;一类是基础数据类型共有八种分别是byte、 short、 int、 long、 float、 double、 char、boolean&#xff0c;另一类则是引用数据类型&#xff0c;例如String、Integer等等。 “ ” 作为比较运算…

切片上的健壮范型函数

在这篇博客文章中&#xff0c;我们将讨论如何通过了解切片在内存中的表示方式以及这对垃圾收集器的影响&#xff0c;更有效地使用slices包中提供的函数。我们还将介绍我们最近如何调整这些函数&#xff0c;使它们变得不那么令人惊讶。 借助类型参数&#xff0c;我们可以为所有…

C++之职工管理系统

1、管理系统需求 职工管理系统可以用来管理公司内所有员工的信息 主要利用C来实现一个基于多态的职工管理系统 公司中职工分为三类:普通员工、经理、老板&#xff0c;显示信息时&#xff0c;需要显示职工编号、职工姓名、职工岗位、以及职责。 普通员工职责:完成经理交给的…

自己写的whoami

一、代码 #include<stdio.h> #include<stdlib.h> #include<proc/readproc.h> int main() {struct PROCTAB *pt;struct proc_t *p;char *cmd;ptmalloc(sizeof(struct PROCTAB));pmalloc(sizeof(struct proc_t));ptopenproc(0x0028);while(readproc(pt,p)!NUL…

手撸dynamic源码详细讲解

本文源码解析基于3.3.1版本。只截了重点代码&#xff0c;如果需要看完整代码&#xff0c;可以去github拉取。 1 自动配置的实现 一般情况下&#xff0c;一个starter的最好入手点就是自动配置类&#xff0c;在 META-INF/spring.factories文件中指定自动配置类入口 org.spring…

CentOS无法解析部分网站(域名)

我正在安装helm软件&#xff0c;参考官方文档&#xff0c;要求下载 get-helm-3 这个文件。 但是我执行该条命令后&#xff0c;报错 连接被拒绝&#xff1a; curl -fsSL -o get_helm.sh https://raw.githubusercontent.com/helm/helm/main/scripts/get-helm-3 # curl: (7) Fai…

使用 pg_profile 在 Postgres 中生成性能分析报告

前言&#xff1a; postgres数据库中拥有大量的辅助插件用于帮助DBA更好的分析数据库性能或整个集群&#xff0c;包括索引、I/O、CPU和内存等&#xff0c;pg_profile是基于PostgreSQL标准统计信息视图的诊断工具&#xff0c;它类似于Oracle AWR架构&#xff0c;和Oracle一样&am…

threejs简单创建一个几何体(一)

1.下包引入 //下包 npm install three yarn add three//引入 import * as THREE from three2.创建场景,摄像机 // 1.创建场景const scene new THREE.Scene()// 2.创建摄像机//第一个参数是视角,一般在60-90之间,第二个参数是场景的尺寸,一般取显示器的宽高,第三个参数是开始位…

下载chromedrive,使用自动化

1、先看一下自己浏览器的版本 2、访问 https://googlechromelabs.github.io/chrome-for-testing/