对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://www.hqwc.cn/news/574009.html

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

相关文章

模板

一、函数模板 当我们在编写一个交换数据的函数时&#xff0c;不同的数据类型就要对应不同的交换函数类型&#xff0c;但其实这个交换函数的主体非常一致&#xff0c;为了解决这个问题就引入了模板&#xff1a; 如上图&#xff0c;template <class T>或template<tyoena…

Jenkins常用插件安装及全局配置

Jenkins常用插件安装及全局配置 前言 ​ Jenkins是一个流行的持续集成工具&#xff0c;通过安装适用的插件&#xff0c;可以扩展Jenkins的功能&#xff0c;并与其他工具和系统集成。本文将介绍一些常用的Jenkins插件以及安装和配置的步骤。通过安装和配置这些常用插件&#xf…

企业选购USB服务器,有哪些注意事项?

一、前言 随着信息技术的飞速发展&#xff0c;USB服务器在企业日常运营中的作用日益凸显。USB服务器不仅实现了远程USB设备的共享和管理&#xff0c;还提升了企业数据的安全性和管理效率。 然而&#xff0c;面对市场上琳琅满目的USB服务器产品&#xff0c;企业在选购时需要注…

寻求买金途径 国内的黄金交易所有哪些?

近期黄金价格在不断上涨&#xff0c;很多投资者都想找买黄金的机会。除了我们耳熟能详的现货黄金以外&#xff0c;投资者还想找一些国内的手段去购买黄金。他们想知道国内的黄金交易所有哪些&#xff0c;下面我们就来讨论一下。 说起国内的黄金交易所&#xff0c;我们首先要提到…

【Frida】【Android】04_Objection安装和使用

&#x1f6eb; 系列文章导航 【Frida】【Android】01_手把手教你环境搭建 https://blog.csdn.net/kinghzking/article/details/136986950【Frida】【Android】02_JAVA层HOOK https://blog.csdn.net/kinghzking/article/details/137008446【Frida】【Android】03_RPC https://bl…

2024年第八届深度学习技术国际会议(ICDLT 2024)即将召开!

2024年第八届深度学习技术国际会议&#xff08;ICDLT 2024&#xff09;将于 2024年7月15-17日 在 中国苏州召开&#xff0c; 由昆山杜克大学主办&#xff0c;为深度学习领域的研究人员&#xff0c;学者和科学家提供一个面对面交流自己的想法的机会。 会议官网&#xff1a; ICD…

生成编程语言流行度词云

文章目录 一、安装词云库二、TIOBE编程语言排行榜三、生成编程语言流行度词云(一)编写程序,实现功能(二)运行程序,查看结果一、安装词云库 执行命令:pip install wordcloud -i https://pypi.python.org/simple/ 二、TIOBE编程语言排行榜 2024年3月数据 三、生成编程语言…

EasyCVR在银河麒麟V10系统中启动异常及解决方法

安防监控视频平台EasyCVR具备较强的兼容性&#xff0c;它可以支持国标GB28181、RTSP/Onvif、RTMP&#xff0c;以及厂家的私有协议与SDK&#xff0c;如&#xff1a;海康ehome、海康sdk、大华sdk、宇视sdk、华为sdk、萤石云sdk、乐橙sdk等。平台兼容性强&#xff0c;支持Windows系…

Mac系统中使用VSCode安装C#开发环境进行编译调试

VSCode安装插件 C#c# Dev Kit 安装Mac版本 .net .net下载地址 查看安装结果 dotnet --list-sdksdotnet --info配置环境变量 open -e ~/.bash_profile添加如下内容 export DOTNET_ROOT/usr/local/share/dotnet export PATH$PATH:$DOTNET_ROOT终端重新加载配置文件 sourc…

还不知道jpg转png怎么转换?汇帮图片处理器教会你图片jpg转png

一&#xff0c;什么是图片jpg格式 jpg格式是一种比较常用的图片格式&#xff0c;这是一种经过压缩的、有损图片格式&#xff0c;其图片文件的后缀名主要是.jpg或者是.jpeg&#xff0c;jpg是由联合照片专家组开发并命名为“ISO10918-1”的。jpg本身只有描述如何将一个影像转换为…

【Java程序设计】【C00413】基于(JavaWeb)Springboot的小型医院医疗设备管理系统(含论文)

基于&#xff08;JavaWeb&#xff09;Springboot的小型医院医疗设备管理系统&#xff08;含论文&#xff09; 项目简介项目获取开发环境项目技术运行截图 博主介绍&#xff1a;java高级开发&#xff0c;从事互联网行业六年&#xff0c;已经做了六年的毕业设计程序开发&#xff…

数据库是怎么做到事务回滚的呢?

数据库实现事务回滚的原理涉及到数据库管理系统&#xff08;DBMS&#xff09;如何维护事务的一致性和持久性。 基本原理&#xff1a; ACID属性&#xff1a;事务的原子性&#xff08;Atomicity&#xff09;、一致性&#xff08;Consistency&#xff09;、隔离性&#xff08;Iso…