uniapp中UView中 u-form表单在v-for循环下如何进行表单校验

news2024/9/22 1:12:22

1、数据data格式
注:rule绑定的tableFromRule中要和表单tableFrom下面放置一个同名数组,确保u-form能找到

tableFrom: {
					tableData: [
						//数据详情列表
					]
				},
				tableFromRule: {
					//校验
					tableData: [
						//数据详情列表
					]
				},
				formRules:{
					localation:[
						{
							required: true,
							message: '请填写xxxx',
							trigger: ['blur', 'change']
						}
					]
				},

2、dom结构

<u-form labelPosition="left" labelAlign="right" :model="tableFrom" :rules="tableFromRule"
					labelWidth="auto" ref="uFormData">
		<view v-for="(item, index) in tableFrom.tableData" :key="index">
					xxxxxxx
		</view>
</u-form>

3、u-form-item格式必须用 :prop=“tableData.${index}.localation

<u-form-item label="库位" :prop="'tableData.'+index+'.localation'" borderBottom>
     xxxxx
</u-form-item>

4、修改源码

在这里插入图片描述

在这里插入图片描述
找到async validateField(value, callback, event = null)函数进行替换
5、替换如下

			// 对部分表单字段进行校验
			async validateField(value, callback, event = null) {
				// $nextTick是必须的,否则model的变更,可能会延后于此方法的执行
				this.$nextTick(() => {
					
					// 校验错误信息,返回给回调方法,用于存放所有form-item的错误信息
					const errorsRes = [];
					// 如果为字符串,转为数组
					value = [].concat(value);
					// 历遍children所有子form-item
					this.children.map((child) => {
				 
						// 用于存放form-item的错误信息
						const childErrors = [];
						if (value.includes(child.prop)) {
							// 获取对应的属性,通过类似'a.b.c'的形式
							const propertyVal = uni.$u.getProperty(
								this.model,
								child.prop
							);
							
							// 属性链数组
							const propertyChain = child.prop.split(".");
							const propertyName =
								propertyChain[propertyChain.length - 1];
							//修改:将const改为let 
							let rule = this.formRules[child.prop];
							//修改:链式是无法通过上面的方式获取的,改为下面的方式
							if(!rule){
								rule=uni.$u.getProperty(
								this.formRules,
								child.prop
								);
							
							}
							// 如果不存在对应的规则,直接返回,否则校验器会报错
							if (!rule) return;
							// rule规则可为数组形式,也可为对象形式,此处拼接成为数组
							const rules = [].concat(rule);
 
							// 对rules数组进行校验
							for (let i = 0; i < rules.length; i++) {
								const ruleItem = rules[i];
								
								// 将u-form-item的触发器转为数组形式
								const trigger = [].concat(ruleItem?.trigger);
								
								// 如果是有传入触发事件,但是此form-item却没有配置此触发器的话,不执行校验操作
								if (event && !trigger.includes(event)) continue;
								// 实例化校验对象,传入构造规则
								const validator = new Schema({
									[propertyName]: ruleItem,
								});
									
								validator.validate({
										[propertyName]: propertyVal,
									},
									(errors, fields) => {
									
										if (uni.$u.test.array(errors)) {
											errorsRes.push(...errors);
											childErrors.push(...errors);
										}
										child.message =
											childErrors[0]?.message ?? null;
									}
								);
							}
						}
					});
					// 执行回调函数
					typeof callback === "function" && callback(errorsRes);
				});
			},
			// 校验全部数据

6、在tableData每次塞数据的时候,执行如下代码

this.tableFromRule.tableData.unshift(this.formRules)

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

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

相关文章

团队多人共用一个WhatsApp是如何做到的?

WhatsApp是如今许多跨境企业用来跟客户进行沟通的重要聊天工具&#xff0c;但是在使用WhatsApp时有一个问题是比较突出的&#xff0c;企业一般拥有的WhatsApp账户是有限的&#xff0c;当很多客户同时上门咨询的话&#xff0c;客服就很难应对。但是如果能够实现团队多人共用一个…

数据结构与算法基础-学习-31-交换排序之冒泡排序、快速排序

排序的其他相关知识点和源码分享可以参考之前的博客&#xff1a; 《数据结构与算法基础-学习-30-插入排序之直接插入排序、二分插入排序、希尔排序》 一、交换排序基本思想 两两比较&#xff0c;如果发生逆序则交换位置&#xff0c;直到所有数据记录都排好序为止。 二、冒…

Leetcode130. 被围绕的区域

Every day a Leetcode 题目来源&#xff1a;130. 被围绕的区域 本题给定的矩阵中有三种元素&#xff1a; 字母 X&#xff1b;被字母 X 包围的字母 O&#xff1b;没有被字母 X 包围的字母 O。 本题要求将所有被字母 X 包围的字母 O都变为字母 X &#xff0c;但很难判断哪些 …

文献阅读:Semantic Communications for Speech Signals

目录 论文简介动机&#xff1a;为什么作者想要解决这个问题&#xff1f;贡献&#xff1a;作者在这篇论文中完成了什么工作(创新点)&#xff1f;规划&#xff1a;他们如何完成工作&#xff1f;自己的看法(作者如何得到的创新思路) 论文简介 作者 Zhenzi Weng Zhijin Qin Geoffre…

网工知识角|掌握MPLS协议从这五个方面入手

今天IELAB李强伟老师(CCNA&HCIA DATACOM/ CCNP EI/ HCIP DATACOM课程讲师)给大家普及一下【MPLS协议的基本介绍】。 ​ 一、什么是MPLS VPN呢&#xff1f; MPLS VPN 是一种虚拟专用网络&#xff0c;它通过 MPLS 技术将不同位置的用户连接在一起&#xff0c;实现安全、高效…

Seata1.5.2+Nacos分布式事务环境搭建详解

文章目录 一、下载seata server二、配置application.yml三、初始Mysql数据库四、导入初始配置到nacos五、启动测试 本文以seata-server-1.5.2&#xff0c;以配置中心、注册中心使用Nacos&#xff0c;store.modedb&#xff08;mysql&#xff09;为例进行操作。 Seata简介及入门参…

掌握这个操作,数据中心才算入门!

在现代的信息技术&#xff08;IT&#xff09;领域&#xff0c;不间断电源&#xff08;UPS&#xff09;扮演着至关重要的角色&#xff0c;它们是保障数据中心、服务器以及其他关键设备持续高效运行的关键组件之一。 UPS系统的任务是在电力故障、电压波动或其他电力问题发生时&am…

如何判断自己的qt版本呢?

如何判断自己的qt版本呢? 前情提要很简单,按照如下图所示,即可查看当前打开的qtCreator的版本如何打开5.15.2版本的qtCreator呢?安装教程 前情提要 我的电脑已经安装了qt5.14.1,然后我又安装了qt5.15.2,我想尝试一下同一台电脑能否适应两个版本的qt? 当我安装完成qt5.15.2后…

短信验证码服务

使用的是 阿里云 阿里云官网 1.找到 左上角侧边栏 -云通信 -短信服务 2.在快速学习测试处 &#xff0c;按照步骤完成快速学习&#xff0c;绑定要测试的手机号&#xff0c;选专用 【测试模板】&#xff0c;自定义模板需要人工审核&#xff0c;要一个工作日 3.右上角 获取 Acces…

UDS 29 认证服务

UDS协议定义了一套标准的诊断服务&#xff0c;包括会话控制、诊断请求、诊断响应和ECU编程等功能。通过UDS协议&#xff0c;诊断工具可以向ECU发送特定的请求&#xff0c;获取ECU的状态信息和故障码&#xff0c;诊断和解决故障问题。UDS是ISO 14229标准定义的一种通信协议&…

python错误:AttributeError: module ‘pydot‘ has no attribute ‘find_graphviz‘

1.安装pydot-ng 由于pydot里面已经没有这个find_graphviz()方法了&#xff0c;选择安装pydot-ng activate python虚拟环境 pip install pydot-ng2安装graphviz 到graphviz官网上下载exe并点击安装&#xff0c;勾选添加到全局变量。 或者记住安装位置选择手动添加到path变…

Javascript动态添加表格行

1.Javascript如何动态添加表格行 图一 图二 1.首先要找到添加按钮代码&#xff0c;设置id选择器 <button type"button" id"insertRow" class"btn btn-danger" style"background-color: #ca6307;border: none">新增一项&l…

【VTK】 vtkMapper

很高兴在雪易的CSDN遇见你 ,给你糖糖 欢迎大家加入雪易社区-CSDN社区云 前言 本文主要分享VTK中关于vtkMapper的相关知识和使用方法,希望对各位小伙伴有所帮助! 感谢各位小伙伴的点赞+关注,小易会继续努力分享,一起进步! 你的点赞就是我的动力(^U^)ノ~YO </

工时管理:如何创建和管理工时表

工时管理是人力资源和业务管理的重要组成部分&#xff0c;对于项目管理也是不可或缺的。无论是哪种类型的工作&#xff0c;如果有团队或员工&#xff0c;那么你就需要工时表来跟踪时间和费用。 什么是工时表&#xff1f; 工时表是一种物理或电子文档&#xff0c;雇主用它来跟…

OCR多语言识别模型构建资料收集

OCR多语言识别模型构建 构建多语言识别模型方案 合合&#xff0c;百度&#xff0c;腾讯&#xff0c;阿里这四家的不错 调研多家&#xff0c;发现有两种方案&#xff0c;但是大多数厂商都是将多语言放在一个字典里&#xff0c;构建1w~2W的字典&#xff0c;训练一个可识别多种语…

【监控平台 - zabbix】

目录 一、环境搭建 1. zabbix程序结构 2. zabbix-agent支持的协议 3. zabbix监控环境搭建 3.1 安装方式 3.2 配置zabbix官方yum源 3.3 安装服务端与客户端 3.4 安装zabbix-web 3.4.1 cd /etc/yum.repos.d/ 3.4.2 安装依赖源 3.4.3 安装本部件 3.4.4 安装存储数据库…

时序预测 | Matlab实现CNN-XGBoost卷积神经网络结合极限梯度提升树时间序列预测

时序预测 | Matlab实现CNN-XGBoost卷积神经网络结合极限梯度提升树时间序列预测 目录 时序预测 | Matlab实现CNN-XGBoost卷积神经网络结合极限梯度提升树时间序列预测效果一览基本描述程序设计参考资料 效果一览 基本描述 时序预测 | Matlab实现CNN-XGBoost卷积神经网络结合极限…

Effective STL 1.仔细选择你的容器

Effective STL 1.仔细选择你的容器 文章目录 Effective STL 1.仔细选择你的容器迭代器容器分类连续内存容器和基于节点的容器的区别 如何选择容器结语>>>>> 欢迎关注公众号【三戒纪元】 <<<<< 标准序列容器 vector、string、deque 和 list 标准…

【技巧】如何在Excel表格中添加水印?

想要在Excel表格中添加水印展示&#xff0c;但是Excel并没有像word文档一样的直接添加水印的功能&#xff0c;怎么办&#xff1f; 今天小编来分享一个方法&#xff0c;也能实现Excel表格的添加水印~ 1、 打开Excel表格&#xff0c;依次点击菜单栏的“插入” → “文本框” →…

小件固定资产怎么管理好

对于小件固定资产的管理&#xff0c;可以考虑以下几个方面&#xff1a;  建立资产档案&#xff1a;对所有小件固定资产进行登记、编号、分类、评估等工作&#xff0c;建立详细的资产档案。  定期盘点&#xff1a;定期对小件固定资产进行盘点&#xff0c;确保资产账面与实际…