el-from中校验,如果某一项需要另一项填写才能校验

使用validateField

<el-form:model="params":rules="rules":scroll-to-error="true"ref="refrom"v-else><el-form-item label="用户姓名" prop="name"><el-input placeholder="请输入用户姓名" v-model="params.name"></el-input></el-form-item><el-form-item label="证件类型" prop="certificatesType"><el-selectstyle="width: 100%"placeholder="请选择证件类型"v-model="params.certificatesType"><el-optionv-for="(item,index) in arrType":key="index":label="item.name":value="item.value"/></el-select></el-form-item><el-form-item label="证件号码" prop="certificatesNo" ><el-input placeholder="请输入证件号码" v-model="params.certificatesNo"></el-input></el-form-item><el-form-item label="上传证件" prop="certificatesUrl"><!-- action:upload组件向服务器提交图片路径limit:照片墙约束图片个数on-exceed:超出约束数量的钩子--><el-uploadref="upload"v-model="params.certificatesUrl"action="/api/oss/file/fileUpload?fileHost=userAuah"limit="1"list-type="picture-card":on-exceed="handleExceed":on-success="handlesuccess":on-remove = 'handleremove':on-preview="handlePictureCardPreview"><imgstyle="width: 100%; height: 100%"src="../../../assets/images!auth_example.png"alt=""/></el-upload><el-dialog v-model="dialogVisible"><img w-full alt="Preview Image" :src="params.certificatesUrl" v-if="params.certificatesUrl"/></el-dialog></el-form-item><el-form-item><el-button type="primary" size="default" @click="submit">提交</el-button><el-button type="primary" size="default" @click="reset">重写</el-button></el-form-item></el-form>1,先给form表单绑定ref //创建form表单的实例const refrom = ref()2,给表单绑定rules校验const rules = {name: [{ validator: checkName, trigger: 'change',required: true }],certificatesType: [{ validator: checkcertificatesType,required: true }],certificatesUrl: [{ validator: checkcertificatesUrl, trigger: 'change',required: true }],certificatesNo: [{ validator: checkcertificatesNo, trigger: 'change' ,required: true }]}const checkcertificatesNo = (rule: any, value: any, callback: any) =>{if(params.certificatesType == ''){refrom.value.validateField('certificatesType',(errorMessage:any)=>{console.log(errorMessage,'errorMessage')})}console.log(params.certificatesType,'params.certificatesType')}3,开始自定义校验//自定义name校验const checkName = (rule: any, value: any, callback: any) =>{const res = /^[\u4e00-\u9fa5]+$/if(res.test(value)){callback()}else{callback('请输入正确的名字')}}//自定义证件类型校验const checkcertificatesType = (rule: any, value: any, callback: any) =>{if(value == 10 || value == 20){callback()}else{callback('请选择证件类型')}console.log(value,'value')}
//自定义校验图片
//  const checkcertificatesUrl = (rule: any, value: any, callback: any) =>{
//     console.log(params.certificatesType,'params.certificatesType')
//  }//自定义校验证件号码const checkcertificatesNo = (rule: any, value: any, callback: any) =>{//关键代码 validateField ,是一个函数,第一个填写要校验的某一项,第二个是一个函数,返回true和false,会自动触发certificatesType的校验规则,只需要在里面判断逻辑即可refrom.value.validateField('certificatesType',(errorMessage:any)=>{if(errorMessage == true){if(params.certificatesType == 10){const reg = /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{4}$/if(reg.test(value)){callback() }else{callback('请输入正确的身份证')}}else{let hkb = /^\d{9}$/;if(hkb.test(value)){callback() }else{callback('请输入正确的户口本')}}}})console.log(params.certificatesType,'params.certificatesType')}

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

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

相关文章

Spring Boot 常用 Starter

Spring Boot Starter 是 Spring Boot 提供的一系列预定义的依赖集合&#xff0c;旨在帮助开发者快速构建应用。这些 Starter 包含了常见的依赖和配置&#xff0c;极大地简化了项目的初始化和开发过程。本文将介绍一些常用的 Spring Boot Starter&#xff0c;并通过实际示例展示…

机器学习实现自然语言处理的背后技术详解

引言 自然语言处理&#xff08;NLP&#xff09;是机器学习领域中的一个重要分支&#xff0c;它涉及到让计算机理解和生成人类语言。随着深度学习技术的快速发展&#xff0c;NLP在许多应用领域取得了显著的成果&#xff0c;如机器翻译、情感分析、文本摘要等。本文将深入探讨机…

全网最简单的Java设计模式【五】Java单例模式 饿汉式详解

Java单例模式 饿汉式详解 【创作】 不易&#xff0c;【点赞】 是情义&#xff0c;【关注】 是动力&#xff0c;【收藏】 是回忆。 示例代码地址&#xff1a;https://gitee.com/code-in-java/csdn-blog.git 一、概念与原理 Java中的单例模式是一种确保一个类只有一个实例&#…

图片海报怎么做成二维码展示?二维码分享图片的制作技巧

怎么把图片的宣传海报做成二维码呢&#xff1f;在做活动或者产品宣传时&#xff0c;都会制作精美的图片海报&#xff0c;除了打印传单或者制作展板的方式来展示外&#xff0c;将海报图片生成二维码&#xff0c;通过分享二维码来实现图片海报的快速传播&#xff0c;能够有效提升…

大话光学原理:2.最短时间原理、“魔法石”与彩虹

一、最短时间原理 1662年左右&#xff0c;费马在一张信纸的边角&#xff0c;用他那著名的潦草笔迹&#xff0c;随意地写下了一行字&#xff1a;“光在两点间选择的路&#xff0c;总是耗时最少的。”这句话&#xff0c;简单而深邃&#xff0c;像是一颗悄然种下的种子&#xff0c…

After Detailer让图像自动修复

After Detailer&#xff08;简称adetailer&#xff09;是一个Stable Diffusion的自动Web-UI扩展&#xff0c;它能够自动化修复图像中的不完整部分&#xff0c;例如模糊的人脸等常见问题。在这篇文章中&#xff0c;你将了解它的工作原理、如何使用它&#xff0c;以及一些常见的使…

品牌策划学习资源全攻略:从入门到精通的推荐清单!

这里再分享一些网站书籍和杂志给大家。 TOPYS创意内容平台&#xff1a; 专注于创意内容分享&#xff0c;涵盖广告、设计、艺术等多个领域&#xff0c;是广告设计人寻找创意灵感的好去处。 Dribbble&#xff1a; 设计师社区&#xff0c;用户可以浏览到全球设计师的优秀作品&…

Python中的生成器表达式与列表推导式的不同点。

Python中的生成器表达式&#xff08;Generator Expressions&#xff09;和列表推导式&#xff08;List Comprehensions&#xff09;在功能上相似&#xff0c;但它们在内存使用和处理方式上有着显著的不同。 列表推导式&#xff08;List Comprehensions&#xff09; 列表推导式…

使用webrtc-streamer查看rtsp实时视频

1.下载webrtc-streamer 2.解压运行webrtc-streamer.exe 在浏览器访问127.0.0.1:8000&#xff0c;点击窗口可以看到本机上各窗口实时状态&#xff0c;点击摄像头可以显示摄像头画面。 5.安装phpstudy&#xff0c;并建立网站。&#xff08;具体过程自己网上搜&#xff09; 6.打开…

面试官:说说你项目中的单点登录?

单点登录&#xff08;SSO&#xff09;概念 定义&#xff1a;用户仅需一次登录&#xff0c;即可访问所有相互信任的应用程序或系统。目的&#xff1a;提升用户体验&#xff0c;简化登录流程&#xff0c;降低忘记密码和登录疲劳问题&#xff0c;提高系统安全性。 SSO实现技术 O…

【探索Linux】P.38(传输层 —— TCP协议通信连接管理机制简介 | TCP连接状态转换)

阅读导航 引言一、TCP协议通信连接管理机制二、连接状态转换1. TCP状态转换图2. 状态转换过程3. 理解TIME_WAIT状态&#xff08;1&#xff09;目的和作用&#xff08;2&#xff09;状态转换&#xff08;3&#xff09;特殊情况&#xff08;4&#xff09;影响和优化 4. 理解 CLOS…

多模态大模型时代下的文档图像智能分析与处理_多模态ocr

0. 前言1. 人工智能发展历程 1.1 传统机器学习1.2 深度学习1.3 多模态大模型时代 2. CCIG 文档图像智能分析与处理论坛 2.1 文档图像智能分析与处理的重要性和挑战2.2 文档图像智能分析与处理高峰论坛2.3 走进合合信息 3. 文档图像智能分析与处理 3.1 文档图像分析与预处理3.2 …

牛市中途深度调整,一览下半场值得关注的 Solana 生态五大潜力项目

近期有关加密货币的利空消息让市场行情一度陷入了恐慌之中&#xff0c;短期利空的落地也将伴随着接下来市场的蓄势。对于投资者来说&#xff0c;现在布局超跌潜力项目不失为一个不错的机会。作为本轮牛市值得关注的两大生态&#xff0c;Solana和TON的快速发展和吸金效应&#x…

微米级触觉感知的紧凑视触觉机器人皮肤

视触觉皮肤&#xff08;VTS&#xff09;分为涂层型、标记型和热致变色型。涂层的耐磨性和空间分辨率是涂层型VTS的核心问题。近期&#xff0c;北京邮电大学方斌教授联合中国地质大学&#xff08;北京&#xff09;杨义勇教授&#xff0c;在传感器领域Q1期刊IEEE Sensors Journal…

优化旅游服务热线系统以满足多样化需求

一、引言 在全球化与数字化的时代背景下&#xff0c;旅游业得到了前所未有的发展。旅游服务热线系统作为连接旅游企业与游客的重要桥梁&#xff0c;其服务质量与效率直接关系到企业的声誉、市场地位以及游客的满意度。然而&#xff0c;随着旅游市场的日益成熟和游客需求的多样…

存储相关基本知识:oss\s3\文件存储\块存储\

存储 常见的存储格式 文件存储会以文件和文件夹的层次结构来整理和呈现数据&#xff1b;块存储会将数据拆分到任意划分且大小相同的卷中;对象存储会管理数据并将其链接至关联的元数据。 DAS和SAN是基于物理块的存储方式&#xff0c;而NAS是基于文件的存储方式。 在DAS和SAN中…

Conformal low power-2.电源感知等效性检查

电源感知等效性检查 ■ 第24页&#xff1a;电源感知等效性检查概述 ■ 第24页&#xff1a;启动低功耗&#xff08;等效性检查&#xff09;软件 ■ 第25页&#xff1a;电源感知等效性检查流程 ■ 第28页&#xff1a;电源感知等效性检查示例Do文件 电源感知等效性检查概述…

MySQL 中 SQL 查询语句的执行顺序

在 MySQL 中&#xff0c;SQL 查询的执行顺序通常按照以下顺序进行&#xff1a; FROM&#xff1a;从指定的表中选择数据。WHERE&#xff1a;对数据进行筛选&#xff0c;只选择满足条件的行。GROUP BY&#xff1a;按照指定的列对数据进行分组。SELECT&#xff1a;选择要返回的列或…

使用springboot 配置一个websocket客户端

要在 Spring Boot 应用程序中实现一个 WebSocket 客户端&#xff0c;您可以使用 Spring 的 WebSocketClient 接口。这里&#xff0c;我们将使用标凑的 StandardWebSocketClient 进行示例。客户端将被 Spring 管理&#xff0c;允许你注入任何需要的依赖&#xff0c;并支持向 Web…

亚马逊关键词优化全攻略:自养号测评让你的产品跃居首页

常常听到亚马逊运营吐槽&#xff1a; 为啥我的产品就是上不了首页呢&#xff1f; 我的关键词要怎么优化才能排名靠前啊&#xff1f; 的确&#xff0c;每天都有无数个卖家在想方设法让自己的产品排到首页&#xff0c;所以产品的竞争激烈程度不言而喻。 我们在亚马逊运营中&a…