对form表单对象中数组中的字段进行校验的方法

当对form表单中,数组readings中的字段进行校验时,prop和rules绑定要写成动态的,如下代码

 <div v-for="(item,index) in form.readings"><el-form-item label="上次读数"  > <!--prop="scds"--><el-inputv-model.trim="item.scds"placeholder="请输入上次读数"clearablesize="small":disabled=" !form.sccbjlId || index !=0"@input="upchang()"/></el-form-item><el-form-item label="上次读数时间"><el-date-pickerv-model.trim="item.scdssj"type="datetime"value-format="yyyy-MM-dd HH:mm:ss":disabled="!form.sccbjlId || index !=0"@change="checkTime(item.scdssj,item.readingTime,'scdsTime')"placeholder="选择日期"></el-date-picker> <!--:picker-options="scdssjOptions"--></el-form-item><span class="oprateBtn"  @click="addData" v-if="index===0"><em class="el-icon-plus"></em></span><span class="oprateBtn" @click="delData(item)" v-if="index !=0"><em class="el-icon-minus" ></em></span><el-form-item label="本次读数" class="jy" :prop="'readings.'+index+'.readings'":rules="bcdsRules.readings" ><el-inputv-model.trim="item.readings"placeholder="请输入本次读数"clearablesize="small"/></el-form-item><el-form-item label="本次读数时间" :prop="'readings.'+index+'.readingTime'":rules="bcdsRules.readingTime"><el-date-pickerv-model.trim="item.readingTime"type="datetime"value-format="yyyy-MM-dd HH:mm:ss"@change="checkTime(item.scdssj,item.readingTime,'bcdsTime')"placeholder="选择日期"></el-date-picker></el-form-item>  <!--:picker-options="readingTimeOptions"--><el-form-item label="单价(元/m³)" :prop="'readings.'+index+'.price'":rules="bcdsRules.price"><el-inputv-model.trim="item.price"placeholder="请输入单价"clearablesize="small"/></el-form-item></div>

如下图所圈代码
在这里插入图片描述
2.校验规则

bcdsRules: {readings: [{required: true, message: '请输入本次读数!', trigger: 'blur'},],readingTime: [{required: true, message: '请输入本次读数时间!', trigger: 'blur'},],price: [{required: true, message: '请输入单价!', trigger: 'blur'},],},

3.提交时的验证

this.$refs[form].validate((valid) => {if (valid) {/*验证通过逻辑*/}else{/*验证未通过逻辑*/}});

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

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

相关文章

R语言赋值符号<-、=、->、<<-、->>的使用与区别

R语言的赋值符号有&#xff1c;-、、-&#xff1e;、&#xff1c;&#xff1c;-、-&#xff1e;&#xff1e;六种&#xff0c;它们的使用与区别如下: <-’&#xff1a;最常用的赋值符号。它将右侧表达式的值赋给左侧的变量&#xff0c;像一个向左的箭头。例如&#xff0c;x …

GitLab更新失败(Ubuntu)

在Ubuntu下使用apt更新gitlab报错如下&#xff1a; An error occurred during the signature verification.The repository is not updated and the previous index files will be used.GPG error: ... Failed to fetch https://packages.gitlab.com/gitlab/gitlab-ee/ubuntu/d…

4、Cocos Creator 动画系统

Animation 组件是节点上的一个组件。Clip 动画剪辑就是一份动画的声明数据&#xff0c;我们将它挂载到 Animation 组件上&#xff0c;就能够将这份动画数据应用到节点上。 1、Clip 参数 1、sample&#xff1a;定义当前动画数据每秒的帧率&#xff0c;默认为 60&#xff0c;这…

【智能家居项目】RT-Thread版本——DHT11获取温湿度 | MQTT上传到服务器 | 服务器控制外设

&#x1f431;作者&#xff1a;一只大喵咪1201 &#x1f431;专栏&#xff1a;《智能家居项目》 &#x1f525;格言&#xff1a;你只管努力&#xff0c;剩下的交给时间&#xff01; 这篇文章中&#xff0c;本喵将使用RT-Thread Studio来实现这个智能家居的项目&#xff0c;最终…

Git_常用命令+代码冲突解决方案

文章目录 基本命令的使用查看git的当前版本初始化配置设置用户名及邮箱设置仓库的认证方式查看当前配置 创建仓库从远程服务器克隆仓库创建本地仓库 添加和提交文件工作区域和文件状态工作区域文件状态 查看文件状态及分支信息查看暂存区的内容添加文件提交文件查看提交日志回退…

vue3编写倒计时效果

说明&#xff1a;来自CSDN-问答板块&#xff0c;题主提问。 需求&#xff1a;如何通过表单控制倒计时开始时间&#xff0c;比如设定倒计时五分钟&#xff0c;循环几次&#xff0c;点击开始倒计时按钮&#xff0c;就让他从5分00秒&#xff0c;开始每秒减少&#xff0c;然后到0分…

Android 12中配置Selinux相关权限问题

1. 从logcat中过滤avc信息 avc: denied { read write } for comm"vendor.demo" name"ttyHW5" dev"tmpfs" ino610 scontextu:r:hal_gnss_default:s0 tcontextu:object_r:device:s0 tclasschr_file permissive1 avc: denied { ioctl } for comm&q…

【CTFshow 电子取证】套的签到题

&#x1f36c; 博主介绍&#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;我是 hacker-routing &#xff0c;很高兴认识大家~ ✨主攻领域&#xff1a;【渗透领域】【应急响应】 【Java、PHP】 【VulnHub靶场复现】【面试分析】 &#x1f389;点赞➕评论➕收…

模型 可编程思想

系列文章 分享 模型&#xff0c;了解更多&#x1f449; 模型_总纲目录。一切皆有可能。 1 可编程思想的应用 1.1 自动化智能投资顾问服务 传统的财富管理服务通常需要专业的财务顾问来为客户提供投资建议和资产管理服务。随着技术的发展&#xff0c;越来越多的投资者开始寻求…

mars3d兼容老版本Chrome 浏览器的附件参考记录

问题 源代码里面是es5的写法&#xff0c;怎么在浏览器上就转换了。 mars3d会将es5转es6吗&#xff1f; 看加载的Cesium.js源代码没有问题&#xff0c;但是模块里面的源代码已经转换了&#xff0c;再低版本浏览器上面会无法运行“Uncaught SyntaxError: Unexpected token ?”…

怎么在ADT里调整ABAP代码的格式

这个标题我实在是不咋会写。 具体就是&#xff0c;我在Eclipse里面写代码&#xff0c;但是不知道怎么调整好看的格式。 由于我是个ABAP渣渣&#xff0c;我查询了一下怎么调整。现分享如下&#xff1a; 首先在Eclipse里面选Windows下面的preferences,去把ABAP Development底下…

Docker进阶:Docker Swarm(集群搭建) —实现容器编排的利器

Docker进阶&#xff1a;Docker Swarm&#xff08;集群搭建&#xff09; —实现容器编排的利器 1、什么是Docker Swarm&#xff1f;2、Docker Swarm 与 Docker Compose的区别3、创建一个Swarm集群&#xff08;1-Manager&#xff0c;2-Worker&#xff09;1、资源准备2、初始化Swa…

AIGC重塑金融 | 大模型在金融行业的应用场景和落地路径

作者&#xff1a;林建明 来源&#xff1a;IT阅读排行榜 本文摘编自《AIGC重塑金融&#xff1a;AI大模型驱动的金融变革与实践》&#xff0c;机械工业出版社出版 目录 01 大模型在金融领域的 5 个典型应用场景 02 大模型在金融领域应用所面临的风险及其防范 03 AIGC 技术的科…

前端学习<二>CSS基础——09-CSS案例讲解:博雅互动

前言 CSS已经学了一些基础内容了&#xff0c;我们来讲解一个小案例吧。以博雅互动的官网首页举例。 版心 首页的版心如下&#xff1a; 这里我们要普及一个概念&#xff0c;叫“版心”。版心是页面中主要内容所在的区域。 比如说&#xff0c;网站左上角的logo&#xff0c;设计…

课堂练习:环境体验——Linux 文件操作命令

任务描述 第二个任务就是了解Linxu的文件查看命令&#xff0c;文件编辑基本命令。 相关知识 为了完成本关任务&#xff0c;你需要掌握&#xff1a; 1.文件查看命令。 2.文件编辑基本命令。 文件查看命令 我们要查看一些文本文件的内容时&#xff0c;要使用文本编辑器来查看…

【案例·增】一条insert语句批量插入多条记录

问题描述&#xff1a; 往MySQL中的数据库表中批量插入多条记录&#xff0c;可以使用 SQL 中的 ((), ()…)来处理 案例&#xff1a; INSERT INTO items(name,city,price,number,picture) VALUES(耐克运动鞋,广州,500,1000,003.jpg),(耐克运动鞋2,广州2,500,1000,002.jpg);规则…

jsp用户登录界面

主界面 <% page contentType"text/html;charsetUTF-8" language"java" %> <html> <head><meta charset"UTF-8"><title>登录界面</title> </head> <body bgcolor"#faebd7"> <form…

基于springboot大学生社团活动平台

摘 要 21世纪的今天&#xff0c;随着社会的不断发展与进步&#xff0c;人们对于信息科学化的认识&#xff0c;已由低层次向高层次发展&#xff0c;由原来的感性认识向理性认识提高&#xff0c;网络管理工作的重要性已逐渐被人们所认识&#xff0c;科学化的管理&#xff0c;使信…

二维数组定义 求和,最值,求平均值 JS

定义二维数组 二维数组的求和&#xff0c;最值&#xff0c;求平均值 Eg1 // 二维数组 const matrix [[1, 2, 3],[4, 5, 6],[7, 8, 9] ];// 初始化求和、最大值和最小值 let sum 0; let max Number.MIN_VALUE; let min Number.MAX_VALUE;// 遍历二维数组 for (let i 0; i…

智慧工厂视频汇聚与安全风险智能识别预警方案设计与功能

在智慧工厂的建设中&#xff0c;智能视频监控方案扮演着至关重要的角色。它不仅能够实现全方位、无死角的监控&#xff0c;还能够通过人工智能技术&#xff0c;实现智能识别、预警和分析&#xff0c;为工厂的安全生产和高效运营提供有力保障。 TSINGSEE青犀智慧工厂智能视频监…