当前位置: 首页 > news >正文

elementui表单验证,数据层级过深验证失效

先看示例代码,代码为模拟动态获取表单数据,然后动态添加rules验证规则,示例表单内输入框绑定form内第四层:

<template><el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"><el-form-item:label="'name'+index"v-for="(item,index) in 5":key="index":prop="'name' + index"><el-input v-model="form.data.top.nameList['name'+index]"></el-input></el-form-item><el-form-item><el-button type="primary" @click="submitForm">立即创建</el-button></el-form-item></el-form>
</template><script>
export default {data() {return {form: {data: {top: {nameList: {}}}},rules: {}};},created() {for (let i = 0; i < 5; i++) {this.rules["name" + i] = [{ required: true, message: "请输入活动名称", trigger: "blur" },{ min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }];}},methods: {submitForm() {console.log(this.rules)console.log(this.form)this.$refs.ruleForm.validate(valid => {if (valid) {console.log('验证通过');} else {return false;}});}}
};
</script>

效果如下:

可以看到验证规则已经绑定到了输入框,但验证规则却是失效的

点一下按钮看看表单内容和rules的内容,像是没问题的

想要实现验证,需要修改标签内prop属性与rules内属性名。改动如下

:prop="'name' + index" //原
:prop="'data.top.nameList.name' + index" //改后this.rules["name" + i] = [{ required: true, message: "请输入活动名称", trigger: "blur" },{ min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
]; //原this.rules["data.top.nameList.name" + i] = [{ required: true, message: "请输入活动名称", trigger: "blur" },{ min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
]; //改后

全部代码如下:

<template><el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"><el-form-item:label="'name'+index"v-for="(item,index) in 5":key="index":prop="'data.top.nameList.name' + index" //修改了这里><el-input v-model="form.data.top.nameList['name'+index]"></el-input></el-form-item><el-form-item><el-button type="primary" @click="submitForm">立即创建</el-button></el-form-item></el-form>
</template><script>
export default {data() {return {form: {data: {top: {nameList: {}}}},rules: {}};},created() {for (let i = 0; i < 5; i++) {this.rules["data.top.nameList.name" + i] = [ //修改了这里{ required: true, message: "请输入活动名称", trigger: "blur" },{ min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }];}},methods: {submitForm() {console.log(this.rules)console.log(this.form)this.$refs.ruleForm.validate(valid => {if (valid) {console.log('验证通过');} else {return false;}});}}
};
</script>

 看一看功能:

点击按钮看一下表单和rules的内容:

总结:将prop绑定为form对象下直到要验证的数据,rules中属性名保证和prop相同。

相关文章:

elementui表单验证,数据层级过深验证失效

先看示例代码&#xff0c;代码为模拟动态获取表单数据&#xff0c;然后动态添加rules验证规则&#xff0c;示例表单内输入框绑定form内第四层&#xff1a; <template><el-form :model"form" :rules"rules" ref"ruleForm" label-width&…...

HTTPS与HTTP:区别及安全性对比

目录 一、基础概念 二、安全性对比 1. 加密传输 2. 身份验证 3. 数据完整性 4. 端口 5. 浏览器展示方式 三、使用场景与性能 1. 使用场景 2. 性能开销 四、成本与维护 五、搜索引擎优化&#xff08;SEO&#xff09; 六、案例分析 七、隐私保护与中间人攻击 八、…...

中国石油大学(华东)自动评教工具(涵盖爬虫的基础知识,适合练手)

我开发了一个用于自动评教的工具&#xff0c;大家可以试着用用&#xff0c;下面是链接。 https://github.com/restrain11/auto_teachingEvaluate 可以点个星吗&#xff0c;感谢&#xff01;&#x1fae1; 以下是我在开发过程中学到的知识 以及 碰到的部分问题 目录 动态爬虫和静…...

蓝桥杯备考:二叉树详解

二叉树的概念和相关术语 二叉树的定义&#xff1a;每个结点度至多为2的树&#xff0c;叫二叉树 二叉树的子树有左右之分不可以随意颠倒顺序&#xff0c;也就是说二叉树是有序树 二叉树根结点左子树右子树 满二叉树&#xff1a;就是把每一层的结点都铺满 满二叉树的性质&#xf…...

大模型微调介绍-Prompt-Tuning

提示微调入门 NLP四范式 第一范式 基于「传统机器学习模型」的范式&#xff0c;如TF-IDF特征朴素贝叶斯等机器算法. 第二范式 基于「深度学习模型」的范式&#xff0c;如word2vec特征LSTM等深度学习算法&#xff0c;相比于第一范式&#xff0c;模型准确有所提高&#xff0c…...

《机器学习》——PCA降维

文章目录 PCA降维简介什么是主成分分析&#xff1f; 主成分的选择与维度确定降维的数学过程PCA降维求解步骤降维后的效果和应用场景中的优势PCA模型API参数Attributes属性PCA对象的方法 PCA降维实例导入所需库导入数据集对数据进行处理创建PCA模型并训练查看训练结果对降维数据…...

【Rust练习】28.use and pub

练习题来自&#xff1a;https://practice-zh.course.rs/crate-module/use-pub.html 1 使用 use 可以将两个同名类型引入到当前作用域中&#xff0c;但是别忘了 as 关键字. use std::fmt::Result; use std::io::Result;fn main() {}利用as可以将重名的内容取别名&#xff1a;…...

VUE学习笔记1__创建VUE实例

核心步骤 <div id"app"><!-- 这里存放渲染逻辑代码 --><h1>{{ msg }}</h1><a href"#">{{count}}</a> </div><!-- 引入在线的开发版本核心包 --> <!-- 引入核心包后全局可使用VUE构造函数 --> <…...

不用PLC和板卡,一台电脑就可以控制伺服

1、前言 大家好&#xff01;我是付工。 EtherCAT是运动控制领域使用最广泛的总线通信协议之一。 如果我们只有一台电脑&#xff0c;能不能直接控制EtherCAT总线伺服呢&#xff1f; 这个是完全可以的。 我们可以在电脑上安装实时运行环境&#xff0c;从而实现对伺服电机的总…...

vue2制作长方形容器,正方形网格散点图,并且等比缩放拖动

需求&#xff1a;有个长方形的容器&#xff0c;但是需要正方形的网格线&#xff0c;网格线是等比缩放的并且可以无线拖动的&#xff0c;并且添加自适应缩放和动态切换&#xff0c;工具是plotly.js,已完成功能如下 1.正方形网格 2.散点分组 3.自定义悬浮框的数据 4.根据窗口大小…...

鸿蒙-页面和自定义组件生命周期

页面生命周期&#xff0c;即被Entry装饰的组件生命周期&#xff0c;提供以下生命周期接口&#xff1a; onPageShow&#xff1a;页面每次显示时触发一次&#xff0c;包括路由过程、应用进入前台等场景。onPageHide&#xff1a;页面每次隐藏时触发一次&#xff0c;包括路由过程、…...

AD域学习

AD域学习 AD域一、什么是AD域二、概念三、疑问四、内容4.1、AD域的功能 五、应用实践 AD域 一、什么是AD域 AD域&#xff08;Active Directory Domain&#xff09;是微软Windows网络中的一个概念&#xff0c;它是一种计算机网络的形式&#xff0c;其中所有用户账户、计算机、…...

leetcode 3066. 超过阈值的最少操作数 II 中等

给你一个下标从 0 开始的整数数组 nums 和一个整数 k 。 一次操作中&#xff0c;你将执行&#xff1a; 选择 nums 中最小的两个整数 x 和 y 。将 x 和 y 从 nums 中删除。将 min(x, y) * 2 max(x, y) 添加到数组中的任意位置。 注意&#xff0c;只有当 nums 至少包含两个元…...

使用 WPF 和 C# 绘制覆盖网格的 3D 表面

此示例展示了如何使用 C# 代码和 XAML 绘制覆盖有网格的 3D 表面。示例使用 WPF 和 C# 将纹理应用于三角形展示了如何将纹理应用于三角形。此示例只是使用该技术将包含大网格的位图应用于表面。 在类级别&#xff0c;程序使用以下代码来定义将点的 X 和 Z 坐标映射到 0.0 - 1.…...

大数据学习(34)-mapreduce详解

&&大数据学习&& &#x1f525;系列专栏&#xff1a; &#x1f451;哲学语录: 承认自己的无知&#xff0c;乃是开启智慧的大门 &#x1f496;如果觉得博主的文章还不错的话&#xff0c;请点赞&#x1f44d;收藏⭐️留言&#x1f4dd;支持一下博主哦&#x1f91…...

源码编译安装httpd 2.4

方法一&#xff1a; 1、下载 Apache 源代码&#xff1a; wget https://archive.apache.org/dist/httpd/httpd-2.4.54.tar 2、解压源代码&#xff1a; tar -zxvf httpd-2.4.54.tar.gz 3、进入源代码目录&#xff1a; cd httpd-2.4.54 4、安装开发工具组&#xff1a; yum…...

1.15寒假作业

web&#xff1a;nss靶场ez_ez_php 打开环境&#xff0c;理解代码 使用个体传参的方法&#xff0c;首先代码会检查file参数的前三个字符是不是php&#xff0c;如果是就输出nice&#xff0c;然后用include函数包含file&#xff0c;绕过不是则输出hacker&#xff0c;如果没有file…...

Java中private和static同时使用会出现什么情况?

引言 这几天在学习单例设计模式&#xff08;后面会出一期包含23种设计模式介绍的博客&#xff09;的时候发现了一段代码 private static Single single; 当时我就在想&#xff0c;这个private和static一起用的话外界想要访问这个成员变量到底是能不能访问到呢&#xff1f;当…...

vue倒计时组件封装,根据每个循环项的倒计时是否结束添加新类名。

1.创建countdown.vue文件&#xff1a; <template><p style"font-size: 10px">{{time}}</p> </template> <script>export default{data () {return {time : ,flag : false}},mounted () {let time setInterval(() > {if (this.fla…...

nvim 打造成可用的IDE(2)

上一个 文章写的太长了&#xff0c; 后来再写东西 就一卡一卡的&#xff0c;所以新开一个。 主要是关于 bufferline的。 之前我的界面是这样的。 这个图标很不舒服有。 后来发现是在这里进行配置。 我也不知道&#xff0c;这个配置 我是从哪 抄过来的。 测试结果&#xff1…...

Spring Boot教程之五十五:Spring Boot Kafka 消费者示例

Spring Boot Kafka 消费者示例 Spring Boot 是 Java 编程语言中最流行和使用最多的框架之一。它是一个基于微服务的框架&#xff0c;使用 Spring Boot 制作生产就绪的应用程序只需很少的时间。Spring Boot 可以轻松创建独立的、生产级的基于 Spring 的应用程序&#xff0c;您可…...

目标检测跟踪中的Siamese孪生网络与普通卷积网络(VGG、ResNet)有什么区别?

1、什么是Siamese网络&#xff1f; Siamese网络又叫孪生网络&#xff0c;是一种特殊的神经网络架构&#xff0c;由一对&#xff08;或多对&#xff09;共享参数的子网络组成&#xff0c;用于学习输入样本之间的相似性或关系。最早在 1994 年由 Bromley 等人提出&#xff0c;最…...

AIGC时代 | 探索AI Agent的奥秘:四种设计模式引领未来智能趋势

AIGC时代 | 探索AI Agent的奥秘&#xff1a;四种设计模式引领未来智能趋势 引言 随着人工智能&#xff08;AI&#xff09;技术的飞速发展&#xff0c;AI Agent作为新一代的智能代理&#xff0c;正在引领工作流程的革新。AI Agent&#xff0c;即人工智能代理&#xff0c;是一种…...

PyTorch框架——基于深度学习YOLOv5神经网络水果蔬菜检测识别系统

基于深度学习YOLOv5神经网络水果蔬菜检测识别系统&#xff0c;其能识别的水果蔬菜有15种&#xff0c;# 水果的种类 names: [黑葡萄, 绿葡萄, 樱桃, 西瓜, 龙眼, 香蕉, 芒果, 菠萝, 柚子, 草莓, 苹果, 柑橘, 火龙果, 梨子, 花生, 黄瓜, 土豆, 大蒜, 茄子, 白萝卜, 辣椒, 胡萝卜,…...

【redis】redis-cli命令行工具的使用

redis-cli命令行工具是一个功能强大的Redis客户端&#xff0c;它允许用户与Redis数据库进行交互和管理。 以下是一些常用参数的使用说明&#xff1a; 基本连接参数 -h, --host <hostname>&#xff1a;指定要连接的Redis服务器的主机名或IP地址。如果未指定&#xff0c;…...

阿里云-Centos9-安装Docker-配置镜像拉取加速地址-开机自启

阿里云-Centos9-安装Docker-配置镜像拉取加速地址-开机自启 更新镜像源安装环境配置加速卸载安装pull拉取加速开机自启 更新镜像源 # dnf update&#xff1a;更新所有已安装的软件包。 sudo dnf update -y安装环境 # 安装环境 # yum-utils&#xff1a;提供了管理yum仓库的工具。…...

Grails应用http.server.requests指标数据采集问题排查及解决

问题 遇到的问题&#xff1a;同一个应用&#xff0c;Spring Boot(Java)和Grails(Groovy)混合编程&#xff0c;常规的Spring Controller&#xff0c;可通过Micromete Pushgateway&#xff0c; 采集到http.server.requests指标数据&#xff0c;注意下面的指标名称是点号&#…...

使用 WPF 和 C# 将纹理应用于三角形

此示例展示了如何将纹理应用于三角形,以使场景比覆盖纯色的场景更逼真。以下是为三角形添加纹理的基本步骤。 创建一个MeshGeometry3D对象。像往常一样定义三角形的点和法线。通过向网格的TextureCoordinates集合添加值来设置三角形的纹理坐标。创建一个使用想要显示的纹理的 …...

【vue3项目使用 animate动画效果】

vue3项目使用 animate动画效果 前言一、下载或安装npm 安装 二、引入组件三、复制使用四、完整使用演示总结 前言 提示&#xff1a;干货篇&#xff0c;不废话&#xff0c;点赞收藏&#xff0c;用到会后好找藕~ 点击这里&#xff0c;直接看官网哦 &#x1f449; 官网地址&#…...

C#中颜色的秘密

颜色的秘密: 颜色Color是一个调色板, 所有颜色都是由透明度Alpha,红Red,绿Green,蓝Blue按不同比例调色混合而成,如果不考虑透明度Alpha,颜色共有256*256*25616777216种 ColorARGB A,R,G,B都为byte型[8位],因此可以用整体的32个整数[Int32]来表示一种颜色 Color 所属命名空…...

Spring AI 从入门到实践

​Spring AI 从入门到实践 1.什么是Spring AI 2.使用Spring Boot&Spring AI快速构建AI应用程序 3.ChatClient&Chat Model简化与AI模型的交互 4.Spring AI Prompt:与大模型进行有效沟通 5.结构化输出大模型响应 6.实战:AI聊天机器人 Ben技术站关注Java技术&#x…...

服务器一次性部署One API + ChatGPT-Next-Web

服务器一次性部署One API ChatGPT-Next-Web One API ChatGPT-Next-Web 介绍One APIChatGPT-Next-Web docker-compose 部署One API ChatGPT-Next-WebOpen API docker-compose 配置ChatGPT-Next-Web docker-compose 配置docker-compose 启动容器 后续配置 同步发布在个人笔记服…...

milvus过滤功能

数据格式: [{"id": 0, "vector": [0.3580376395471989, -0.6023495712049978, 0.18414012509913835, -0.26286205330961354, 0.9029438446296592], "color": "pink_8682", "likes": 165},{"id": 1, "vecto…...

JavaScript系列(25)--性能优化技术详解

JavaScript性能优化技术详解 ⚡ 今天&#xff0c;让我们深入探讨JavaScript的性能优化技术。掌握这些技术对于构建高性能的JavaScript应用至关重要。 性能优化基础 &#x1f31f; &#x1f4a1; 小知识&#xff1a;JavaScript性能优化涉及多个方面&#xff0c;包括代码执行效…...

基于vite+vue3+mapbox-gl从零搭建一个项目

下面是基于 Vite、Vue 3 和 Mapbox GL 从零搭建一个项目的完整步骤&#xff0c;包括环境搭建、依赖安装、配置和代码示例。 1. 初始化项目 首先&#xff0c;使用 Vite 快速创建一个 Vue 3 项目&#xff1a; npm create vuelatest vue3-mapboxgl --template vue cd vue3-mapbo…...

驱动开发系列33 - Linux Graphics mesa Intel驱动介绍

一:概述 mesa 中的 Intel 驱动体系是为支持 Intel GPU 提供图形 API 的硬件实现部分,主要包括 OpenGL、Vulkan等图形接口,Intel驱动实现整体上分为四层: 第一层:API 层, 实现 OpenGL 和 Vulkan 接口, src/mesa/main、src/vulkan。 第二层:驱动层,实现 OpenGL 和 Vulkan…...

【git】-3 github创建远程仓库,上传自己的项目,下载别人的项目

一、如何使用Github 1、创建远程仓库 2、使用github拉取/推送代码 克隆仓库 向远程仓库推送代码-git push 二、上传我们自己的项目到github 方法一&#xff1a;直接上传 方法二&#xff1a;使用git命令 方法三&#xff1a; 将仓库拉取到本地上传 三、下载别人的项目 …...

[Qt]常用控件介绍-多元素控件-QListWidget、QTableWidget、QQTreeWidget

目录 1.多元素控件介绍 2.ListWidget控件 属性 核心方法 核心信号 细节 Demo&#xff1a;编辑日程 3.TableWidget控件 核心方法 QTableWidgetItem核心信号 QTableWidgetItem核心方法 细节 Demo&#xff1a;编辑学生信息 4.TreeWidget控件 核心方法 核心信号…...

_STM32关于CPU超频的参考_HAL

MCU: STM32F407VET6 官方最高稳定频率&#xff1a;168MHz 工具&#xff1a;STM32CubeMX 本篇仅仅只是提供超频&#xff08;默认指的是主频&#xff09;的简单方法&#xff0c;并未涉及STM32超频极限等问题。原理很简单&#xff0c;通过设置锁相环的倍频系数达到不同的频率&am…...

Flink链接Kafka

一、基于 Flink 的 Kafka 消息生产者 Kafka 生产者的创建与配置&#xff1a; 代码通过 FlinkKafkaProducer 创建 Kafka 生产者&#xff0c;用于向 Kafka 主题发送消息。Flink 执行环境的配置&#xff1a; 配置了 Flink 的检查点机制&#xff0c;确保消息的可靠性&#xff0c;支…...

Maven 配置本地仓库

步骤 1&#xff1a;修改 Maven 的 settings.xml 文件 找到你的 Maven 配置文件 settings.xml。 Windows: C:\Users\<你的用户名>\.m2\settings.xmlLinux/macOS: ~/.m2/settings.xml 打开 settings.xml 文件&#xff0c;找到 <localRepository> 标签。如果没有该标…...

【PHP】双方接口通信校验服务

请求方 使用 ApiAuthService::buildUrl($domain, [terminal => 1, ts => time()]); //http://域名/adminapi/login/platformLogin?sign=F7FE8A150DEC18BE8A71C5059742C81A&terminal=1&ts=1736904841接收方 $getParams = $this->request->get();$validate…...

mac 安装docker

1、下载docker 进入 /Applications/Docker.app/Contents/MacOS/Docker Desktop.app/Contents/Resources目录 把app.asar 文件备份 将下载的中文包复制进去。修改成一样的名字 [汉化包下载地址](https://github.com/asxez/DockerDesktop-CN)...

ANSYS Fluent学习笔记(七)求解器四部分

16.亚松弛因子 Controls面板里面设置&#xff0c;它能够稳定计算的过程。如果采用常规的迭代算法可能结果就会发生振荡的情况。采用亚松驰因子可以有助于残差的稳定。 他的取值范围是0-1&#xff0c;0代表没有亚松驰&#xff0c;1表示物理量变化很快&#xff0c;一般情况下取…...

【微服务】面试 3、 服务监控 SkyWalking

微服务监控的原因 问题定位&#xff1a;在微服务架构中&#xff0c;客户端&#xff08;如 PC 端、APP 端、小程序等&#xff09;请求后台服务需经过网关再路由到各个微服务&#xff0c;服务间可能存在多链路调用。当某一微服务挂掉时&#xff0c;在复杂的调用链路中难以迅速确定…...

llamafactory使用8张昇腾910b算力卡lora微调训练qwen2-72b大模型

说明 我需要在昇腾服务器上对Qwen2-72B大模型进行lora微调&#xff0c;改变其自我认知。 我的环境下是8张910B1卡。显存约512GB。 准备&#xff1a;安装llamafactory 请参考官方方法安装llamafactory&#xff1a;https://github.com/hiyouga/LLaMA-Factory 特别强调下&…...

在服务器上增加新网段IP的路由配置

在服务器上增加新网段IP的路由配置 前提条件步骤一:检查当前路由表步骤二:添加新路由步骤三:验证新路由步骤四:持久化路由配置脚本示例结论在网络管理中,路由配置是一项基本且重要的任务。它决定了数据包在网络中的传输路径。本文将详细介绍如何在服务器上增加新的路由配置…...

2Spark Core

2Spark Core 1.RDD 详解1) 为什么要有 RDD?2) RDD 是什么?3) RDD 主要属性 2.RDD-API1) RDD 的创建方式2) RDD 的算子分类3) Transformation 转换算子4) Action 动作算子 3. RDD 的持久化/缓存4. RDD 容错机制 Checkpoint5. RDD 依赖关系1) 宽窄依赖2) 为什么要设计宽窄依赖 …...

【ANGULAR网站开发】初始环境搭建(SpringBoot)

1. 初始化SpringBoot 1.1 创建SpringBoot项目 清理spring-boot-starter-test&#xff0c;有需要的可以留着 1.2 application.properties 将application.properties改为yaml&#xff0c;个人习惯问题&#xff0c;顺便设置端口8888&#xff0c;和前端设置的一样 server:por…...

Vue 页面布局组件-Vuetify、Semantic

在现代 Web 开发中&#xff0c;用户体验是关键&#xff0c;尤其是当我们利用 Vue.js 框架构建用户友好的界面时。今天&#xff0c;我们将深入探讨如何使用 Vuetify 和 Semantic UI 来创建高效、美观的页面布局组件。通过这项技术&#xff0c;你将能够为用户呈现一个流畅的交互体…...