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

Element UI 表单验证规则动态失效问题

Element 版本:v2.15.3

问题背景

如下代码所示:有一个上传文件的 input 组件,在更新的时候,如果不上传文件表示不更新,如果要更新则点击 「重新上传」按钮将上传组件显示出来

<el-form ref="form" :model="form" :rules="rules" label-width="80px"><!-- 这个字段不是必须的没有写 prop --><el-form-item v-if="!updateDocument" label="文档"><el-button @click="updateDocument = true">重新上传</el-button><base-tips margin-left="15px">如需变更请重新上传文档</base-tips></el-form-item><!-- 要更新的话:这个字段要求必须,写 prop  --><el-form-item v-if="updateDocument" label="文档" prop="document"><input:accept="supportFilesType"ref="documentFile" type="file" @change="documentFileChange"/></el-form-item>
</el-form>

在这里插入图片描述
也就是如上图:不更新的话,该字段不是必须的,提交的时候就不会被校验,如果更新的话,就要让这个字段为必填项。

上述代码:从页面上看是正常的,有前面那个红色的 * 号,但是在提交的时候,并没有触发验证。

解决方案

首先:查看表单组件的信息,最终在 Field 这个属性下发现了问题

console.log(this.$refs.form)
  1. 进入页面的时候,Field 中显示的字段数量不包含 document,因为进入页面默认是不更新
  2. 切换到更新状态,Field 中的字段数量并没有变更,那么问题就出现在这里了

这种情况的最主要原因是:表单组件没有触发重新渲染,解决方案靠谱的有:

  1. 在 el-form-item 上增加 key 属性,也就是 vue 中的 key
  2. 在 el-form-item 上手动写上指定的,rules
<!-- 写上 prop,并且手动指定 rules,由于需要不校验该字段,设置一个规则 required:false  -->
<el-form-item v-if="!updateDocument" label="文档" prop="document" :rules="[{required:false}]"><el-button @click="updateDocument = true">重新上传</el-button><base-tips margin-left="15px">如需变更合同请重新上传文档</base-tips>
</el-form-item><!-- 写上 prop,由于需要验证该字段,直接指向原来的 rules 中的规则-->
<el-form-item v-if="updateDocument" label="文档" prop="document" :rules="rules.document"><input:accept="supportFilesType"ref="documentFile" type="file" @change="documentFileChange"/>
</el-form-item>

相关文章:

Element UI 表单验证规则动态失效问题

Element 版本&#xff1a;v2.15.3 问题背景 如下代码所示&#xff1a;有一个上传文件的 input 组件&#xff0c;在更新的时候&#xff0c;如果不上传文件表示不更新&#xff0c;如果要更新则点击 「重新上传」按钮将上传组件显示出来 <el-form ref"form" :mode…...

多线程并发篇

目录 1、线程生命周期 2、线程创建方式 3、Callable 与 Future 4、如何停止一个正在运行的线程 5、notify() 和 notifyAll() 的区别 6、sleep() 和 wait() 的区别 7、start() 和 run() 的区别 8、interrupted 和 isInterruptedd 的区别 9、CyclicBarrier 和 Count…...

pycharm-2023.1 closing project window stuck

pycharm-2023.1 closing project window stuck 问题描述 pycharm 切换项目/重启&#xff0c;一直卡在 closing project 原因分析 PyCharm 2023.1 issue - closing project window stuck (PyPIPackageUtil.lambda$parsePyPIListFromWeb) 解决方案 升级 pycharm 到 2023.3py…...

tkinter编写的打开csdn程序

目录 鬼畜tkinter简介程序代码解析现成总结鬼畜 看看你每次打开CSDN: 1.开机 2.打开浏览器 3.打开CSDN 4.等待 5.完成 我: 1.开机 2.点击%%%按钮 3.等待 4.完成 简单了不知道多少倍 上面的纯属鬼畜,下面正文!!! tkinter tkinter是一个用于创建图形用户界面(GUI)的Py…...

Vue3.2组件如何封装,以弹窗组件的封装为例

以前一直想&#xff0c;每次封装一个弹窗组件的时候&#xff0c;一直特别复杂&#xff0c;父传子&#xff0c;子传父&#xff0c;各种来回绕&#xff0c;来回修改。 一直想如何才能更加简化&#xff0c;但是一直没时间&#xff0c;今天终于抽时间出来封装了一下 本次封装简化…...

Vue知识系列(5)每天10个小知识点

目录 系列文章目录Vue知识系列&#xff08;1&#xff09;每天10个小知识点Vue知识系列&#xff08;2&#xff09;每天10个小知识点Vue知识系列&#xff08;3&#xff09;每天10个小知识点Vue知识系列&#xff08;4&#xff09;每天10个小知识点 知识点41.vue常用基本指令有哪些…...

Java基础题08——数组(查找下标所对应的值)

给定一个整数数组&#xff0c;输入一个值 n &#xff0c;输出 n *在数组中的下标 **(*如果不存在输出 -1 ) 如&#xff1a;int[] arr {3, 2, 1, 4, 5}; 1 输入&#xff1a; 3 输出&#xff1a; 0 2. 输入&#xff1a; 6 输出&#xff1a; -1 int[] arr new int[]{3, 2, 1, 4,…...

LinkedList 源码分析

LinkedList 是一个基于双向链表实现的集合类。 LinkedList 插入和删除元素的时间复杂度 头部插入/删除&#xff1a;只需要修改头结点的指针即可完成插入/删除操作&#xff0c;因此时间复杂度为 O(1)。尾部插入/删除&#xff1a;只需要修改尾结点的指针即可完成插入/删除操作…...

跑步锻炼(蓝桥杯)

跑步锻练 题目描述 本题为填空题&#xff0c;只需要算出结果后&#xff0c;在代码中使用输出语句将所填结果输出即可。 小蓝每天都锻炼身体。 正常情况下&#xff0c;小蓝每天跑 1 千米。如果某天是周一或者月初&#xff08;1 日&#xff09;&#xff0c;为了激励自己&#x…...

【SLAM】视觉SLAM简介

【SLAM】视觉SLAM简介 task04 主要了解了SLAM的主流框架&#xff0c;清楚VSALM中间接法与直接法的主要区别在什么地方&#xff0c;其各自的优势是什么&#xff0c;了解前端与后端的关系是什么 1.什么是SLAM 2.VSALM中间接法与直接法的主要区别在什么地方&#xff0c;其各自的…...

Visual Studio2019报错

1- Visual Studio2019报错 错误 MSB8036 找不到 Windows SDK 版本 10.0.19041.0的解决方法 小伙伴们在更新到Visual Studio2019后编译项目时可能遇到过这个错误&#xff1a;“ 错误 MSB8036 找不到 Windows SDK 版本 10.0.19041.0的解决方法”&#xff0c;但是我们明明安装了该…...

ffplay源码解析-PacketQueue队列

包队列架构位置 对应结构体源码 MyAVPacketList typedef struct MyAVPacketList {AVPacket pkt; //解封装后的数据struct MyAVPacketList *next; //下一个节点int serial; //播放序列 } MyAVPacketList;PacketQueue typedef struct PacketQueue {MyAVPacketList …...

Flowable主要API介绍

1. ProcessEngine 负责与各个服务进行交互和管理流程的整个生命周期。 方法描述getName()close()startExecutors()启动所有流程引擎中的执行器。执行器用于处理流程实例的执行&#xff0c;在引擎启动时&#xff0c;执行器会自动运行并处理待办任务和定时任务。getRepositorySe…...

TensorFlow与pytorch特定版本虚拟环境的安装

TensorFlow与Python的版本对应&#xff0c;注意&#xff0c;一定要选择对应的版本&#xff0c;否则会让你非常痛苦&#xff0c;折腾很久搞不清楚原因。 建议使用国内镜像源安装 没有GPU后缀的就表示是CPU版本的&#xff0c;不加版本就是最新 pip install tensorflow -i https:…...

【SpringMVC】拦截器JSR303的使用

【SpringMVC】拦截器&JSR303的使用 1.1 什么是JSR3031.2 为什么使用JSR3031.3 常用注解1.4 Validated与Valid区别1.5 JSR快速入门1.5.2 配置校验规则# 1.5.3 入门案例二、拦截器2.1 什么是拦截器2.2 拦截器与过滤器2.3 应用场景2.4 拦截器快速入门2.5.拦截器链2.6登录案列权…...

Java - LambdaQueryWrapper 的常用方法

1、查看项目中是否导入mybatisPlus的jar包 2、servie 层和实现类要集成mybatisPlus service 继承IService<> 实现类中要继承IService的实现类ServiceImpl<mapper,实体类> 3、如果想要mapper中的一些方法&#xff0c;mapper 要继承BaseMapper<实体类> 4、在实…...

Selenium常见问题解析

1、元素定位失败&#xff1a; 在使用Selenium自动化测试时&#xff0c;最常见的问题之一是无法正确地定位元素&#xff0c;这可能导致后续操作失败。解决方法包括使用不同的定位方式&#xff08;如xpath、CSS selector、id等&#xff09;&#xff0c;等待页面加载完全后再进行…...

【npm】npm私有库的使用-绑定

注册npm账户 输入基本信息 验证 收一次性验证码 登录 本地绑定 全局绑定了其他的私有库 若要在专门发包的项目中&#xff0c;发包到自己的私有库&#xff0c;需要在项目文件夹中创建一个.npmrc文件 创建文件 可以直接在项目目录下输入touch .npmrc创建文件 文件内容 regi…...

spring seccurity OAuth 2.0授权服务器工作流程

一、客户端配置&#xff1a;在configure(ClientDetailsServiceConfigurer clients)方法中&#xff0c;配置了一个客户端&#xff0c;包括客户端标识符、客户端秘密、授权类型、授权范围和令牌有效期等信息。这个客户端表示某个应用程序或服务&#xff0c;它将向授权服务器请求访…...

【Tensorflow 2.12 电影推荐系统之排序模型】

Tensorflow 2.12 电影推荐系统之排序模型 学习笔记导入相关模块准备数据加载数据数据预处理获取词汇表构建模型定义评分排序模型定义损失函数以及模型评估指标定义完整的评分排序模型训练和评估创建排序模型实例缓存数据训练评估预测导出和加载模型结尾学习笔记 Tensorflow 2.1…...

边缘计算医疗风险自查APP开发方案

核心目标:在便携设备(智能手表/家用检测仪)部署轻量化疾病预测模型,实现低延迟、隐私安全的实时健康风险评估。 一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...

解锁数据库简洁之道:FastAPI与SQLModel实战指南

在构建现代Web应用程序时&#xff0c;与数据库的交互无疑是核心环节。虽然传统的数据库操作方式&#xff08;如直接编写SQL语句与psycopg2交互&#xff09;赋予了我们精细的控制权&#xff0c;但在面对日益复杂的业务逻辑和快速迭代的需求时&#xff0c;这种方式的开发效率和可…...

前端导出带有合并单元格的列表

// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...

系统设计 --- MongoDB亿级数据查询优化策略

系统设计 --- MongoDB亿级数据查询分表策略 背景Solution --- 分表 背景 使用audit log实现Audi Trail功能 Audit Trail范围: 六个月数据量: 每秒5-7条audi log&#xff0c;共计7千万 – 1亿条数据需要实现全文检索按照时间倒序因为license问题&#xff0c;不能使用ELK只能使用…...

UR 协作机器人「三剑客」:精密轻量担当(UR7e)、全能协作主力(UR12e)、重型任务专家(UR15)

UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中&#xff0c;UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化&#xf…...

Mac下Android Studio扫描根目录卡死问题记录

环境信息 操作系统: macOS 15.5 (Apple M2芯片)Android Studio版本: Meerkat Feature Drop | 2024.3.2 Patch 1 (Build #AI-243.26053.27.2432.13536105, 2025年5月22日构建) 问题现象 在项目开发过程中&#xff0c;提示一个依赖外部头文件的cpp源文件需要同步&#xff0c;点…...

如何在网页里填写 PDF 表格?

有时候&#xff0c;你可能希望用户能在你的网站上填写 PDF 表单。然而&#xff0c;这件事并不简单&#xff0c;因为 PDF 并不是一种原生的网页格式。虽然浏览器可以显示 PDF 文件&#xff0c;但原生并不支持编辑或填写它们。更糟的是&#xff0c;如果你想收集表单数据&#xff…...

Python Ovito统计金刚石结构数量

大家好,我是小马老师。 本文介绍python ovito方法统计金刚石结构的方法。 Ovito Identify diamond structure命令可以识别和统计金刚石结构,但是无法直接输出结构的变化情况。 本文使用python调用ovito包的方法,可以持续统计各步的金刚石结构,具体代码如下: from ovito…...

JS手写代码篇----使用Promise封装AJAX请求

15、使用Promise封装AJAX请求 promise就有reject和resolve了&#xff0c;就不必写成功和失败的回调函数了 const BASEURL ./手写ajax/test.jsonfunction promiseAjax() {return new Promise((resolve, reject) > {const xhr new XMLHttpRequest();xhr.open("get&quo…...

uniapp 字符包含的相关方法

在uniapp中&#xff0c;如果你想检查一个字符串是否包含另一个子字符串&#xff0c;你可以使用JavaScript中的includes()方法或者indexOf()方法。这两种方法都可以达到目的&#xff0c;但它们在处理方式和返回值上有所不同。 使用includes()方法 includes()方法用于判断一个字…...