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表单验证,数据层级过深验证失效
先看示例代码,代码为模拟动态获取表单数据,然后动态添加rules验证规则,示例表单内输入框绑定form内第四层: <template><el-form :model"form" :rules"rules" ref"ruleForm" label-width&…...
HTTPS与HTTP:区别及安全性对比
目录 一、基础概念 二、安全性对比 1. 加密传输 2. 身份验证 3. 数据完整性 4. 端口 5. 浏览器展示方式 三、使用场景与性能 1. 使用场景 2. 性能开销 四、成本与维护 五、搜索引擎优化(SEO) 六、案例分析 七、隐私保护与中间人攻击 八、…...
中国石油大学(华东)自动评教工具(涵盖爬虫的基础知识,适合练手)
我开发了一个用于自动评教的工具,大家可以试着用用,下面是链接。 https://github.com/restrain11/auto_teachingEvaluate 可以点个星吗,感谢!🫡 以下是我在开发过程中学到的知识 以及 碰到的部分问题 目录 动态爬虫和静…...
蓝桥杯备考:二叉树详解
二叉树的概念和相关术语 二叉树的定义:每个结点度至多为2的树,叫二叉树 二叉树的子树有左右之分不可以随意颠倒顺序,也就是说二叉树是有序树 二叉树根结点左子树右子树 满二叉树:就是把每一层的结点都铺满 满二叉树的性质…...
大模型微调介绍-Prompt-Tuning
提示微调入门 NLP四范式 第一范式 基于「传统机器学习模型」的范式,如TF-IDF特征朴素贝叶斯等机器算法. 第二范式 基于「深度学习模型」的范式,如word2vec特征LSTM等深度学习算法,相比于第一范式,模型准确有所提高,…...
《机器学习》——PCA降维
文章目录 PCA降维简介什么是主成分分析? 主成分的选择与维度确定降维的数学过程PCA降维求解步骤降维后的效果和应用场景中的优势PCA模型API参数Attributes属性PCA对象的方法 PCA降维实例导入所需库导入数据集对数据进行处理创建PCA模型并训练查看训练结果对降维数据…...
【Rust练习】28.use and pub
练习题来自:https://practice-zh.course.rs/crate-module/use-pub.html 1 使用 use 可以将两个同名类型引入到当前作用域中,但是别忘了 as 关键字. use std::fmt::Result; use std::io::Result;fn main() {}利用as可以将重名的内容取别名:…...
VUE学习笔记1__创建VUE实例
核心步骤 <div id"app"><!-- 这里存放渲染逻辑代码 --><h1>{{ msg }}</h1><a href"#">{{count}}</a> </div><!-- 引入在线的开发版本核心包 --> <!-- 引入核心包后全局可使用VUE构造函数 --> <…...
不用PLC和板卡,一台电脑就可以控制伺服
1、前言 大家好!我是付工。 EtherCAT是运动控制领域使用最广泛的总线通信协议之一。 如果我们只有一台电脑,能不能直接控制EtherCAT总线伺服呢? 这个是完全可以的。 我们可以在电脑上安装实时运行环境,从而实现对伺服电机的总…...
vue2制作长方形容器,正方形网格散点图,并且等比缩放拖动
需求:有个长方形的容器,但是需要正方形的网格线,网格线是等比缩放的并且可以无线拖动的,并且添加自适应缩放和动态切换,工具是plotly.js,已完成功能如下 1.正方形网格 2.散点分组 3.自定义悬浮框的数据 4.根据窗口大小…...
鸿蒙-页面和自定义组件生命周期
页面生命周期,即被Entry装饰的组件生命周期,提供以下生命周期接口: onPageShow:页面每次显示时触发一次,包括路由过程、应用进入前台等场景。onPageHide:页面每次隐藏时触发一次,包括路由过程、…...
AD域学习
AD域学习 AD域一、什么是AD域二、概念三、疑问四、内容4.1、AD域的功能 五、应用实践 AD域 一、什么是AD域 AD域(Active Directory Domain)是微软Windows网络中的一个概念,它是一种计算机网络的形式,其中所有用户账户、计算机、…...
leetcode 3066. 超过阈值的最少操作数 II 中等
给你一个下标从 0 开始的整数数组 nums 和一个整数 k 。 一次操作中,你将执行: 选择 nums 中最小的两个整数 x 和 y 。将 x 和 y 从 nums 中删除。将 min(x, y) * 2 max(x, y) 添加到数组中的任意位置。 注意,只有当 nums 至少包含两个元…...
使用 WPF 和 C# 绘制覆盖网格的 3D 表面
此示例展示了如何使用 C# 代码和 XAML 绘制覆盖有网格的 3D 表面。示例使用 WPF 和 C# 将纹理应用于三角形展示了如何将纹理应用于三角形。此示例只是使用该技术将包含大网格的位图应用于表面。 在类级别,程序使用以下代码来定义将点的 X 和 Z 坐标映射到 0.0 - 1.…...
大数据学习(34)-mapreduce详解
&&大数据学习&& 🔥系列专栏: 👑哲学语录: 承认自己的无知,乃是开启智慧的大门 💖如果觉得博主的文章还不错的话,请点赞👍收藏⭐️留言📝支持一下博主哦ᾑ…...
源码编译安装httpd 2.4
方法一: 1、下载 Apache 源代码: wget https://archive.apache.org/dist/httpd/httpd-2.4.54.tar 2、解压源代码: tar -zxvf httpd-2.4.54.tar.gz 3、进入源代码目录: cd httpd-2.4.54 4、安装开发工具组: yum…...
1.15寒假作业
web:nss靶场ez_ez_php 打开环境,理解代码 使用个体传参的方法,首先代码会检查file参数的前三个字符是不是php,如果是就输出nice,然后用include函数包含file,绕过不是则输出hacker,如果没有file…...
Java中private和static同时使用会出现什么情况?
引言 这几天在学习单例设计模式(后面会出一期包含23种设计模式介绍的博客)的时候发现了一段代码 private static Single single; 当时我就在想,这个private和static一起用的话外界想要访问这个成员变量到底是能不能访问到呢?当…...
vue倒计时组件封装,根据每个循环项的倒计时是否结束添加新类名。
1.创建countdown.vue文件: <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)
上一个 文章写的太长了, 后来再写东西 就一卡一卡的,所以新开一个。 主要是关于 bufferline的。 之前我的界面是这样的。 这个图标很不舒服有。 后来发现是在这里进行配置。 我也不知道,这个配置 我是从哪 抄过来的。 测试结果࿱…...
Spring Boot教程之五十五:Spring Boot Kafka 消费者示例
Spring Boot Kafka 消费者示例 Spring Boot 是 Java 编程语言中最流行和使用最多的框架之一。它是一个基于微服务的框架,使用 Spring Boot 制作生产就绪的应用程序只需很少的时间。Spring Boot 可以轻松创建独立的、生产级的基于 Spring 的应用程序,您可…...
目标检测跟踪中的Siamese孪生网络与普通卷积网络(VGG、ResNet)有什么区别?
1、什么是Siamese网络? Siamese网络又叫孪生网络,是一种特殊的神经网络架构,由一对(或多对)共享参数的子网络组成,用于学习输入样本之间的相似性或关系。最早在 1994 年由 Bromley 等人提出,最…...
AIGC时代 | 探索AI Agent的奥秘:四种设计模式引领未来智能趋势
AIGC时代 | 探索AI Agent的奥秘:四种设计模式引领未来智能趋势 引言 随着人工智能(AI)技术的飞速发展,AI Agent作为新一代的智能代理,正在引领工作流程的革新。AI Agent,即人工智能代理,是一种…...
PyTorch框架——基于深度学习YOLOv5神经网络水果蔬菜检测识别系统
基于深度学习YOLOv5神经网络水果蔬菜检测识别系统,其能识别的水果蔬菜有15种,# 水果的种类 names: [黑葡萄, 绿葡萄, 樱桃, 西瓜, 龙眼, 香蕉, 芒果, 菠萝, 柚子, 草莓, 苹果, 柑橘, 火龙果, 梨子, 花生, 黄瓜, 土豆, 大蒜, 茄子, 白萝卜, 辣椒, 胡萝卜,…...
【redis】redis-cli命令行工具的使用
redis-cli命令行工具是一个功能强大的Redis客户端,它允许用户与Redis数据库进行交互和管理。 以下是一些常用参数的使用说明: 基本连接参数 -h, --host <hostname>:指定要连接的Redis服务器的主机名或IP地址。如果未指定,…...
阿里云-Centos9-安装Docker-配置镜像拉取加速地址-开机自启
阿里云-Centos9-安装Docker-配置镜像拉取加速地址-开机自启 更新镜像源安装环境配置加速卸载安装pull拉取加速开机自启 更新镜像源 # dnf update:更新所有已安装的软件包。 sudo dnf update -y安装环境 # 安装环境 # yum-utils:提供了管理yum仓库的工具。…...
Grails应用http.server.requests指标数据采集问题排查及解决
问题 遇到的问题:同一个应用,Spring Boot(Java)和Grails(Groovy)混合编程,常规的Spring Controller,可通过Micromete Pushgateway, 采集到http.server.requests指标数据,注意下面的指标名称是点号&#…...
使用 WPF 和 C# 将纹理应用于三角形
此示例展示了如何将纹理应用于三角形,以使场景比覆盖纯色的场景更逼真。以下是为三角形添加纹理的基本步骤。 创建一个MeshGeometry3D对象。像往常一样定义三角形的点和法线。通过向网格的TextureCoordinates集合添加值来设置三角形的纹理坐标。创建一个使用想要显示的纹理的 …...
【vue3项目使用 animate动画效果】
vue3项目使用 animate动画效果 前言一、下载或安装npm 安装 二、引入组件三、复制使用四、完整使用演示总结 前言 提示:干货篇,不废话,点赞收藏,用到会后好找藕~ 点击这里,直接看官网哦 👉 官网地址&#…...
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性能优化技术详解 ⚡ 今天,让我们深入探讨JavaScript的性能优化技术。掌握这些技术对于构建高性能的JavaScript应用至关重要。 性能优化基础 🌟 💡 小知识:JavaScript性能优化涉及多个方面,包括代码执行效…...
基于vite+vue3+mapbox-gl从零搭建一个项目
下面是基于 Vite、Vue 3 和 Mapbox GL 从零搭建一个项目的完整步骤,包括环境搭建、依赖安装、配置和代码示例。 1. 初始化项目 首先,使用 Vite 快速创建一个 Vue 3 项目: 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 方法一:直接上传 方法二:使用git命令 方法三: 将仓库拉取到本地上传 三、下载别人的项目 …...
[Qt]常用控件介绍-多元素控件-QListWidget、QTableWidget、QQTreeWidget
目录 1.多元素控件介绍 2.ListWidget控件 属性 核心方法 核心信号 细节 Demo:编辑日程 3.TableWidget控件 核心方法 QTableWidgetItem核心信号 QTableWidgetItem核心方法 细节 Demo:编辑学生信息 4.TreeWidget控件 核心方法 核心信号…...
_STM32关于CPU超频的参考_HAL
MCU: STM32F407VET6 官方最高稳定频率:168MHz 工具:STM32CubeMX 本篇仅仅只是提供超频(默认指的是主频)的简单方法,并未涉及STM32超频极限等问题。原理很简单,通过设置锁相环的倍频系数达到不同的频率&am…...
Flink链接Kafka
一、基于 Flink 的 Kafka 消息生产者 Kafka 生产者的创建与配置: 代码通过 FlinkKafkaProducer 创建 Kafka 生产者,用于向 Kafka 主题发送消息。Flink 执行环境的配置: 配置了 Flink 的检查点机制,确保消息的可靠性,支…...
Maven 配置本地仓库
步骤 1:修改 Maven 的 settings.xml 文件 找到你的 Maven 配置文件 settings.xml。 Windows: C:\Users\<你的用户名>\.m2\settings.xmlLinux/macOS: ~/.m2/settings.xml 打开 settings.xml 文件,找到 <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面板里面设置,它能够稳定计算的过程。如果采用常规的迭代算法可能结果就会发生振荡的情况。采用亚松驰因子可以有助于残差的稳定。 他的取值范围是0-1,0代表没有亚松驰,1表示物理量变化很快,一般情况下取…...
【微服务】面试 3、 服务监控 SkyWalking
微服务监控的原因 问题定位:在微服务架构中,客户端(如 PC 端、APP 端、小程序等)请求后台服务需经过网关再路由到各个微服务,服务间可能存在多链路调用。当某一微服务挂掉时,在复杂的调用链路中难以迅速确定…...
llamafactory使用8张昇腾910b算力卡lora微调训练qwen2-72b大模型
说明 我需要在昇腾服务器上对Qwen2-72B大模型进行lora微调,改变其自我认知。 我的环境下是8张910B1卡。显存约512GB。 准备:安装llamafactory 请参考官方方法安装llamafactory: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,有需要的可以留着 1.2 application.properties 将application.properties改为yaml,个人习惯问题,顺便设置端口8888,和前端设置的一样 server:por…...
Vue 页面布局组件-Vuetify、Semantic
在现代 Web 开发中,用户体验是关键,尤其是当我们利用 Vue.js 框架构建用户友好的界面时。今天,我们将深入探讨如何使用 Vuetify 和 Semantic UI 来创建高效、美观的页面布局组件。通过这项技术,你将能够为用户呈现一个流畅的交互体…...