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

news2025/1/11 8:17:57

😉 你好呀,我是爱编程的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啦!

总结

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2256980.html

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

相关文章

ARM V8 GIC中断模块

文章目录 1. 缩略语2. 简介2.1. 中断类型2.1.1 SGI软件中断2.1.2 PPI私有外设中断2.1.3 SPI 共享外设中断2.1.4 LPI(locality-specific peripheral interrupts) 2.2. GIC 架构2.2.1 Distributor2.2.2 Redistributor2.2.3 CPU Interfaces 2.3. 属性层次(affinity&…

perl Window安装教程

perl Window安装教程 下载地址 https://platform.activestate.com/tangxing806/ActivePerl-5.28/distributions 运行state-remote-installer.exe 按下图截图步骤 检查perl版本 参考文献: perl安装教程

算法日记(2024.12.09)

1.二叉树的最小深度 给定一个二叉树,找出其最小深度。 最小深度是从根节点到最近叶子节点的最短路径上的节点数量。 说明:叶子节点是指没有子节点的节点。 示例 1: 输入:root [3,9,20,null,null,15,7] 输出:2 …

《操作系统 - 清华大学》6 -5:局部页面置换算法:最不常用置换算法 (LFU, Least Frequently Used)

文章目录 1. 最不常用算法的工作原理2.最不常用算法特征3. 示例 1. 最不常用算法的工作原理 最不常用算法:注意并不是表示算法本身不常用,而是采取最不常使用页面的策略,Least Frequently Used, LFU。LRU 是最久未被访问的页&…

Hive分区值的插入

对于Hive分区表,在我们插入数据的时候需要指定对应的分区值,而这里就会涉及很多种情况。比如静态分区插入、动态分区插入、提供的分区值和分区字段类型不一致,或者提供的分区值是NULL的情况,下面我们依次来展现下不同情况下的表现…

OpenAI12天 –第3天的实时更新,包括 ChatGPT、Sora、o1 等

OpenAI提前开启了假期,推出了为期 12 天的活动,名为“OpenAI 12 天”。在接下来的一周左右的每一天,OpenAI 都将发布现有产品的新更新以及新软件,包括备受期待的 Sora AI 视频生成器。 OpenAI 首席执行官 Sam Altman 表示&#x…

C#导出数据库到Excel文件(.NET)

随着企业业务的增长和复杂性的增加,对数据进行有效的分析、共享和报告变得至关重要;而Excel,作为一款广泛接受的数据处理工具,提供了强大的计算能力、可视化选项以及与多种数据分析工具的兼容性,使得它成为从数据库导出…

基于Java后台实现百度米制坐标转WGS84地理坐标实战

目录 前言 一、需求简介 1、信息查询 二、Java后台转换 1、相关属性 2、相关转换方法 3、实例转换 三、Leaflet可视化 1、准备展示数据 2、Marker标记 3、可视化效果 四、总结 前言 在现代信息技术高速发展的今天,地理信息系统(GIS&#xff0…

声音克隆GPT-SoVITS

作者:吴业亮 博客:wuyeliang.blog.csdn.net 一、原理介绍 GPT-SoVITS,作为一款结合了GPT(生成预训练模型)和SoVITS(基于变分信息瓶颈技术的歌声转换)的创新工具,正在声音克隆领域掀…

自动驾驶数据集的应用与思考

数据作为新型生产要素,是数字化、网络化、智能化的基础,是互联网时代的“石油”“煤炭”,掌握数据对于企业而言是能够持续生存和发展的不竭动力,对于需要大量数据训练自动驾驶系统的企业而言更是如此。 而随着激光雷达、毫米波雷…

开源项目:轻型图像分割 unet_lite

DataBall 助力快速掌握数据集的信息和使用方式,会员享有 百种数据集,持续增加中。 需要更多数据资源和技术解决方案,知识星球: “DataBall - X 数据球(free)” -------------------------------------------------------------…

贪心算法专题(四)

目录 1. 单调递增的数字 1.1 算法原理 1.2 算法代码 2. 坏了的计算器 2.1 算法原理 2.2 算法代码 3. 合并区间 3.1 算法原理 3.2 算法代码 4. 无重叠区间 4.1 算法原理 4.2 算法代码 5. 用最少数量的箭引爆气球 5.1 算法原理 ​5.2 算法代码 1. 单调递增的数字…

【大模型系列篇】GPU资源容器化访问使用指南

在当今的高性能计算和机器学习领域,GPU(图形处理单元)因其卓越的并行计算能力而扮演着至关重要的角色。随着容器化技术如 Docker 的普及,越来越多的数据科学家和开发者选择将他们的应用和工作负载封装到 Docker 容器中&#xff0c…

【力扣】409.最长回文串

问题描述 思路解析 因为同时包含大小写字母,直接创建个ASCII表大小的桶来标记又因为是要回文子串,所以偶数个数的一定可以那么同时,对于出现奇数次数的,我没需要他们的次数-1,变为偶数,并且可以标记出现过…

Linux——管理用户和用户组

一、用户有哪些 root用户 定义:root用户是Linux系统中的最高权限用户,具有对系统所有资源的完全控制权。特性:root用户可以执行系统中的任何操作,包括修改系统配置文件、安装软件、管理系统服务等。由于其拥有最高权限&#xff0c…

SIP系列七:ICE框架(P2P通话)

我的音视频/流媒体开源项目(github) SIP系列目录 目录 一、NAT 1、NAT介绍 2、NAT类型 2.1、 完全圆锥型NAT 2.2、受限圆锥型NAT 2.3、端口受限圆锥型NAT 2.4、对称NAT 3、NAT打洞 3.1、不同一NAT下 3.2、同一NAT下 二、ICE 三、ICE中的SDP 至此&#x…

Spring Boot如何实现防盗链

一、什么是盗链 盗链是个什么操作,看一下百度给出的解释:盗链是指服务提供商自己不提供服务的内容,通过技术手段绕过其它有利益的最终用户界面(如广告),直接在自己的网站上向最终用户提供其它服务提供商的…

5.内容管理模块-课程查询

搞清楚一个项目的业务流程最直接的手段,就是找一个账号登录进去,操作一遍。 3.3设计接口 接口设计分析 post在需要提交很多参数的时候使用,并且post的安全性较高。 接口分析: po包,一般存放和数据库交互的实体类。 …

网络编程 | TCP套接字通信及编程实现经验教程

1、TCP基础铺垫 TCP/IP协议簇中包含了如TCP、UDP、IP、ICMP、ARP、HTTP等通信协议。TCP协议是TCP/IP协议簇中最为常见且重要的通信方式之一,它为互联网上的数据传输提供了可靠性和连接管理。 TCP(Transmission Control Protocol,传输控制协议…

vue3组件间传值

definProps方式 子组件&#xff1a;assignSuppliers.vue const propdefineProps({fid:String}); 父组件&#xff1a;index.vue <!-- 供应商分配 --><n-drawerwidth"800"v-model:visible"drawerSupplierConfig.visible":title"drawerSuppli…