解决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啦!

总结

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

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JDK8新特性之Stream流03

收集Stream流中的结果 IntStream intStream = Stream.of(1, 2, 3, 4, 5).mapToInt(Integer::intValue); intStream.filter(n -> n > 3).forEach(System.out::println); intStream.filter(n -> n > 3).count; intStream.filter(n -> n > 3).reduce(0, Integer…

图社区发现算法--Leiden算法

Leiden算法出自2019年的论文《From Louvain to Leiden: guaranteeing well-connected communities》,它是Louvain算法的改进社区发现算法,相比Louvain得到的社区质量更高,因为其移动策略速度也更快。Leiden算法也是以论文作者所在城市来命名的…

基于APO四步实现炫酷的NGINX请求分析看板

APO 充分利用 Vector ClickHouse 实现的日志方案,做到了开箱即用、高效、低成本。利用 APO 的日志功能,不仅可以检索日志内容本身,还可以实现很多有意思的功能。本次为大家介绍使用 APO 的日志功能实现炫酷的 NGINX 请求分析看板&#xff0c…

QT 中基于 TCP 的网络通信

基础 基于 TCP 的套接字通信需要用到两个类: 1)QTcpServer:服务器类,用于监听客户端连接以及和客户端建立连接。 2)QTcpSocket:通信的套接字类,客户端、服务器端都需要使用。 这两个套接字通信类…

X推出新AI图像生成器Aurora:更接近真实的创作效果

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗?订阅我们的简报,深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同,从行业内部的深度分析和实用指南中受益。不要错过这个机会,成为AI领…

后端工程搭建

后端工程通过maven聚合工程的形式来搭建 1.1创建spzx-parent工程(父工程) 存放公共依赖 锁定公共依赖版本 1.2创建spzx-common工程(公共模块) 存放一些工具类/公共服务 1.3创建spzx-model工程(数据模型) 存放实体类 1.4创建spzx-menager工程(后台管理系统) 后台管理系统服务模…

Co-Slam论文及复现记录

Overview 输入RGB-D流: { I t } t 1 N { D t } t 1 N \{I_t\}^{N}_{t1}\{D_t\}^{N}_{t1} {It​}t1N​{Dt​}t1N​,它们带有已知相机内参 K ∈ R 3 3 K\in \mathbb{R}^{3\times 3} K∈R33。通过联合优化相机姿态 { ξ t } t 1 N \{\xi_t\}^{N}_{t1} {…

无代码,无问题:面向手动测试人员的人工智能自动化

“质量比数量更重要。一个本垒打比两个二垒打好得多。” ——史蒂夫乔布斯 在软件测试领域,这句话再贴切不过了。如果你是一名手动测试人员,你就会知道交付高质量结果的压力,而且通常是在紧迫的期限和有限的资源内。 然而,在当今…

transformers生成式对话机器人

简介 生成式对话机器人是一种先进的人工智能系统,它能够通过学习大量的自然语言数据来模拟人类进行开放、连贯且创造性的对话。与基于规则或检索式的聊天机器人不同,生成式对话机器人并不局限于预定义的回答集,而是可以根据对话上下文动态地…

模版方法模式的理解和实践

在软件开发中,设计模式为我们提供了一套经过验证的解决方案,用于解决常见的设计问题。其中,模版方法模式(Template Method Pattern)是一种行为设计模式,它定义了一个算法的框架,并允许子类在不改…

YOLO系列正传(二)YOLOv3论文精解(上)——从FPN到darknet-53

系列文章 YOLO系列基础 YOLO系列基础合集——小白也看得懂的论文精解-CSDN博客 YOLO系列正传 YOLO系列正传系列(一)类别损失与MSE损失函数、交叉熵损失函数-CSDN博客 背景 随着YOLOv11版本的发布,YOLO算法在视觉检测领域独领风骚&#x…

批处理读取文本第n行并赋值给变量?--遍历所有行并赋值给变量数组

::TraceLines.bat goto :test1http://www.bathome.net/thread-27229-1-1.html#批处理如何获取txt文本中某行某列的内容/指定行指定列的内容 http://www.bathome.net/thread-47304-1-1.html#如何用批处理读取文本第二行并赋值给变量? https://github.com/npocmaka/ba…

Blender中使用BlenderGIS插件快速生成城市建筑模型

导入下载 BlenderGIS 插件 去github上下载其压缩包,地址如下: https://github.com/domlysz/BlenderGIS 在BlenderGIS中导入这个插件压缩包: 点击上方菜单栏的编辑,点击偏好设置 在插件>从磁盘安装中导入刚刚下载的压缩包 可…

5G Multicast/Broadcast Services(MBS) (八) MBS多播DRX

这里简单看下多播DRX的内容。 1 MBS multicast 对于MBS多播,RRC可配置 MAC entity使其具备per G-RNTI 或per G-CS-RNTI DRX 功能,从而控制 UE 对 MAC entity的G-RNTI和G-CS-RNTI 的 PDCCH 监听活动。当处于 RRC_CONNECTED 状态时,如果为 G-RNTI 或 G-CS-RNTI 配置了多播…

Mybatis中SQL的执行过程

文章目录 Mybatis 框架SQL执行过程数据库操作映射方式SQL的执行过程- SQL解析- SQL参数映射- SQL预编译- SQL执行- 结果映射- 事务处理- 缓存处理- 日志记录与监控 扩展#与$的区别- $ 符号- # 符号总结示例 Mybatis SQL分类- 动态 SQL- 静态 SQL静态SQL和动态SQL选择${}、#{}与…

2024年深圳杯数学建模C题编译器版本的识别问题解题全过程文档及程序

2024年深圳杯数学建模 C题 编译器版本的识别问题 原题再现: 作为一种重要的工具,电子计算机自诞生以来,经历了极为快速的发展。区区百年的时间内,无论从体积、能耗、计算速度,还是应用能力等方面,电子计算…

12.09 C++作业2

利用函数重载&#xff0c;实现对整形数组的冒泡排序&#xff0c;对浮点型数组的冒泡排序 #include <iostream>using namespace std;int maopao(int(&ra)[10]) {//求数组长度int len sizeof(ra)/sizeof(ra[0]);int i,j,t;for(int i0;i<len;i){cin >>ra[i];}…

阿里云轻量应用服务器开放端口,图文教程分享

阿里云轻量应用服务器如何开放端口&#xff1f;在轻量服务器管理控制台的防火墙中添加规则即可开通端口&#xff0c;开通80端口就填80&#xff0c;开通443就填443端口&#xff0c;开通3306端口就填3306。阿里云百科网aliyunbaike.com整理阿里云轻量应用服务器端口号开通图文教程…

MySQL--》如何在SQL中巧妙运用函数与约束,优化数据处理与验证?

目录 函数使用 字符串函数 数值函数 日期函数 流程函数 约束 函数使用 函数是指一段可以直接被另一段程序调用的程序或代码&#xff0c;在mysql当中有许多常见的内置函数&#xff0c;接下来开始对这些内置函数及其作用进行简单的讲解和使用&#xff1a; 字符串函数 my…

《三角洲行动》游戏安全组件运行时发生异常1-0-0,是什么原因?以及要如何解决?

《三角洲行动》游戏安全组件异常1-0-0深度探讨 今天你们安全撤离了吗&#xff1f;在《三角洲行动》这款经典射击游戏里&#xff0c;游戏安全组件运行时发生异常1-0-0的原因及解决方案&#xff0c;并借此机会分享一些有关文件丢失、文件损坏和系统报错等问题的通用解决策略。希…