element-plus校验单个form对象合法性

在 Vue 中,循环生成的表单列表,并且每个表单中包含多个对象,使用 v-for 来创建这些表单,并且使用动态 prop 路径来验证单个对象是否满足必填校验。

<template><el-form ref="formRef" :model="form" :rules="rules"><div v-for="(item, index) in form.items" :key="index"><el-form-item :prop="`items.${index}.name`" :rules="[{ required: true, message: '名称不能为空', trigger: 'blur' }]"><el-input v-model="item.name" placeholder="请输入名称"></el-input></el-form-item><el-form-item :prop="`items.${index}.email`" :rules="[{ required: true, message: '邮箱不能为空', trigger: 'blur' }]"><el-input v-model="item.email" placeholder="请输入邮箱"></el-input></el-form-item><!-- 更多的表单项 --></div><el-button @click="validateSingleItem(0)">验证第一个对象</el-button></el-form>
</template><script setup>
import { reactive, ref } from 'vue';
import { ElForm, ElFormItem, ElInput, ElButton } from 'element-plus';const formRef = ref(null);
const form = reactive({items: [{ name: '', email: '' },{ name: '', email: '' },// ...更多对象]
});const rules = {items: form.items.map((_, index) => ({name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],email: [{ required: true, message: '邮箱不能为空', trigger: 'blur' }]}))
};//该方法,需要将items上所有对象都校验通过,valid才能为true;
function validateSingleItem(index) => {formRef.value.validate((valid) => {if (valid) {console.log(`${index} 个对象验证通过`);} else {console.log(`${index} 个对象验证失败`);}}, `items.${index}`); // 验证指定索引的对象
};
</script>
//上述validateSingleItem(): 该方法,需要将items上所有对象都校验通过,valid才能为true;特此优化
//优化方法如下:该方法,只会校核当前的数组下标值的合法性;
function validateSingleItem(index) {const validate = (path) => {return new Promise((resolve) => {formRef.value.validateField(path, (errMessage) => {resolve(errMessage);});});};// 校验当前的for循环中的一项Promise.all([validate(`items.${index}.name`),validate(`items.${index}.email`),]).then((results) => {if (results.some((errMessage) => errMessage)) {console.log(`${index} 个对象验证失败`);} else {console.log(`${index} 个对象验证通过`);}});
}
  1. 使用 v-for 循环来生成表单列表,每个表单项都有一个 el-form-item。
  2. 使用 :prop 动态绑定每个表单项的验证路径。
  3. 使用 :rules 动态绑定每个表单项的验证规则。
  4. 定义了一个 validateSingleItem 方法来调用 el-form 的 validate 方法,并传入验证路径 items.${index},这将验证指定索引的对象是否满足必填条件。

请注意,这个示例假设使用的是 Element Plus 作为 UI 库。如果使用的是其他 UI 库,可能需要调整代码以适应该库的 API。此外,这个示例验证了列表中第一个对象,如果你需要验证其他对象,你可以修改 validateSingleItem 方法调用时传递的索引。

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

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

相关文章

大模型面试题:Prefix LM和Causal LM的区别是啥?

获取更多面试真题的集合&#xff0c;请移步至 https://pica.zhimg.com/80/v2-7fd6e77f69aa02c34ca8c334870b3bcd_720w.webp?sourced16d100b 说白了&#xff1a;就是attention mask不一样&#xff0c;如下所示&#xff1a; img 它们定义如下&#xff1a; Prefix LM&#xff…

学习虚幻C++开发日志——定时器

官方文档&#xff1a;虚幻引擎中的Gameplay定时器 | 虚幻引擎 5.5 文档 | Epic Developer Community | Epic Developer Community 定时器 安排在经过一定延迟或一段时间结束后要执行的操作。例如&#xff0c;您可能希望玩家在获取某个能力提升道具后变得无懈可击&#xff0c;…

mac终端运行 MySQL语句 和服务器相关命令

文章目录 1.mac服务器相关命令1.获取mac电脑的IP 2.MySQL语句1. 退出 MySQL&#xff1a;2.使用新密码连接&#xff1a;3.创建一个新数据库&#xff1a;4.查看数据库列表&#xff1a;5.使用数据库&#xff1a;6.创建一个用户表&#xff1a;7.插入数据8.查询数据9.更新数据10.删除…

Windows达梦8数据库:本地编码:PG_GBK, 导入文件编码:PG_UTF8错误最优解决方法

在windows使用达梦8DM管理工具直接导入.dmp文件(可能是从Linux导出的)时出现该错误 错误如下 解决方案如下&#xff1a; 1、重新建立UTF-8编码的数据库 2、新建一个模式 3、使用CMD 命令进行导入 找到DM数据库的安装路径的bin 目录下 cmd 进入终端&#xff0c;使用命令&…

【极客兔兔-Web框架Gee详解】Day0 序言

文章目录 一、Web 开发1. 什么是Web 开发&#xff1f;2. 主要组成部分2.1 前端开发2.2 后端开发2.3 全栈开发2.4 数据库管理 3. Web开发过程3.1 规划和设计&#xff1a;3.2 开发和编码&#xff1a;3.3 测试和优化&#xff1a;3.4 部署和维护&#xff1a; 4. 总结 二、用标准库n…

Java入门(8)--反射机制

Java反射机制&#xff1a;运行时的强大工具 &#x1f50d; &#x1f3af; 掌握Java反射&#xff0c;让你的代码更具灵活性和扩展性&#xff01; 在上一篇文章中&#xff0c;我们学习了Java网络编程的相关知识。今天&#xff0c;让我们深入探讨Java反射机制&#xff0c;了解如何…

Aurora 64b/66bIP核学习

本文作为在学习使用aurora IP核的道路上&#xff0c;找到的一些对该IP讲解比较详细的资料&#xff0c;记录下来&#xff0c;便于日后翻阅&#xff0c;温故知新。 Aurora IP的特点 Aurora 协议在 2002 年由 Xilinx 公司首次提出&#xff0c;是由Xilinx提供的一个开源、免费的链…

树叶分类竞赛(Baseline)以及kaggle的GPU使用

树叶分类竞赛(Baseline)-kaggle的GPU使用 文章目录 树叶分类竞赛(Baseline)-kaggle的GPU使用竞赛的步骤代码实现创建自定义dataset定义data_loader模型定义超参数训练模型预测和保存结果 kaggle使用 竞赛的步骤 本文来自于Neko Kiku提供的Baseline&#xff0c;感谢大佬提供代码…

服务器作业(2)

架设一台NFS服务器&#xff0c;并按照以下要求配置 关闭防火墙 [rootlocalhost ~]# systemctl stop firewalld [rootlocalhost ~]# setenforce 0 配置文件设置&#xff1a; [rootlocalhost ~]# vim /etc/exports 1、开放/nfs/shared目录&#xff0c;供所有用户查询资料 共享…

014:无人机遥控器操作

摘要&#xff1a;本文详细介绍了无人机遥控器及其相关操作。首先&#xff0c;解释了油门、升降舵、方向舵和副翼的概念、功能及操作方式&#xff0c;这些是控制无人机飞行姿态的关键部件。其次&#xff0c;介绍了美国手、日本手和中国手三种不同的操作模式&#xff0c;阐述了遥…

Redis的持久化以及性能管理

目录 一、Redis持久化概述 1.什么是Redis持久化 2.持久化方式 3.RDB持久化 3.1概念 3.2触发条件 3.3执行流程 3.4启动时加载 4. AOF持久化 4.1概念 4.2启动AOF 4.3执行流程 4.4启动时加载 5.RDB和AOF的优缺点 二、Redis性能管理 1.查看Redis内存使用 2…

什么是JS的垃圾回收机制?

在JavaScript中&#xff0c;垃圾回收&#xff08;Garbage Collection&#xff0c;简称GC&#xff09;是一种自动内存管理机制。它的主要任务是识别并回收不再被使用的对象&#xff0c;以释放内存空间。以下是关于JavaScript垃圾回收机制的详细解释&#xff1a; 标记清除算法 …

Java项目实战II基于Java+Spring Boot+MySQL的高校办公室行政事务管理系统(源码+数据库+文档)

目录 一、前言 二、技术介绍 三、系统实现 四、文档参考 五、核心代码 六、源码获取 全栈码农以及毕业设计实战开发&#xff0c;CSDN平台Java领域新星创作者&#xff0c;专注于大学生项目实战开发、讲解和毕业答疑辅导。获取源码联系方式请查看文末 一、前言 在高等教育…

HTB:PermX[WriteUP]

目录 连接至HTB服务器并启动靶机 1.How many TCP ports are listening on PermX? 使用nmap对靶机TCP端口进行开放扫描 2.What is the default domain name used by the web server on the box? 使用curl访问靶机80端口 3.On what subdomain of permx.htb is there an o…

nginx安装ssl模块教程

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 一、openssl是什么&#xff1f;二、ssl证书免费申请地址三、安装步骤1.nginx安装ssl模块 总结 一、openssl是什么&#xff1f; OpenSSL 不仅是一个独立的工具包,它…

在Vue和OpenLayers中使用移动传感器实现飞机航线飞行模拟

项目实现的核心代码 项目概述 该项目的目标是使用Vue.js作为前端框架&#xff0c;结合OpenLayers用于地图显示&#xff0c;实时获取来自手机传感器的数据&#xff08;如经纬度、高度、速度&#xff09;来模拟飞机在地图上的飞行轨迹。整体架构如下&#xff1a; Vue.js 用于构建…

分析 SQL 语句的一般步骤

analyse-sql 数据库的性能调优是一个很大的话题。但是对于开发人员来讲&#xff0c;掌握一些常用的 SQL 优化手段却不是什么难事。 从本章节开始&#xff0c;将连载总结常用的适合于开发人员的 SQL 优化手段与大家分享。 要想解决性能优化的问题&#xff0c;首先要想办法发现哪…

数据库基础(2) . 安装MySQL

0.增加右键菜单选项 添加 管理员cmd 到鼠标右键 运行 reg文件 在注册表中添加信息 这样在右键菜单中就有以管理员身份打开命令行的选项了 1.获取安装程序 网址: https://dev.mysql.com/downloads/mysql/ 到官网下载MySQL8 的zip包, 然后解压 下载后的包为: mysql-8.0.16-…

文心一言 VS 讯飞星火 VS chatgpt (383)-- 算法导论24.5 3题

三、对引理 24.10 的证明进行改善&#xff0c;使其可以处理最短路径权重为 ∞ ∞ ∞ 和 − ∞ -∞ −∞ 的情况。引理 24.10(三角不等式)的内容是&#xff1a;设 G ( V , E ) G(V,E) G(V,E) 为一个带权重的有向图&#xff0c;其权重函数由 w : E → R w:E→R w:E→R 给出&…

深度学习基础知识-损失函数

目录 1. 均方误差&#xff08;Mean Squared Error, MSE&#xff09; 2. 平均绝对误差&#xff08;Mean Absolute Error, MAE&#xff09; 3. Huber 损失 4. 交叉熵损失&#xff08;Cross-Entropy Loss&#xff09; 5. KL 散度&#xff08;Kullback-Leibler Divergence&…