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

news2024/10/5 17:26:10

当对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.coloradmin.cn/o/1553801.html

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

相关文章

威联通安装Kafka

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

Ubuntu通过分用户进行多版本jdk配置

前言&#xff1a;本文内容为实操记录&#xff0c;仅供参考&#xff01; linux安装jdk参考&#xff1a;http://t.csdnimg.cn/TeECj 出发点&#xff1a;最新的项目需要用jdk17来编译&#xff0c;就把服务器的jdk版本升级到了17&#xff0c;但是有一些软件例如nexus还需要jdk1.8进…

【算法】第一篇 外观数列

导航 1. 简介2. 生成规则3. 代码演示1. 简介 外观数列是指数列中的每一项都是描述前一项的外观或者外貌。它通常由初始项开始,通过描述前一项的外观来生成下一项。外观数列最初由John H. Conway在1969年发现,并在他的著作《外貌数列和自动机理论》(The Construction of Look…

数据持久化第二课-C#高级特性

数据持久化第二课-C#高级特性 一.预习笔记 1.委托 1-1.委托的概述与声明 1-1-1&#xff1a;委托是一种引用类型&#xff0c;表示对具有特定参数列表和返回类型的方法的引用 1-1-2&#xff1a;可以通过委托实例调用方法。也可以使用委托将方法作为参数传递给其他方法 1-1-3…

《VulnHub》Lampião:1

title: 《VulnHub》Lampio&#xff1a;1 date: 2024-03-28 21:37:49 updated: 2024-03-28 21:37:50 categories: WriteUp&#xff1a;Cyber-Range excerpt: 关键技术&#xff1a;主机发现&#xff0c;端口扫描、服务探测、操作系统探测&#xff0c;对开放的端口探测漏洞&#x…

Vue-Electron配置及踩坑

前言 大道至简。太复杂的教程不看。 本篇将记述我创建好Vue3项目之后&#xff0c;用Electron把页面呈现出来的整个过程。会记录一些踩坑。 首先&#xff0c;Electron官网可以参考。但是它只是作出了一个普通的html结构该如何用Electron呈现出来&#xff0c;vue的配置有一些变…

防止恶意软件和网络攻击的简单贴士

如今&#xff0c;缺少互联网的生活是难以想象的。然而&#xff0c;互联网的匿名性导致了网络攻击和恶意软件很猖獗。恶意软件会损坏我们的设备、窃取个人数据&#xff0c;并导致金钱损失。因此&#xff0c;保护计算机免受这些威胁显得至关重要。 一、确保操作系统和软件是最新版…

【深度学习目标检测】二十五、基于深度学习的花卉分类系统-含数据集、GUI和源码(python,yolov8)

设计花卉分类系统的原因主要有以下几点&#xff1a; 组织和识别&#xff1a;分类系统有助于组织和识别大量的花卉品种。通过将花卉按照特定的标准进行分类&#xff0c;可以更容易地找到、识别和区分不同的花卉。 科学研究&#xff1a;分类系统为科学家提供了研究花卉的基础框架…

C++从入门到精通——缺省参数

缺省参数 前言一、缺省参数概念二、缺省参数分类位置参数的缺省参数全缺省参数半缺省参数 关键字参数的缺省参数函数指针的缺省参数lambda表达式 三、缺省参数的具体代码展示main.cpp 前言 缺省参数是在函数定义时指定的默认值&#xff0c;当调用函数时未提供该参数的值时&…

系统分析师-UML系列

系列文章目录 数学与经济管理 软件开发模型总结 文章目录 系列文章目录前言一、类图&#xff08;class diagram&#xff09;二、对象图&#xff08;object diagram&#xff09;三、构件图&#xff08;component diagram&#xff09;四、活动图&#xff08;activity diagram&am…

安卓调试桥ADB

Logcat 命令行工具 | Android Studio | Android Developers 什么是ADB ADB 全称为 Android Debug Bridge &#xff0c;是 Android SDK &#xff08;安卓的开发工具&#xff09;中的一个工具&#xff0c;起到调试桥的作用&#xff0c;是一个 客户端 - 服务器端程序 。其中 …

滑动窗口_水果成篮_C++

题目&#xff1a; 题目解析&#xff1a; fruits[i]表示第i棵树&#xff0c;这个fruits[i]所表示的数字是果树的种类例如示例1中的[1,2,1]&#xff0c;表示第一棵树 的种类是 1&#xff0c;第二个树的种类是2 第三个树的种类是1随后每一个篮子只能装一种类型的水果&#xff0c;我…

java项目:基于springboot实现的MBTI性格测试系统(分前后端)

一、项目介绍 本项目是一套基于springboot实现的个人性格测试系统&#xff0c;主要针对计算机相关专业的正在做bishe的学生和需要项目实战练习的Java学习者。 包含&#xff1a;项目源码、数据库脚本等&#xff0c;该项目可以直接作为bishe使用。 项目都经过严格调试&#xff0…

SpringCloudConfig 使用git搭建配置中心

一 SpringCloudConfig 配置搭建步骤 1.引入 依赖pom文件 引入 spring-cloud-config-server 是因为已经配置了注册中心 <dependencies><dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-config-server</…

1. Java概述

文章目录 1.Java语言概述1.1 Java介绍1.1.1 软件开发概述1.1.2 计算机语言1.1.3 Java 简史1.1.4 Java 技术体系平台1.1.5 Java在各领域的应用1.1.6 Java语言特点1.1.7 Java核心机制一-Java虚拟机1.1.8 Java核心机制二-垃圾回收1.1.9 Java开发工具 1.2 Java环境搭建1.2.1 JDK、J…

对接中泰极速行情 | DolphinDB XTP 插件使用教程

XTP 是中泰证券推出的高性能交易平台&#xff0c;专为专业投资者提供高速行情及交易系统&#xff0c;旨在提供优质便捷的市场接入通道。目前支持股票、基金、ETF、债券、期权等多个市场&#xff0c;可满足不同投资者需求。 基于 XTP 官方 C SDK&#xff0c;DolphinDB 开发了 X…

台灯护眼灯哪个牌子好?护眼灯十大品牌推荐

随着近视率的上升&#xff0c;越来越多的人开始重视眼睛健康&#xff0c;尤其是学生群体面临着巨大的学习压力。家长们也意识到良好的眼睛保护至关重要&#xff0c;开始关注护眼台灯的作用。在选择护眼灯时&#xff0c;家长们常常会陷入犹豫&#xff0c;不知道哪个品牌更可靠。…

书生·浦语大模型开源体系(一)论文精读笔记

&#x1f497;&#x1f497;&#x1f497;欢迎来到我的博客&#xff0c;你将找到有关如何使用技术解决问题的文章&#xff0c;也会找到某个技术的学习路线。无论你是何种职业&#xff0c;我都希望我的博客对你有所帮助。最后不要忘记订阅我的博客以获取最新文章&#xff0c;也欢…

C++:sizeof关键字(7)

sizeof用于统计数据所占用内存的大小 用法&#xff1a;sizeof( 变量名称 / 变量) 直接上代码&#xff0c;可以在让大家直观的感受到sizeof关键字的用法 #include<iostream> using namespace std;// 语法&#xff1a; sizeof&#xff08;数据类型|变量名&#xff09;// 用…

MYSQL数字函数实操宝典:场景化SQL语句一网打尽

​&#x1f308; 个人主页&#xff1a;danci_ &#x1f525; 系列专栏&#xff1a;《设计模式》《MYSQL应用》 &#x1f4aa;&#x1f3fb; 制定明确可量化的目标&#xff0c;坚持默默的做事。 MYSQL数字函数&#xff1a;不可不知的数据处理利器 文章目录 Part 1: 准备 &#x…