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

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-itemthis.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.mzph.cn/news/73415.shtml

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

相关文章

k8s 入门到实战--部署应用到 k8s

k8s 入门到实战 01.png 本文提供视频版&#xff1a; 背景 最近这这段时间更新了一些 k8s 相关的博客和视频&#xff0c;也收到了一些反馈&#xff1b;大概分为这几类&#xff1a; 公司已经经历过服务化改造了&#xff0c;但还未接触过云原生。公司部分应用进行了云原生改造&…

第 2 章 线性表 (线性表的静态单链表存储结构(一个数组只生成一个静态链表)实现)

1. 背景说明 A { c, b, e, g, f, d }B { a, b, n, f } 2. 示例代码 1) status.h /* DataStructure 预定义常量和类型头文件 */#ifndef STATUS_H #define STATUS_H#define CHECK_RET(ret) if (ret ! RET_OK) { \printf("FuncName: %-15s Line: %-5d ErrorCode: %-3d\n&…

Java网络编程( 一 )数据如何在网络上传输

数据如何在网络上传输 网络发展背景发送端和接收端网络协议分层封装 & 分用封装&#xff1a;分用&#xff1a; 传输补充&#xff08;数据链路层&#xff08;以太网&#xff09;&#xff09;&#xff1a;ARP协议 网络发展背景 单机阶段—>局域网阶段—>广域网阶段—&…

【区块链】DeFi是什么?大白话科普文

对于一些没有玩过区块链、或者说没有真金白银的体验过这个虚拟世界的小伙伴来说,这篇文章可以帮你了解 DeFi。致力于帮你在这个线上走出这一步。 当然这不是理财建议。 文章目录 前言什么是去中心化金融?有哪些 DeFi 项目DeFi由哪几部分构成?热门DeFi项目有哪些?前言 Def…

tomcat安装、部署JSPGOU项目、Tomcat多实例

安装 官网找包 Apache Tomcat - Welcome! tomcat 8 准备运行环境 安装tomcat catalina.sh 服务脚本管理文件 server.xml 主配置文件 修改8009&#xff08;删除注释&#xff09; 启动tomcat 访问 为了避免每次进入绝对路径启动tomcat 法二&#xff1a; 三&#xff1a;部署…

Docker 的分层文件系统

1 分层文件系统 UnionFS 联合文件系统 bootfs&#xff1a;boot file systemrootfs&#xff1a;root file system 分层文件系统 Docker镜像都是只读的&#xff0c;当容器启动时&#xff0c;一个新的可写层被加到镜像的顶部&#xff0c;这一层就是我们通常说的容器层&#xf…

手写Spring:第11章-容器事件和事件监听器

文章目录 一、目标&#xff1a;容器事件和事件监听器二、设计&#xff1a;容器事件和事件监听器三、实现&#xff1a;容器事件和事件监听器3.1 工程结构3.2 容器事件和事件监听器类图3.3 定义和实现事件3.3.1 定义事件抽象类3.3.2 定义应用上下文事件实现类3.3.3 上下文刷新事件…

汇川PLC学习Day1:跑马灯程序编写

汇川PLC学习Day1&#xff1a;跑马灯程序编写 一、 软件安装 进入官网下载软件 二、 使用帮助 三、 新建工程与功能代码实现 CtrlN 寻找内带输出模块的CPU并设置好工程名字与保存路径&#xff0c;语言选择想熟悉的类型 工程建立后&#xff0c;PLC_PRG即为用户编写程序文件…

如何优化网站SEO(提高排名和流量的3个小知识)

百度百科SEO简介&#xff1a;搜索引擎优化&#xff08;SearchEngineOptimization&#xff09;是指通过对网站内部结构、外部链接以及页面内容等进行调整&#xff0c;从而使其在搜索引擎中排名更靠前&#xff0c;从而带来更多的流量和曝光。SEO是数字营销中的重要一环&#xff0…

合并区间【贪心算法】

合并区间 以数组 intervals 表示若干个区间的集合&#xff0c;其中单个区间为 intervals[i] [starti, endi] 。请你合并所有重叠的区间&#xff0c;并返回 一个不重叠的区间数组&#xff0c;该数组需恰好覆盖输入中的所有区间 。 class Solution {public int[][] merge(int[…

TCP Header都有啥?

分析&回答 源端口号&#xff08;Source Port&#xff09; &#xff1a;16位&#xff0c;标识主机上发起传送的应用程序&#xff1b; 目的端口&#xff08;Destonation Port&#xff09; &#xff1a;16位&#xff0c;标识主机上传送要到达的应用程序。 源端&#xff0c;目…

安全测试 —— 你了解WEB安全测试吗?

&#x1f60f;作者简介&#xff1a;博主是一位测试管理者&#xff0c;同时也是一名对外企业兼职讲师。 &#x1f4e1;主页地址&#xff1a;【Austin_zhai】 &#x1f646;目的与景愿&#xff1a;旨在于能帮助更多的测试行业人员提升软硬技能&#xff0c;分享行业相关最新信息。…

Docker镜像解析获取Dockerfile文件

01、概述 当涉及到容器镜像的安全时&#xff0c;特别是在出现镜像投毒引发的安全事件时&#xff0c;追溯镜像的来源和解析Dockerfile文件是应急事件处理的关键步骤。在这篇博客中&#xff0c;我们将探讨如何从镜像解析获取Dockerfile文件&#xff0c;这对容器安全至关重要。 02…

【数学建模】2023数学建模国赛C题完整思路和代码解析

C题第一问代码和求解结果已完成&#xff0c;第一问数据量有点大&#xff0c;经过编程整理出来了单品销售额的汇总数据、将附件2中的单品编码替换为分类编码&#xff0c;整理出了蔬菜各品类随着时间变化的销售量&#xff0c;并做出了这些疏菜品类的皮尔森相关系数的热力图&#…

全球城市汇总【最新】

文章目录 案例图国家城市大洲 数据获取政策&#xff1a; 全球城市、国家、介绍汇总。包含 .csv .sql .xml 格式数据。 案例图 国家 城市 大洲 数据 获取上图资源绑定 https://blog.csdn.net/qq_40374604/category_12435042.html 获取政策&#xff1a; 如找不到在合集中查找…

PPT架构师架构技能图

PPT架构师架构技能图 目录概述需求&#xff1a; 设计思路实现思路分析1.软素质2.核心输出&#xff08;office输出&#xff09; 参考资料和推荐阅读 Survive by day and develop by night. talk for import biz , show your perfect code,full busy&#xff0c;skip hardness,ma…

printf scanf

目录 printf scanf printf 把十的二进制代码放进去了&#xff0c;i对的是二进制代码&#xff0c;指定这一串0101代码以什么样的格式输出。 为什么要输出控制符&#xff0c;因为里面放的是二进制&#xff0c;必须控制输出的格式&#xff0c;指定这一串二进制以什么样的格式输出…

跨境电商产业链,服务商的“霸道”你见识过吗?(测评补单)

跨境电商行业的服务商众多&#xff0c;涉及到从前期培训和店铺注册准备到中期选品软件、营销服务、流量投放和支付等多个环节。然而&#xff0c;行业乱象也日益严重&#xff0c;出现了一些不良现象&#xff0c;如恶意竞争、高价要求、割韭菜等。 卖家在选择服务商时应谨慎&…

ZFS了解

存储数据的管理通常涉及两个方面:对一个或多个块存储设备(如硬盘驱动器和SD卡)进行物理卷管理&#xff0c;并将它们组织成操作系统所看到的逻辑块设备(通常涉及卷管理器、RAID控制器、阵列管理器或合适的设备驱动程序)&#xff0c;以及对存储在这些逻辑块设备(文件系统或其他数…

SpringBoot 统一功能处理

目录 一、用户登录权限验证 1.1 SpringAOP可以进行处理吗&#xff1f; 1.2 创建自定义拦截器 1.3 将自定义拦截器配置到系统配置项中 1.4 拦截器的实现原理 1.4.1 实现原理源码分析 1.5 统一访问前缀添加 二、统一异常处理 2.1 为什么需要使用统一异常处理&#xff1f;…