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

vue绕过rules自定义编写动态校验

今天犯了个低级错误,虽然走了很多弯路,但这个过程还是值得记录一下

例子如下,有两个输入框:

第一个是套餐选择下拉框,可以下拉选择三个内容

第二个要根据上面的套餐选择三个选项来决定怎么显示,使用v-if(第一个下拉框的值来做条件显示)

(1)如果套餐选择招牌冰淇淋,第二个输入框就是招牌冰淇淋下拉框,

就以下拉框的形式显示口味

(2)如果套餐选择小吃,第二个输入框就是小吃输入框,

就让客户自己填写什么小吃

(2)如果套餐选择冷饮,第二个输入框就是冷饮输入框,

就让客户自己填写什么冷饮

然后无论第一个套餐选择选哪个选项,都要对第二个框进行非空、长度规则等校验,剩下的两个没选的就不做校验,这里其实v-if取了第一个下拉框的值来对第二个输入框做条件显示的时候,另外两个就不会显示,即不走rules,但我没把第二个输入框的规则写在rules里面,自己做了一个验证规则

具体逻辑就是在确定按钮提交表单时,调取this.validateForm()方法去校验一下第一下选的是哪个选项,再决定去校验后面的哪个输入框

核心校验代码: 

 

详细代码: 

<!--第一个下拉框-->
<el-form-item label="套餐选择" prop="setMealType"><el-select v-model="form.setMealType" placeholder="请选择变更类型" size="small" clearable><el-option label="招牌冰淇淋" value="1"></el-option><el-option label="小吃" value="2"></el-option><el-option label="冷饮" value="3"></el-option></el-select>
</el-form-item>
<!--        第二个输入框(1号)-->
<el-form-item label="招牌冰淇淋" prop="newVehicleColour" v-if="form.setMealType === '1'"><el-select v-model="form.newVehicleColour" placeholder="请选择冰淇淋口味" filterable clearable size="small"><el-option label="香草冰淇淋" value="1"></el-option><el-option label="牛奶红枣" value="2"></el-option><el-option label="薄荷香芋" value="3"></el-option></el-select><div><span v-if="errors.newVehicleColour" class="err">口味不能为空!</span></div>
</el-form-item><!--        第二个输入框(2号)-->
<el-form-item label="小吃" prop="newMotornumber" v-if="form.setMealType === '2'"><el-input v-model="form.newMotornumber"  placeholder="请输入小吃" maxlength="30" ></el-input><span v-if="errors.newMotornumber" class="err">小吃不能为空!</span>
</el-form-item><!--        第二个输入框(3号)-->
<el-form-item label="冷饮" prop="newBatteryNum" v-else-if="form.setMealType === '3'"><el-input v-model="form.newBatteryNum" placeholder="请输入冷饮" maxlength="30" /><span v-if="errors.newBatteryNum" class="err">冷饮不能为空!</span>
</el-form-item>

 data和rules:(data声明errors , rules仅对第一个输入框校验)

data() {return {// 遮罩层loading: true,//表单参数form: {},// 错误信息errors: {},// 表单校验rules: {changeType: [{required: true,message: "请选择套餐类型",trigger: "blur"}],}};},

表单重置:(将this.errors置空)

 // 表单重置reset() {this.form = {id: null,......createBy: null,createTime: null,updateBy: null,updateTime: null,remark: null};this.errors = {};this.resetForm("form");},

校验规则:

// 自定义校验方法validateField(field) {this.errors[field] = '';if (!this.form[field]) {this.errors[field] = `${field} 不能为空!`;}},// 校验所有字段validateForm() {this.errors = {};if (this.form.changeType === '1') {this.validateField('newVehicleColour');} else if (this.form.changeType === '2') {this.validateField('newMotornumber');} else if (this.form.changeType === '3') {this.validateField('newBatteryNum');}// 检查是否有错误for (const key in this.errors) {if (this.errors[key]) {// this.$message.error(this.errors[key]);return false;}}return true;},

重置按钮:

 /** 重置按钮操作 */resetQuery() {this.errors = {};this.resetForm("queryForm");this.handleQuery();},

表单提交按钮:

 /** 提交按钮 */submitForm() {if (this.validateForm()) {// 表单验证通过console.log('表单验证通过', this.form);this.$refs["form"].validate(valid => {if (valid) {if (this.form.id != null) {update(this.form).then(response => {this.$modal.msgSuccess("修改成功");this.open = false;this.getList();});} else {add(this.form).then(response => {this.$modal.msgSuccess("新增成功");this.open = false;this.getList();});}}});// 这里可以添加提交表单的逻辑} else {// 表单验证失败console.log('规则验证失败', this.errors);}},

自定义提示语样式

<style>.err {color: red;font-size: 12px;
}
</style>

相关文章:

vue绕过rules自定义编写动态校验

今天犯了个低级错误&#xff0c;虽然走了很多弯路&#xff0c;但这个过程还是值得记录一下 例子如下&#xff0c;有两个输入框&#xff1a; 第一个是套餐选择下拉框&#xff0c;可以下拉选择三个内容 第二个要根据上面的套餐选择三个选项来决定怎么显示&#xff0c;使用v-if&…...

.NET中的JSON序列化库:Newtonsoft.Json与System.Text.Json对比与示例

在.NET生态系统中&#xff0c;存在多个用于JSON序列化的库&#xff0c;其中最为常用和知名的包括Newtonsoft.Json&#xff08;也称为Json.NET&#xff09;和System.Text.Json。以下是这两个库的区别&#xff1a; Newtonsoft.Json&#xff08;Json.NET&#xff09; 功能与灵活…...

Electron-Vite 项目搭建(Vue)

前提条件 Node.js: 确保已安装 Node.js 版本 18 或更高版本 (推荐使用最新稳定版)。Vite: 确保 Vite 版本为 4.0 或以上。包管理工具: 推荐使用 pnpm&#xff0c;但也可以使用 npm 或 yarn。 安装 Electron-Vite 首先&#xff0c;在项目中安装 electron-vite 作为开发依赖&a…...

Elasticsearch Java Api Client中DSL语句的查询方法汇总

说明&#xff1a;示例代码依赖的是co.elastic.clients:elasticsearch-java:8.16.1。 1、termQuery 方法 用途&#xff1a;用于精确匹配某个字段的完全相等的值。这在查询如文档的 ID、状态码等具有明确取值的字段时非常有用。参数说明&#xff1a; field&#xff1a;这是一个…...

Linux之远程登录

一、使用ssh命令登录 winR打开cmd输入命令 # root是命令&#xff0c;192.168.101.200是地址 ssh root192.168.101.200是否要保存密码&#xff0c;就是yes以后可以免密登录&#xff0c;这里就yes了 输入密码&#xff0c;就登录成功了 操作完成之后&#xff0c;输入命令退出 e…...

医学图像分割数据集腹部肝脏多器官图像分割数据集labelme格式860张10类别

数据集格式&#xff1a;labelme格式(不包含mask文件&#xff0c;仅仅包含jpg图片和对应的json文件) 图片数量(jpg文件个数)&#xff1a;860 标注数量(json文件个数)&#xff1a;860 标注类别数&#xff1a;10 标注类别名称:["liver","stomach","o…...

Xerces-C,一个成熟的 C++ XML 解析库!

嗨&#xff0c;大家好&#xff01;我是一行。今天咱们来探索 Xerces-C&#xff0c;它可是 C里超棒的 XML 解析库哦&#xff01;能帮咱轻松处理 XML 数据&#xff0c;在很多数据交互、配置文件读取场景都超实用&#xff0c;快来一起学习使用它的妙招吧。 一、Xerces-C 是什么&am…...

go语言中context的用法

0 概述 Context 是 Go 语言中非常重要的一个概念&#xff0c;它主要用于跨多个函数或 goroutine 传递 取消信号、超时控制、截止时间 和 请求范围数据。在并发编程中&#xff0c;Context 提供了更好的控制和管理&#xff0c;尤其是当你需要在多个 goroutine 之间传递状态或进行…...

UE5编辑器下将RenderTarget输出为UTexture并保存

在使用UE5开发项目时&#xff0c;RenderTarget是一种非常强大的工具&#xff0c;常用于生成实时纹理效果、后处理和调试。而将RenderTarget的内容转换为UTexture并储存&#xff0c;是许多编辑器内的需求都需要的功能。 1.材质球输出至Texture 首先创建一个Actor类&#xff0c…...

探秘 AI Agent 之 Coze 智能体:从简介到搭建全攻略(4/30)

一、Coze 智能体概述 &#xff08;一&#xff09;Coze 智能体是什么 Coze 智能体是基于机器学习和自然语言处理技术的软件实体&#xff0c;它在人工智能领域扮演着重要的角色&#xff0c;能够像一个智能助手一样&#xff0c;通过与外界环境进行交互学习&#xff0c;进而执行各…...

解决navicat 导出excel数字为科学计数法问题

一、原因分析 用程序导出的csv文件&#xff0c;当字段中有比较长的数字字段存在时&#xff0c;在用excel软件查看csv文件时就会变成科学技术法的表现形式。 其实这个问题跟用什么语言导出csv文件没有关系。Excel显示数字时&#xff0c;如果数字大于12位&#xff0c;它会自动转化…...

蓝桥杯刷题——day4

蓝桥杯刷题——day4 题目一题干题目解析代码 题目二题干题目解析代码 题目一 题干 小蓝和朋友们在玩一个报数游戏。由于今年是2024 年&#xff0c;他们决定要从小到大轮流报出是20或24倍数的正整数。前10个被报出的数是&#xff1a;20,24,40,48,60,72,80,96,100,120。请问第2…...

【AI日记】24.12.13 kaggle 比赛 2-3 大扫除、断舍离、自己做饭

【AI论文解读】【AI知识点】【AI小项目】【AI战略思考】【AI日记】 工作 参加&#xff1a;kaggle 比赛 Regression with an Insurance Dataset参考&#xff1a;kaggle 回归类入门比赛 House Prices - Advanced Regression Techniques内容&#xff1a;构建自己的EDA&#xff08…...

http 和 https 的区别?

HTTP (HyperText Transfer Protocol) 和 HTTPS (HyperText Transfer Protocol Secure) 是两种用于在 Web 浏览器和网站服务器之间传输网页的协议&#xff0c;它们的主要区别在于安全性。以下是 HTTP 和 HTTPS 的一些关键区别&#xff1a; 安全性&#xff1a; HTTP&#xff1a;H…...

Mysql数据库中,什么情况下设置了索引但无法使用?

在MySQL数据库中&#xff0c;即使已经正确设置了索引&#xff0c;但在某些情况下索引可能无法被使用。 以下是一些常见的情况&#xff1a; 1. 数据分布不均匀 当某个列的数据分布非常不均匀时&#xff0c;索引可能无法有效地过滤掉大部分的数据&#xff0c;导致索引失效。 …...

[Unity] AppLovin Max接入Native 广告 Android篇

把下载下来的maxnativelibrary-release-文件放在Plugins/Android下 将这一行加入到mainTemplate.gradle文件中 implementation androidx.constraintlayout:constraintlayout:2.1.4添加下面的两个脚本 using System; using System.Collections; using System.Collections.Gener…...

青少年夏令营管理系统的设计与开发(社团)+开题报告(springboot+freemarker)

&#x1f497;博主介绍&#x1f497;&#xff1a;✌在职Java研发工程师、专注于程序设计、源码分享、技术交流、专注于Java技术领域和毕业设计✌ 温馨提示&#xff1a;文末有 CSDN 平台官方提供的老师 Wechat / QQ 名片 :) Java精品实战案例《700套》 2025最新毕业设计选题推荐…...

JSSIP的使用及问题(webRTC,WebSockets)

简介 项目中有一个需要拨打电话的功能&#xff0c;要求实时的进行音频接听&#xff0c;并且可以在电话接听或者挂断等情况下做出相应的操作。jssip作为一个强大的实现实时通信的javascript库&#xff0c;这不门当户对了嘛。 jssip&#xff08;官网&#xff1a; JsSIP - the J…...

13.继承和多态的实例 C#

这是一个动物园的动物发出不同的声音&#xff0c;使用了继承和多态 using System; using System.Collections.Generic;namespace InheritanceAndPolymorphismExample {//一个动物类&#xff0c;包含属性&#xff1a;名称。包含方法&#xff1a;发出叫声public class Animal{pub…...

Vue3之入门介绍

Vue 3是一种用于构建用户界面的渐进式JavaScript框架。它主要用于创建单页应用(SPA)&#xff0c;具备响应式数据绑定、组件化开发、虚拟DOM等核心特性&#xff0c;使得开发者能够高效地构建复杂的前端应用。Vue 3相比于之前的版本&#xff0c;进行了大量的性能优化和功能改进&a…...

Unity3D仿星露谷物语开发3之动画系统初探

1、目标 我们希望使用已有的资源建一个动画demo&#xff0c;以此熟悉基于已有Animator/Animation资源的使用方法。 以Tree的动画系统为例&#xff0c;资源位于&#xff1a; 2、创建流程 &#xff08;1&#xff09;创建tree空对象 上面两个都是空对象。 &#xff08;2&#…...

【研发经验】工作流和规则引擎的应用与场景

工作流引擎和规则引擎是两种常见的软件技术&#xff0c;可以被应用于各种场景中&#xff0c; 例如&#xff1a; 业务流程自动化&#xff1a;工作流引擎可以用于自动化和管理各种业务流程&#xff0c;例如审批流程&#xff0c;订单处理流程&#xff0c;客户服务流程等。它可以定…...

UDP对比TCP的网络编程接口

目录 一、UDP网络编程接口 1.创建套接字(客户端、服务端) 2.套接字绑定地址(客户端、服务端) 3.发送数据(客户端、服务端) 4.接收数据(客户端、服务端) 二、TCP网络编程接口 1.创建套接字&#xff08;客户端、服务端&#xff09; 2.套接字绑定地址&#xff08;客户端、服…...

C# 探险之旅:第二十七节 - 类型class(属性) —— 给你的类穿上“属性”的外衣

嘿&#xff0c;探险家们&#xff01;欢迎再次踏上我们的C#奇幻之旅。今天&#xff0c;我们要聊聊一个超级有趣的话题——类的“属性”。想象一下&#xff0c;如果我们要给类穿上一件酷炫的外衣&#xff0c;那属性就是这件外衣上的各种口袋和装饰&#xff0c;让类变得既实用又拉…...

《饕餮记》精彩片段(一)

也是无意中看到鲛人脍单元集片段&#xff0c;才去看了这个剧 整体略架空和部分逻辑不是很连贯和完美 精彩点不在于整体和走向和故事线 也不在于大牌明星撑场&#xff0c;因为全场只有安悦溪一个脸熟明星撑场子 而在于每个单元间离奇小故事 和华胥引差不多&#xff0c;属于逻…...

esxi8 虚拟机使用ubuntu22模板后 没有ip配置文件,只有ipv6链接正常使用

esxi8 虚拟机使用模板后 没有ip配置文件&#xff0c;只有ipv6链接正常使用&#xff0c;/etc/NetworkManager/system-connections配置下没有配置文件 只有/etc/netplan/有文件 sudo ip addr add 192.168.1.9/24 dev ens35 # 临时设置ip&#xff0c; 接口名ens35 sudo vi /et…...

C++内存管理

1、代码区 代码区的特点&#xff1a; 1.只读&#xff1a;防止程序运行时修改其执行代码&#xff0c;有助于程序稳定和安全性。 2.共享&#xff1a;多个程序运行可共享同一份代码区&#xff0c;以节省内存。 3.固定大小&#xff1a;代码区的大小在程序编译连接时就已经确定&a…...

分类算法评估标准综述

目录 ​编辑 混淆矩阵&#xff08;Confusion Matrix&#xff09; 准确率&#xff08;Accuracy&#xff09; 精确率&#xff08;Precision&#xff09; 召回率&#xff08;Recall&#xff09; F1分数&#xff08;F1 Score&#xff09; ROC曲线和AUC值 P-R曲线 马修斯相…...

基于windows环境使用nvm安装多版本nodejs

目录 前言 一、卸载node 二、nvm是什么&#xff1f; 三、nvm安装 1.官网下载 nvm 包 2. 安装nvm-setup.exe 3. 配置路径和下载镜像 4. 检查安装是否完成 四、 使用nvm安装node 五、修改npm默认镜像源为淘宝镜像 六、环境变量配置 1. 新建目录 2. 设置环境变量 七…...

【人工智能-中级】神经网络的调优与正则化策略

文章目录 神经网络的调优与正则化策略1. 神经网络调优策略学习率调整批量大小(Batch Size)优化算法2. 正则化策略L1与L2正则化Dropout数据增强3. 超参数优化4. 小结神经网络的调优与正则化策略 在深度学习中,训练一个高效且准确的神经网络模型不仅依赖于选择合适的架构,还…...

VBA 连续打印多个内容成PDF

VBA 连续打印多个内容成PDF Dim wb As Workbook Dim sht1 As Worksheet Set sht1 ActiveSheet PT ThisWorkbook.PathApplication.ScreenUpdating FalseApplication.DisplayAlerts FalseApplication.Calculation xlCalculationManual For i [aa2] To [ab2][ad2] iSet wb …...

【Linux网络编程】第十弹---打造初级网络计算器:从协议设计到服务实现

✨个人主页&#xff1a; 熬夜学编程的小林 &#x1f497;系列专栏&#xff1a; 【C语言详解】 【数据结构详解】【C详解】【Linux系统编程】【Linux网络编程】 目录 1、Protocol.hpp 1.1、Request类 1.1.1、基本结构 1.1.2、构造析构函数 1.1.3、序列化函数 1.1.4、反…...

嵌入式 linux Git常用命令 抽补丁 打补丁

Git常用命令 为什么要学习git呢&#xff1f;我相信刚入门的小伙伴敲打肯定碰到过这种玄学问题&#xff0c;我明明刚刚还能用的代码&#xff0c;后面不知道咋的就不能用了&#xff0c;所以每次你调出一个功能点以后都会手动复制一份代码防止出问题&#xff0c;时间一长发现整个…...

windows C#-方法概述(上)

方法是包含一系列语句的代码块。 程序通过调用该方法并指定任何所需的方法参数使语句得以执行。 在 C# 中&#xff0c;每个执行的指令均在方法的上下文中执行。 Main 方法是每个 C# 应用程序的入口点&#xff0c;并在启动程序时由公共语言运行时 (CLR) 调用。 在使用顶级语句的…...

SpringCloud和Nacos的基础知识和使用

1.什么是SpringCloud ​ 什么是微服务&#xff1f; ​ 假如我们需要搭建一个网上购物系统&#xff0c;那么我们需要哪些功能呢&#xff1f;商品中心、订单中心和客户中心等。 ​ 当业务功能较少时&#xff0c;我们可以把这些功能塞到一个SpringBoot项目中来进行管理。但是随…...

一行一行出字的视频怎么做?简单的操作方法

在视频制作中&#xff0c;逐行出现的字幕效果不仅能够增强视觉冲击力&#xff0c;还能让观众更加专注于内容&#xff0c;特别适合用于教育视频、书单推荐、诗歌朗诵等多种场景。下面&#xff0c;我们将详细介绍如何影忆&#xff0c;来制作这种逐行出字的视频效果。 1.字幕逐行…...

鸿蒙NEXT开发案例:颜文字搜索器

【引言】 本文将介绍一个名为“颜文字搜索器”的开发案例&#xff0c;该应用是基于鸿蒙NEXT平台构建的&#xff0c;旨在帮助用户快速查找和使用各种风格的表情符号。通过本案例的学习&#xff0c;读者可以了解如何在鸿蒙平台上进行数据处理、UI设计以及交互逻辑的实现。 【环…...

python在纯文本程序里面藏一张图

思路base64编码是纯文本的,base64是以字符串的形式存在,包括但不限于python,js,C#,C/Cpp. 这里给出python示例:运行后可以显示一张opencv的官方例程图. 废话不说,上程序. import os,sys,time,cv2,base64,requests from PIL import Image from io import BytesIO import nump…...

Java 身份证校验工具类(15位校验、18位校验与15转18)

文章目录 身份证简介&#xff08;一&#xff09;身份证号码的组成&#xff08;二&#xff09;一代和二代身份证一代身份证二代身份证 检验思路分析&#xff08;一&#xff09;15位身份证号码&#xff08;二&#xff09;18位身份证号码&#xff08;三&#xff09;校验算法示例&a…...

The Past, Present and Future of Apache Flink

摘要&#xff1a;本文整理自阿里云开源大数据负责人王峰&#xff08;莫问&#xff09;在 Flink Forward Asia 2024上海站主论坛开场的分享&#xff0c;今年正值Flink开源项目诞生的第10周年&#xff0c;借此时机&#xff0c;王峰回顾了Flink在过去10年的发展历程以及 Flink社区…...

不能通过 ip 直接访问 共享盘 解决方法

from base_config.config import OpenSMB, SMB import os, time, calendar, requests, decimal, platform, fs.smbfsinfo_dict SMB.EPDI_dict info_dict[host] (FS03,10.6.12.182) info_dict[direct_tcp] True# smb OpenSMB(info_dict)print(ok)# 根据 ip 查询电脑名 impor…...

IDEA方法注释模板设置

目录 创建模板 新建模板&#xff1a;命名为* 设置模板内容-IDEA格式模板 设置模板应用场景 设置参数 创建模板 /**Enter这里我们也按照这种习惯来设置IDEA的方法注释&#xff1a;File-->Settings-->Editor-->Live Templates 先新建模板组&#xff0c;然后在模板组中…...

组件缓存keep-alive

希望点击面经详情回来之后该1面经详情停留在滚动条停止的位置 有些 组件是不需要缓存的&#xff0c;例如详情页不需要缓存。解决方法是keep-alive的三个属性 include:组件名数组&#xff0c;只有匹配的组件会被缓存exclude:组件名数组&#xff0c;任何匹配的组件都不会被缓存ma…...

【经验分享】搭建本地训练环境知识点及方法

最近忙于备考没关注&#xff0c;有次点进某小黄鱼发现首页出现了我的笔记还被人收费了 虽然我也卖了一些资源&#xff0c;但我以交流、交换为主&#xff0c;笔记都是免费给别人看的 由于当时刚刚接触写的并不成熟&#xff0c;为了避免更多人花没必要的钱&#xff0c;所以决定公…...

Ant Design of Vue之带select控件,单元格编辑功能的表格EditableCell组件

效果图 功能 表格里面某一行或者某一个单元格支持select复选框可以编辑&#xff0c;新增一行数据&#xff0c;删除一行数据&#xff0c;并且有校验规则 源码 editablecell组件源码 参考自 源码...

etcd节点扩/缩容

etcd集群节点数越多越好吗&#xff1f; etcd 集群是一个 Raft Group&#xff0c;没有 shared。所以它的极限有两部分&#xff0c;一是单机的容量限制&#xff0c;内存和磁盘&#xff1b;二是网络开销&#xff0c;每次 Raft 操作需要所有节点参与&#xff0c;每一次写操作需要集…...

FFmpeg功能使用

步骤&#xff1a;1&#xff0c;安装FFmpeg Download FFmpeg 在这里点击->Windows builds from gyan.dev&#xff1b;如下图 会跳到另外的下载界面&#xff1a; 在里面下拉选择点击ffmpeg-7.1-essentials_build.zip&#xff1a; 即可下载到FFmpeg&#xff1b; 使用&#…...

动手学深度学习-线性神经网络-7softmax回归的简洁实现

目录 初始化模型参数 重新审视Softmax的实现 优化算法 训练 小结 在 线性回归的实现中&#xff0c; 我们发现通过深度学习框架的高级API能够使实现 线性回归变得更加容易。 同样&#xff0c;通过深度学习框架的高级API也能更方便地实现softmax回归模型。 本节如在上一节…...

GenAI + 3D:开启4D场景重建的新纪元

近日,一项激动人心的研究成果在《GenAI + 3D》方向取得了重大进展,它提出了一种创新的方法,能够将普通的2D视频转换为完整的4D场景。想象一下,《黑客帝国》中的"子弹时间"效果——现在你不仅可以停留在一个特定的时刻来改变视角,还可以自由地在空间和时间中移动…...

记一个framebuffer显示混乱的低级错误

记一个framebuffer显示混乱的低级错误 由于framebuffer的基础知识不扎实&#xff0c;这个任务上我多卡了两天&#xff0c;差点把我搞死&#xff0c;于此记录为后鉴。 打算用awtk做一个多进程项目&#xff0c;计划把framebuffer的内容通过websocket输出到浏览器上去显示画面, …...