对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.mzph.cn/news/778831.shtml

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

相关文章

LocalDateTime与时间戳转换

LocalDateTime与时间戳转换 1. 为什么LocalDateTime转时间戳需要时区2. 工具类 1. 为什么LocalDateTime转时间戳需要时区 讲道理&#xff0c;不管在什么时区&#xff0c;系统获取当前时间的时间戳都是一样的【因为时间戳指的是自 1970 年1月1日以来的秒数&#xff0c;所以无论…

使用ai智能写作场景之gpt整理资料,如何ai智能写作整理资料

Ai智能写作助手&#xff1a;Ai智能整理资料小助手 Ai智能整理资料小助手可试用3天&#xff01; 通俗的解释一下怎么用ChatGPT来进行资料整理&#xff1a; 搜寻并获取指定数量的特定领域文章&#xff1a; 想像你在和我说话一样&#xff0c;告诉我你想要多少篇关于某个话题的文…

在 Windows 11 上安装 MongoDB

MongoDB 是一个流行的 NoSQL 数据库&#xff0c;它提供了灵活的数据存储方案&#xff0c;而 MongoDB Compass 则是一个可视化管理工具&#xff0c;可以更轻松地与 MongoDB 数据库交互和管理。在本文中&#xff0c;我们将介绍如何在 Windows 11 上安装 MongoDB&#xff0c;并配置…

ESCTF-Web赛题WP

0x01-初次见面-怦然心动:your name? 随便输入一个字 根据提示可以看到 我们需要看源代码 直接 搜索 secret 关键字或者 ESCTF flag ESCTF{K1t0_iS_S0_HAPPy} 0x02-小k的请求 更安全的传参 post 参数为ESCTF 值为 love 自己的ip 同时还有个要求 是需要从度娘转过来 https://www…

QMT量化策略实盘(二)交易触发定时器run_time

上一篇分享中&#xff0c;介绍了QMT量化实盘中最常用的下单函数passorder&#xff0c;和它主要的参数。 如果再结合一个交易触发函数&#xff0c;就可以实现简单的量化交易策略了&#xff01;比如下面的代码可以实现&#xff1a; 在集合竞价期间以指定价买入中信证券100股 #c…

<el-table>设置一列为固定字段,其他列为循环生成

<el-table :data"tableData" style"width: 100%"><el-table-columnprop"name"label"固定字段名":formatter"formatter"></el-table-column><el-table-columnv-for"(item, index) in wordsColumns…

从小白-入门-进阶-高阶,四个阶段详细讲解单片机学习路线!

大家好&#xff0c;今天给大家介绍从小白-入门-进阶-高阶&#xff0c;四个阶段详细讲解单片机学习路线&#xff01;&#xff0c;文章末尾附有分享大家一个资料包&#xff0c;差不多150多G。里面学习内容、面经、项目都比较新也比较全&#xff01;可进群免费领取。 单片机学习路…

简单线程池的实现

线程池的代码可以写的很复杂&#xff0c;这里就稍微简单一些 首先来看一下线程池的原则&#xff0c;下面的大框是服务器&#xff0c;而在服务器中维护一个任务队列。 然后在server中预先创建一批线程&#xff0c;这批线程和任务队列合在一起只用向外界提供一个入队列的接口。 …

cesium vue 绘制标记实体(撒点),监听鼠标左击事件

添加实体 const viewer new Cesium.Viewer(cesiumContainer, {})viewer.entities.add()查看实体 const viewer new Cesium.Viewer(cesiumContainer, {}) const billboard viewer.entities.add({...})viewer.zoomTo(billboard)删除实体 根据实体删除 if (billboard.value…

【热门话题】Yarn:新一代JavaScript包管理器的安装与使用

&#x1f308;个人主页: 鑫宝Code &#x1f525;热门专栏: 闲话杂谈&#xff5c; 炫酷HTML | JavaScript基础 ​&#x1f4ab;个人格言: "如无必要&#xff0c;勿增实体" 文章目录 Yarn&#xff1a;新一代JavaScript包管理器的安装与使用引言一、Yarn的安装1. 系…

MFC(一)搭建空项目

安装MFC支持库 创建空白桌面程序 项目相关设置 复制以下代码 // mfc.h #pragma once #include <afxwin.h>class MyApp : public CWinApp { public:virtual BOOL InitInstance(); };class MyFrame : public CFrameWnd { public:MyFrame();// 消息映射机制DECLARE_…

基于springboot+vue+Mysql的财务管理系统

开发语言&#xff1a;Java框架&#xff1a;springbootJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包&#xff1a;…

【spring】AbstractApplicationContext 的refresh() 方法学习

上一篇我们一起学习了【spring】FileSystemXmlApplicationContext 类学习 AbstractApplicationContext 的refresh() 方法介绍 AbstractApplicationContext的refresh()方法仍然是整个Spring应用程序上下文初始化的核心流程入口。大体上的刷新生命周期依然保持一致。 refresh(…

【IEEE ACCESS】论文发表记录

官网&#xff1a;IEEE Access&#xff1a;多学科开放获取期刊 期刊水平&#xff1a; IEEE Access - 中国科学院文献情报中心期刊分区表升级版 (fenqubiao.com) 时间轴&#xff1a; 第一次提交&#xff1a;2024 年 1 月 17 日 第一次结果&#xff1a;2024 年 2 月 27 日 拒…

为什么网页提示SSL证书不信任?

随着传统行业迅速融入互联网&#xff0c;信息安全问题逐渐凸显&#xff0c;企业商业机密和国家信息安全面临网络威胁。为应对此挑战&#xff0c;国内企业已积极部署SSL证书&#xff0c;强化信息安全防护&#xff0c;确保业务安全稳定运行。 在企业部署SSL证书的过程中&#xf…

网络服务练习题

综合练习&#xff1a;请给 openlab 搭建 web 网站 网站需求&#xff1a; 1. 基于域名 www.openlab.com 可以访问网站内容为 welcome to openlab!!! 2. 给该公司创建三个子界面分别显示学生信息&#xff0c;教学资料 和缴费网站&#xff0c;基于&#xff0c; www.openlab.c…

面向对象:继承

文章目录 一、什么叫继承&#xff1f;二、单继承三、多继承3.1多继承的各种情况3.1.1一般情况3.1.1特殊情况&#xff08;菱形继承&#xff09; 四、菱形继承引发的问题4.1 问题1:数据冗余4.2 问题2:二义性&#xff08;无法确定到底是访问哪个&#xff09; 五、虚拟继承解决菱形…

Java毕业设计-基于springboot开发的原创歌曲分享平台-毕业论文+答辩PPT(附源代码+演示视频)

文章目录 前言一、毕设成果演示&#xff08;源代码在文末&#xff09;二、毕设摘要展示1、开发说明2、需求分析3、系统功能结构 三、系统实现展示1、平台功能模块2、后台功能模块2.1管理员功能模块2.2用户功能模块 四、毕设内容和源代码获取总结 Java毕业设计-基于springboot开…

威联通安装Kafka

最近在学习 Kafka 的知识&#xff0c;遇到一些问题网上搜到的信息不全。想要在本地安装一个 Kafka 进行验证&#xff0c;想到了之前买的 Nas 就开始折腾。 用 Docker 的方式安装 Kafka 现在的 Nas 很多都支持 Docker&#xff0c;我买的也支持。威联通的 Docker 叫 Container S…

基于vue的MOBA类游戏攻略分享平台的设计与实现|Springboot+Vue+ Mysql+Java+ B/S结构(可运行源码+数据库+设计文档)

本项目包含可运行源码数据库LW&#xff0c;文末可获取本项目的所有资料。 推荐阅读100套最新项目持续更新中..... 2024年计算机毕业论文&#xff08;设计&#xff09;学生选题参考合集推荐收藏&#xff08;包含Springboot、jsp、ssmvue等技术项目合集&#xff09; 目录 1. …