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

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

 <div v-for="(item,index) in form.readings">
            <el-form-item label="上次读数"  > <!--prop="scds"-->
              <el-input
                v-model.trim="item.scds"
                placeholder="请输入上次读数"
                clearable
                size="small"
                :disabled=" !form.sccbjlId || index !=0"
                @input="upchang()"
              />
            </el-form-item>
            <el-form-item label="上次读数时间">
              <el-date-picker
                v-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-input
                v-model.trim="item.readings"
                placeholder="请输入本次读数"
                clearable
                size="small"
              />
            </el-form-item>
            <el-form-item label="本次读数时间" :prop="'readings.'+index+'.readingTime'":rules="bcdsRules.readingTime">
              <el-date-picker
                v-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-input
                v-model.trim="item.price"
                placeholder="请输入单价"
                clearable
                size="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.mfbz.cn/a/499007.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Pytorch入门实战 P4-猴痘图片,精确度提升

目录 一、前言&#xff1a; 二、前期准备&#xff1a; 1、设备查看 2、导入收集到的数据集 3、数据预处理 4、划分数据集&#xff08;8:2&#xff09; 5、加载数据集 三、搭建神经网络 四、训练模型 1、设置超参数 2、编写训练函数 3、编写测试函数 4、正式训练 …

LabVIEW智能降噪系统

LabVIEW智能降噪系统 随着噪声污染问题的日益严重&#xff0c;寻找有效的降噪技术变得尤为关键。介绍了一种基于LabVIEW平台开发的智能降噪系统&#xff0c;该系统能够实时采集环境噪声&#xff0c;并通过先进的信号处理技术实现主动降噪&#xff0c;从而有效改善生活和工作环…

kubernetes(K8S)学习(五):K8S进阶(Lifecycle......偏理论)

K8S进阶&#xff08;Lifecycle......偏理论&#xff09; 一、Pod进阶学习之路1.1 Lifecycle1.2 重启策略1.3 静态Pod1.4 健康检查1.5 ConfigMap1.6 Secret1.7 指定Pod所运行的Node 二、Controller进阶学习之路2.1 Job & CronJob2.2 StatefulSet2.3 DaemonSet2.4 Horizontal…

vue3 渲染一个后端返回的图片字段渲染、table表格内放置图片

一、后端直接返回图片url 当图片字段接口直接返回的是图片url&#xff0c;可以直接放到img标签上 <img v-if"thumbLoader" class"r-image-loader-thumb" :src"resUrl" /> 二、当图片字段接口直接返回的是图片Id 那么就需要去拼一下图片…

改Jenkins版本号

旧服务器迁移到新&#xff0c;打包版本号更新 Jenkins.instance.getItemByFullName("双机热备").updateNextBuildNumber(65)

知识蒸馏到底怎么蒸?

1知识蒸馏简介 定义&#xff1a;知识蒸馏代表将知识从大模型向小模型传输的过程。 作用&#xff1a;可以用于模型压缩和训练加速 手段。 2基于响应的知识&#xff08;Response-Based Knowledge&#xff09; 基于响应的知识一般指的是神经元的响应&#xff0c;即教师模型的最…

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

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

IDEA2021.1.2破解无限试用30天破解IDEA

安装包下载 IDEA安装包&#xff1a;Other Versions - IntelliJ IDEA破解包下载&#xff1a;文件 密码:c033 开始激活 IDEA 2021.1.3 运行, 中间会先弹出一个注册框&#xff0c;我们勾选 Evaluate for free, 点击 Evaluate&#xff0c; 先试用30天: 注意&#xff0c;如果没有…

Tomcat项目创建 以及 在IDEA当中集成Tomcat

一: 有关Tomcat的WEB项目创建 TOMCAT项目的创建有两种方式, 第一种是利用骨架进行创建, 第二种是利用填补进行相应的创建, 不适用骨架进行创建 ,在这里主要聊第二种 (使用IDEA版本为2023) 1. 创建MAVEN项目, 非骨架形式 2.在相应的pom文件当中设置打包方式 为 war包的打包形…

LeetCode:70爬楼梯 C语言

假设你正在爬楼梯。需要 n 阶你才能到达楼顶。 每次你可以爬 1 或 2 个台阶。你有多少种不同的方法可以爬到楼顶呢&#xff1f; 示例 1&#xff1a; 输入&#xff1a;n 2 输出&#xff1a;2 解释&#xff1a;有两种方法可以爬到楼顶。 1. 1 阶 1 阶 2. 2 阶 示例 2&#x…

敏捷教练CSM认证考了有没有用,谁说了算?

敏捷教练CSM证书是近年来备受关注的一项证书&#xff0c;它被认为可以提升敏捷开发团队的管理能力和项目执行效率。然而&#xff0c;对于这个证书的价值和含金量&#xff0c;人们的观点却不尽相同。那么&#xff0c;CSM证书到底有没有用&#xff0c;谁来说了算呢&#xff1f; 首…

java调用百度AI识别身份证照片获取信息

java调用百度AI识别身份证照片获取信息 一、前期准备1、创建账号2、获得API Key 和Secret Key 二、使用步骤1、依赖2、代码 一、前期准备 1、创建账号 2、获得API Key 和Secret Key 二、使用步骤 http调用工具用了hutool工具库 1、依赖 <!--百度身份证识别AI依赖-->&l…

论文阅读-Policy Optimization for Continuous Reinforcement Learning

摘要 我们研究了连续时间和空间环境下的强化学习( RL )&#xff0c;其目标是一个具有折扣的无限时域&#xff0c;其动力学由一个随机微分方程驱动。基于连续RL方法的最新进展&#xff0c;我们提出了占用时间(专门针对一个折现目标)的概念&#xff0c;并展示了如何有效地利用它…

qt学习第三天,qt设计师的第一个简单案例

3月25&#xff0c;应用qt设计师&#xff0c;手动设计界面形状 ​ 如何启动qt设计师&#xff0c;找到对应的安装地点&#xff0c;对应你自己安装的pyside6或其他qt的安装路径来找 ​ 应用qt设计师的优点是不用敲代码然后慢慢调节框框大小&#xff0c;位置等、可以直接修改…

知识图谱构建三要素:实体、关系与属性技术与实战全解析

目录 一、知识图谱三要素简介实体&#xff08;Entity&#xff09;的重要性关系&#xff08;Relationship&#xff09;的作用属性&#xff08;Attribute&#xff09;的应用 二、实体&#xff08;Entity&#xff09;理论介绍实体的概念细节实体的分类实体识别的技术细节实体识别的…

1.Mysql基础入门—MySQL-mysql 8.0.11安装教程

1.Mysql基础入门—MySQL-mysql 8.0.11安装教程 摘要个人简介下载Mysql安装Mysql配置环境变量 摘要 MySQL 8.0.11的安装过程涉及几个关键步骤&#xff0c;首先访问MySQL官方网站下载页面&#xff0c;选择操作系统相对应的MySQL版本进行下载。对于Windows用户&#xff0c;启动下…

读写锁 应用/原理

一、ReentrantReadWriteLock 让 读-读 操作可并发&#xff0c;写-写、写-读、读-写不可并发 (一)、基本使用 class DataContainer {private Object data;private ReentrantReadWriteLock rw new ReentrantReadWriteLock();private ReentrantReadWriteLock.ReadLock r rw.r…

Qt扫盲-QAssisant 集成其他qch帮助文档

QAssisant 集成其他qch帮助文档 一、概述二、Cmake qch例子1. 下载 Cmake.qch2. 添加qch1. 直接放置于Qt 帮助的目录下2. 在 QAssisant中添加 一、概述 QAssisant是一个很好的帮助文档&#xff0c;他提供了供我们在外部添加新的 qch帮助文档的功能接口&#xff0c;一般有两中添…

软件开发订制:使用LabVIEW软件的10大理由

1.通过软件增加处理能力及灵活性   使用基于计算机进行数据采集设备的最大优势之一是您可以使用软件来定制您的测试系统的功能和可视化特性&#xff0c;以满足您的应用需求。人工测试代价高&#xff0c;速度慢&#xff0c;且容易出错&#xff0c;而基于软件定义的系统可以更快…

景联文科技高质量大模型训练数据汇总!

3月25日&#xff0c;2024年中国发展高层论坛年会上&#xff0c;国家数据局局长刘烈宏在“释放数据要素价值&#xff0c;助力可持续发展”的演讲中表示&#xff0c;中国10亿参数规模以上的大模型数量已超100个。 当前&#xff0c;国内AI大模型发展仍面临诸多困境。其中&#xff…
最新文章