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

解决view-ui-plus 中表单验证不通过问题,select 组件开启multiple模式 总是提示错误,即使不验证也提示,有值也验证失败

😉 你好呀,我是爱编程的Sherry,很高兴在这里遇见你!我是一名拥有十多年开发经验的前端工程师。这一路走来,面对困难时也曾感到迷茫,凭借不懈的努力和坚持,重新找到了前进的方向。我的人生格言是——认准方向,坚持不懈,你终将迎来辉煌!欢迎关注我😁,我将在这里分享工作中积累的经验和心得,希望我的分享能够给你带来帮助。

报错描述

在使用view-ui-plus 的 Select组件开启多选后验证不通过,明明有选项报错,即使去掉验证也报错。
在这里插入图片描述

错误代码展示

const ruleValidate = reactive({targetSys: [{ required: false, message: '请选择', trigger: 'change' }]
});

错误原因分析

1. 确保 v-model 绑定的是一个数组
2. 设置正确的验证规则
3. 检查触发验证的方式是否正确

检查触发验证的方式是否正确,对于 Select 组件来说,通常是 change 事件

4. 检查 handleSelect 方法不会干扰验证

检查你的 handleSelect 方法是否有可能改变 formValidate.targetSys 或者其他可能影响验证状态的行为。确保它只做必要的事情,并且不会意外地清除或修改绑定的数据。

5. 确认 targetSysList 数据源无误

确保 targetSysList 提供了正确的选项数据,而且每个 Optionvaluelabel 都是有效的。

解决方案

经过分析后发现是验证规则问题,做一下修改:

rules: {targetSys: [{ required: true, type: 'array', message: '请选择至少一项', trigger: 'change' },{ type: 'array', min: 1, message: '最少选择一项', trigger: 'change' }]
}

设置 type: 'array' 来指定这是对数组类型的验证,并设置 min 属性来规定最小长度。

改完以后OK啦!

总结

表单验证会报错,除了没有值会通不过,格式错误,验证规则错误也会通不过,以后遇到这种明明有值,但还一直提示不通过,首先要去考虑是否是数据格式不匹配,或则验证规则不匹配,这个方法通用,不限制于任何框架。

相关文章:

解决view-ui-plus 中表单验证不通过问题,select 组件开启multiple模式 总是提示错误,即使不验证也提示,有值也验证失败

😉 你好呀,我是爱编程的Sherry,很高兴在这里遇见你!我是一名拥有十多年开发经验的前端工程师。这一路走来,面对困难时也曾感到迷茫,凭借不懈的努力和坚持,重新找到了前进的方向。我的人生格言是…...

复杂系统如何架构?

一张图看懂整个后端系统架构 下图展示了整个后端系统架构,包括数据库、应用服务器、API网关等,展示了它们是如何协同工作的。 一些小贴士 CDN是现代互联网架构中不可或缺的一部分,特别是对于那些需要向全球用户提供高性能和高可用性服务的网站…...

leetcode 3224. 使差值相等的最少数组改动次数

题目链接:3224. 使差值相等的最少数组改动次数 题目: 给你一个长度为 n 的整数数组 nums ,n 是偶数 ,同时给你一个整数 k 。 你可以对数组进行一些操作。每次操作中,你可以将数组中任一元素替换为 0 到 k 之间的任一…...

C# 小案例(IT资产管理系统)

开发工具:visual studio 2022 语言:C# 数据库:Sql Server 2008 页面展示 一、登录 二、主窗体 三、用户管理 四、资产管理 五、关于 Java版地址:基于若依开发物品管理系统(springbootvue)_若依物品管理系统-CSDN博客 Python版…...

React第十四节useState使用详解差异

一、useState() Hook 使用 useState视图更新用法 1、写法: import { useState } from react const [name, setName] useState(Andy)利用数组解构写法, 第一个参数是自定义的属性,用于初始化时候渲染,如上面代码,初…...

ubuntu 安装 docker详细教程

1. 准备工作 1.1系统更新 sudo apt update sudo apt upgrade -y 1.2 检查系统版本 lsb_release -a 2.安装docker 2.1. 安装依赖 sudo apt install apt-transport-https ca-certificates curl software-properties-common 2.2 添加docker 官方GPG密钥 curl -fsSL https…...

图书管理系统|Java|SSM|JSP| 前后端分离

【一】可以提供远程部署安装,包扩环境 【二】提供软件相关的安装包 【三】如果需要提供java入门资料可咨询 【技术栈】 1⃣️:架构: B/S、MVC 2⃣️:系统环境:Windowsh/Mac 3⃣️:开发环境:IDEA、JDK1.8、M…...

Apache Echarts和POI

目录 Apache ECharts 介绍 入门 绘制一个简单的图表 Apache POI 介绍 通过POI创建Excel文件并且写入文件内容 通过POI读取Excel文件中的内容 导出Excel表格 Apache ECharts 介绍 Apache ECharts 是一款基于 Javascript 的数据可视化图表库,提供直观&#xf…...

ubuntu下的chattts 学习8(结束):长文本的语音转换优化及总结

代码 import ChatTTS import torch import numpy as np import torchaudio import re# 设置环境变量以避免内存碎片化 import os os.environ[PYTORCH_CUDA_ALLOC_CONF] expandable_segments:True# 使用 CPU 进行计算 device torch.device(cpu)chat ChatTTS.Chat() chat.loa…...

Luckysheet 实现 excel 多人在线协同编辑(全功能实现增强版)

前言 感谢大家对 Multi person online edit(多人在线编辑器) 项目的支持,mpoe 项目使用 quill、luckysheet、canvas-editor 实现的 md、excel、word 在线协同编辑,欢迎大家Fork 代码,多多 Start哦~ Multi person online edit 多人协同编辑器…...

最新VMware Workstation Pro领先的免费桌面虚拟化软件基于 x86 的 Windows 桌面虚拟化软件下载安装保姆级教程,直接下载,持续更新

目录 说明 安装程序下载 方法一:直接下载 方法二:官网下载 安装教程 说明 这几天重装电脑,想装VMware Workstation,搜了之后才发现它竟然对个人用户免费了,一个字:爽!终于可以结束百度序列号…...

GitHub使用

太久不用GitHub发现自己又有些不会了,突发奇想为何不把每次看到的有指导意义的博客收录一下以便下次查阅呢 如何上传文件夹到GitHub上(配图详解)?_github上傳資料夾-CSDN博客 github上如何删除自己的仓库_github删除仓库-CSDN博…...

阿里云服务器Linux(centos)系统安装nginx1.20.2

阿里云服务器Linux(centos)系统安装nginx1.20.2 1.安装依赖包 一共要安装4种依赖(基于c语言) yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel2.下载nginx安装包并解压安装包 nginx官网下载:http://nginx.org/en/do…...

linux 用户名密码设置

安装linux时默认的密码最小长度是5个字节,但这并不够,要把它设为8个字节。修改最短密码长度需要编辑login.defs文件#vi /etc/login.defs PASS_MAX_DAYS 99999 ##密码设置最长有效期(默认值) PASS_MIN_DAYS 0 ##密…...

MySQL是否可以配合Keepalived实现高可用

MySQL是否可以配合Keepalived实现高可用 是的,MySQL 可以配合 Keepalived 实现高可用性。通常,使用 Keepalived 与 MySQL 配合的方式主要是通过配置 虚拟IP(VIP) 来实现主从数据库的自动切换,从而保证在主数据库宕机时…...

windows下 mysql开启 binlog日志

一、查看是否开启 binlog -- 方式一 show binary logs;-- 方式二 show VARIABLES like log_bin 说明没有开启 方式一 :you are not using binary logging 方式二:log_bin off 二、编辑 my.ini 配置文件 默认安装地点位于:C:\ProgramDat…...

59. 螺旋矩阵 II

59. 螺旋矩阵 II class Solution { public:vector<vector<int>> generateMatrix(int n) {// for(int i0;i<n;i){ 这样的遍历方式不对// for(int j 0;j<n;j){// generateMatrix[i][j] // }// } //初始化矩阵vector<vector<int&…...

XML 查看器:深入理解与高效使用

XML 查看器&#xff1a;深入理解与高效使用 XML&#xff08;可扩展标记语言&#xff09;是一种用于存储和传输数据的标记语言。它通过使用标签来定义数据结构&#xff0c;使得数据既易于人类阅读&#xff0c;也易于机器解析。在本文中&#xff0c;我们将探讨 XML 查看器的功能…...

JDBC学习

配置文件 application.yml spring: datasource: username: root password: 123456 url: jdbc:mysql://localhost:3306/rbac?useUnicodetrue&characterEncodingutf-8&serverTimezoneUTC driver-class-name: com.mysql.jdbc.Driverrbac为我自己本地的数据库&…...

单元测试

junit5中五个方法为&#xff1a;Test、BeforeEach&#xff08;修饰实例方法&#xff0c;在测试方法开始之前执行&#xff09;、AfterEach&#xff08;修饰实例方法&#xff0c;在测试方法完成之后开始执行&#xff09;、BeforeAll&#xff08;修饰静态static方法&#xff0c;在…...

24/12/9 算法笔记<强化学习> PPO,DPPO

PPO是目前非常流行的增强学习算法&#xff0c;OpenAI把PPO作为目前baseline算法&#xff0c;首选PPO&#xff0c;可想而知&#xff0c;PPO可能不是最强的&#xff0c;但是是最广泛的。 PPO是基于AC架构&#xff0c;因为AC架构有一个好处&#xff0c;就是解决了连续动作空间的问…...

spring boot通过连接池的方式连接时序库IotDB

1、maven依赖 <dependency><groupId>org.apache.iotdb</groupId><artifactId>iotdb-session</artifactId><version>1.3.2</version></dependency>2、配置文件 iotdb:server:url: localhostport: 6667name: rootpwd: rootmax…...

maven多模块开发

目录 聚合 可选依赖 排除依赖 属性 打包 聚合 聚合就是将多个模块组成一个整体&#xff0c;进行项目构建。聚合工程&#xff08;也称为多模块项目&#xff09;是 Maven 的一种项目结构&#xff0c;它允许将一个大型项目拆分为多个较小的、更易于管理的子模块。每个子模块…...

Kubernetes Nginx-Ingress | 禁用HSTS/禁止重定向到https

目录 前言禁用HSTS禁止重定向到https关闭 HSTS 和设置 ssl-redirect 为 false 的区别 前言 客户请求经过ingress到服务后&#xff0c;默认加上了strict-transport-security&#xff0c;导致客户服务跨域请求失败&#xff0c;具体Response Headers信息如下&#xff1b; 分析 n…...

华为eNSP:VRRP

一、VRRP背景概述 在现代网络环境中&#xff0c;主机通常通过默认网关进行网络通信。当默认网关出现故障时&#xff0c;网络通信会中断&#xff0c;影响业务连续性和稳定性。为了提高网络的可靠性和冗余性&#xff0c;采用虚拟路由冗余协议&#xff08;VRRP&#xff09;是一种…...

linux 安装composer

下载composer curl -sS https://getcomposer.org/installer | php下载后设置环境变量&#xff0c;直接通过命令composer -v mv composer.phar /usr/local/bin/composer查看版本看是否安装成功 composer -v...

ESP32-S3模组上跑通ES8388(24)

接前一篇文章:ESP32-S3模组上跑通ES8388(23) 二、利用ESP-ADF操作ES8388 2. 详细解析 上一回解析完了es8388_init函数中的第8段代码,本回继续往下解析。为了便于理解和回顾,再次贴出es8388_init函数源码,在components\audio_hal\driver\es8388\es8388.c中,如下: ​ …...

类文件具有错误的版本 61.0, 应为 55.0 请删除该文件或确保该文件位于正确的类路径子目录中。

类文件具有错误的版本 61.0, 应为 55.0 请删除该文件或确保该文件位于正确的类路径子目录中。 这个错误表明你的项目尝试加载的 .class 文件&#xff08;编译好的 Java 类&#xff09;是用比你的运行环境支持更高版本的 Java 编译的。具体来说&#xff1a; 版本 61.0 对应 Ja…...

AI 的时代,新科技和新技术如何推动跨学科的整合?

在当前AI的发展中&#xff0c;我们面临的一个主要挑战就是融合的问题&#xff0c;这实际上不仅是技术上的融合&#xff0c;还有更深层次的哲学层面的思考。 或许在中国这方面的讨论较少&#xff0c;但在西方哲学和神学的语境中&#xff0c;探讨万物的根本和不同学科之间的联系…...

12.9-12.16学习周报

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 摘要Abstract一、SNN与传统ANN的比较1.SNN概述2.SNN神经元和ANN的比较结构3.spikingjelly1.数据格式2.状态的保存和重置3.传播模式4.神经元 二、图数据库1.图数据库…...

CanFestival移植到STM32 F4芯片(基于HAL库)

本文讲述如何通过简单操作就可以把CanFestival库移植到STM32 F4芯片上&#xff0c;作为Slave设备。使用启明欣欣的工控板来做实验。 一 硬件连接 观察CAN报文需要专门的设备&#xff0c;本人从某宝上买了一个兼容PCAN的开源小板子&#xff0c;二十几块钱&#xff0c;通过USB接…...

构建安全的数据库环境:群晖NAS安装MySQL和phpMyAdmin详细步骤

文章目录 前言1. 安装MySQL2. 安装phpMyAdmin3. 修改User表4. 本地测试连接MySQL5. 安装cpolar内网穿透6. 配置MySQL公网访问地址7. 配置MySQL固定公网地址8. 配置phpMyAdmin公网地址9. 配置phpmyadmin固定公网地址 前言 本文将详细讲解如何在群晖NAS上安装MySQL及其数据库管理…...

相机(Camera)硬件组成详解

简介&#xff1a;个人学习分享&#xff0c;如有错误&#xff0c;欢迎批评指正。 写在前面&#xff1a;可以去B站观看一些相机原理的视频来配合学习&#xff0c;这里推荐&#xff1a;推荐1&#xff0c;推荐2&#xff0c;推荐3 相机&#xff08;Camera&#xff09;是一种复杂的光…...

【Linux———基础IO】

每一滴眼泪&#xff0c;每一次心碎&#xff0c;什么爱能无疚无悔.......................................................................... 文章目录 前言 一、【认识文件I/O】 1.1、【回顾C语言文件I/O】 1.2、【操作系统文件I/O】 1.2.1、【open函数】 1、【open函数的三…...

WebRTC服务质量(03)- RTCP协议

一、前言&#xff1a; RTCP&#xff08;RTP Control Protocol&#xff09;是一种控制协议&#xff0c;与RTP&#xff08;Real-time Transport Protocol&#xff09;一起用于实时通信中的控制和反馈。RTCP负责监控和调节实时媒体流。通过不断交换RTCP信息&#xff0c;WebRTC应用…...

[python SQLAlchemy数据库操作入门]-10.性能优化:提升 SQLAlchemy 在股票数据处理中的速度

哈喽,大家好,我是木头左! 当处理大量数据时,如股票数据,默认的ORM操作可能会显得效率低下。本文将探讨如何通过一些技巧和策略来优化SQLAlchemy ORM的性能,从而提升其在股票数据处理中的速度。 1. 选择合适的数据类型 在定义模型时,选择合适的数据类型对于性能至关重要…...

23种设计模式之中介者模式

目录 1. 简介2. 代码2.1 Mediator &#xff08;中介者接口&#xff09;2.2 ChatRoom &#xff08;具体中介者类&#xff09;2.3 User &#xff08;同事接口&#xff09;2.4 ChatUser &#xff08;具体同事类&#xff09;2.5 Test &#xff08;测试&#xff09;2.6 运行结果 3. …...

MySQL:GROUP_CONCAT分组合并

目录 一、概述二、用法三、分组去重 一、概述 GROUP_CONCAT函数要配合group by才能发挥作用&#xff0c;主要用于分组之后合并某一字段。 二、用法 SELECT GROUP_CONCAT(age) FROM tb_user GROUP BY banner;三、分组去重 SELECT GROUP_CONCAT(DISTINCT age) FROM tb_user GRO…...

递归方式渲染嵌套的菜单项

1. 递归组件 递归方式渲染嵌套的菜单项&#xff0c;这个是非常好的做法。为了避免在每个子菜单上都渲染一个新的 <ul> 标签&#xff0c;可以使用 v-if 来判断是否有子菜单&#xff0c;再决定是否渲染子菜单的部分。 2. 提高性能 对于递归渲染组件&#xff0c;Vue 可能…...

常用Vim操作

vimrc配置 ctags -R * 生成tags文件 set number set ts4 set sw4 set autoindent set cindent set tag~/tmp/log/help/tags 自动补全&#xff1a; ctrln&#xff1a;自动补全 输入&#xff1a; a&#xff1a;从当前文字后插入i&#xff1a;从当前文字前插入s: 删除当前字…...

spark3 sql优化:同一个表关联多次,优化方案

目录 1.合并查询2.使用 JOIN 条件的过滤优化3.使用 Map-side Join 或 Broadcast Join4.使用 Partitioning 和 Bucketing5.利用 DataFrame API 进行优化假设 A 和 B 已经加载为 DataFramePerform left joins with specific conditions6.使用缓存或持久化7.避免笛卡尔积总结 1.合…...

XML 在线格式化 - 加菲工具

XML 在线格式化 打开网站 加菲工具 选择“XML 在线格式化” 输入XML&#xff0c;点击左上角的“格式化”按钮 得到格式化后的结果...

陪玩系统小程序源码/游戏陪玩APP系统用户端有哪些功能?游戏陪玩小程序APP源码开发

多客陪玩系统-游戏陪玩线下预约上门服务等陪玩圈子陪玩社区系统源码 陪玩系统源码&#xff0c;高质量的陪玩系统源码&#xff0c;游戏陪玩APP源码开发&#xff0c;语音陪玩源码搭建: 线上陪玩活动组局与线下家政服务系统的部署需要综合考虑技术选型、开发流程、部署流程、功能实…...

力扣-图论-9【算法学习day.59】

前言 ###我做这类文章一个重要的目的还是给正在学习的大家提供方向和记录学习过程&#xff08;例如想要掌握基础用法&#xff0c;该刷哪些题&#xff1f;&#xff09;我的解析也不会做的非常详细&#xff0c;只会提供思路和一些关键点&#xff0c;力扣上的大佬们的题解质量是非…...

ViT学习笔记(三) RepViT和TransNext简介

标准ViT的其他模块的功能以及源码解读&#xff0c;在CSDN上有很多优秀文章&#xff0c;参考文章将代码大致过一遍。像我这种只做工程不写论文的&#xff0c;个人认为大致明白就好&#xff0c;用不着特别细究。下面跟踪两个ViT比较新的变种继续深入学习一下&#xff1a;RepViT和…...

大华DSS数字监控系统 attachment_downloadAtt.action 任意文件下载漏洞复现

0x01 产品描述: 大华 DSS 数字监控系统是大华开发的一款安防视频监控系统,拥有实时监视、云台操作、录像回放、报警处理、设备管理等功能。0x02 漏洞描述: 大华DSS数字监控系统 attachment_downloadAtt.action接口存在任意文件读取漏洞,未经身份验证攻击者可通过该漏洞读取…...

Dockerfile容器镜像构建技术

文章目录 1、容器回顾1_容器与容器镜像之间的关系2_容器镜像分类3_容器镜像获取的方法 2、其他容器镜像获取方法演示1_在DockerHub直接下载2_把操作系统的文件系统打包为容器镜像3_把正在运行的容器打包为容器镜像 3、Dockerfile介绍4、Dockerfile指令1_FROM2_RUN3_CMD4_EXPOSE…...

LabVIEW实现MQTT通信

目录 1、MQTT通信原理 2、硬件环境部署 3、云端环境部署 4、程序架构 5、前面板设计 6、程序框图设计 7、测试验证 本专栏以LabVIEW为开发平台,讲解物联网通信组网原理与开发方法,覆盖RS232、TCP、MQTT、蓝牙、Wi-Fi、NB-IoT等协议。 结合实际案例,展示如何利用LabVIEW和常用…...

分布式事物XA、BASE、TCC、SAGA、AT

分布式事务——Seata 一、Seata的架构&#xff1a; 1、什么是Seata&#xff1a; 它是一款分布式事务解决方案。官网查看&#xff1a;Seata 2.执行过程 在分布式事务中&#xff0c;会有一个入口方法去调用各个微服务&#xff0c;每一个微服务都有一个分支事务&#xff0c;因…...

[创业之路-182]:《华为战略管理法-DSTE实战体系》-1-华为的发展历程和战略管理演变

目录 前言、华为在战略管理上做对了什么&#xff1f; 1、前瞻性的战略眼光 2、有效的战略解码 3、灵活的战略调整 4、注重创新和研发 5、以客户为中心的战略导向 6、完善的内部管理体系 一、华为不同时期的战略选择 1.1 华为不同时期的战略选择 1、创业初期&#xff…...