文号验证-同时对两个输入框验证

文号验证-同时对两个输入框验证

效果:

在这里插入图片描述
在这里插入图片描述

一、如果有多个文号:

<div v-for="(item, index) in approvalForm.productApprovalTypeEvents" :key="index">
<el-form-itemlabel="文号":prop="'productApprovalTypeEvents.' + index":rules="rules.combinedRule"
>证监许可〔<el-input v-model="item.noOne" style="width: 30%" clearable @input="handleInputNum($event, 'noOne', index)"></el-input><el-input v-model="item.noTwo" style="width: 30%" clearable @input="handleInputNum($event, 'noTwo', index)"></el-input></el-form-item>
</div>
rules: {combinedRule: [{ required: true, message: '无效证监许可号', trigger: 'blur' },{ validator: combinedRuleValidator, trigger: 'blur' },],
}function combinedRuleValidator(rule: any, value: any, callback: any) {// 获取当前表单项对应的对象// console.log(value, 'valueeee');const noOne = value.noOne;const noTwo = value.noTwo;if (!noOne || !noTwo) {callback(new Error('无效证监许可号'));} else {callback();}
}
// 证监许可号
function handleInputNum(val: string, field: string, fIndex: number) {state.approvalForm.productApprovalTypeEvents[fIndex][field] = val.replace(/\D/g, '');
}

二、单个文号:

<el-form-itemv-if="sendInfoForm.apvlFileType == '1' || sendInfoForm.apvlFileType == '2'":label="sendInfoForm.apvlFileType == '1' ? '批复文号' : sendInfoForm.apvlFileType == '2' ? '变更批复文号' : '文号'"prop="noOne":rules="rules.combinedRule"
>证监许可〔<el-inputv-model="sendInfoForm.noOne"style="width: 35% !important"clearable@input="handleInputNum($event, 'noOne')"></el-input><el-input v-model="sendInfoForm.noTwo" style="width: 34% !important" clearable @input="handleInputNum($event, 'noTwo')"></el-input></el-form-item>
rules:{combinedRule: [{ required: true, message: '无效证监许可号', trigger: ['blur', 'change'] },{ validator: combinedRuleValidator, trigger: 'blur' },],
}
function combinedRuleValidator(rule: any, value: any, callback: any) {if (!state.sendInfoForm.noOne && !state.sendInfoForm.noTwo) {callback(new Error('无效证监许可号'));} else if (!state.sendInfoForm.noOne) {callback(new Error('无效证监许可号'));} else if (!state.sendInfoForm.noTwo) {callback(new Error('无效证监许可号'));} else {callback();}
}
// 证监许可号
function handleInputNum(val: string, field: string) {state.sendInfoForm[field] = val.replace(/\D/g, '');
}

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

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

相关文章

高翔视觉slam中常见的OpenCV和Eigen的几种数据类型的内存布局及分配方式详解

vector<Eigen::Vector2d, Eigen::aligned_allocator<Eigen::Vector2d>> 内存布局及分配方式详解 1. 内存对齐的必要性 Eigen 的固定大小类型(如 Eigen::Vector2d、Eigen::Matrix4d 等)需要 16 字节内存对齐,以支持 SIMD 指令(如 SSE/AVX)的并行计算。若未对…

5G育种技术之植物性状订制

行业展望 我国农作物种业市场规模逐年增长&#xff0c;其中以粮食作物种子市场规模较大。目前我国育种产业发展仍处于初级阶段&#xff0c;存在龙头企业市场占有率和行业集中度不高、企业育种技术和水平落后于发达国家、种企研发投入不足等问题。虽然基因编辑技术的出现有望改…

用户隐私与社交媒体:评估Facebook的保护成效

在这个数字化时代&#xff0c;社交媒体平台&#xff0c;尤其是Facebook&#xff0c;已经成为我们生活中不可或缺的一部分。然而&#xff0c;随着用户隐私问题日益受到关注&#xff0c;社交媒体平台如何处理和保护用户数据成为了公众讨论的焦点。本文将探讨Facebook在用户隐私保…

python实现基于Windows系统计算器程序

Python实现Windows系统计算器程序&#xff08;含高级功能&#xff09; 下面我将介绍如何使用Python创建一个功能完整的Windows风格计算器程序&#xff0c;包含基本运算和高级数学功能。 1. 使用Tkinter实现基础计算器 import tkinter as tk from tkinter import ttk import …

Vue 3 响应式 API 详解与实战案例

Vue 3 引入了全新的响应式系统&#xff0c;主要通过 ref 和 reactive 这两个 API 来实现。下面我将通过具体代码示例详细讲解它们的用法和区别。 1. ref - 基础响应式 API ref 用于创建响应式的基本类型数据&#xff08;如字符串、数字、布尔值&#xff09;&#xff0c;也可以…

软件第三方测试:关键部分、意义、流程及方法全解析?

软件第三方测试是保障软件质量的关键部分&#xff0c;它由专业的机构来开展&#xff0c;这个机构不隶属于开发方和使用方&#xff0c;能以客观公正的视角找出软件问题。 测试意义 软件第三方测试意义重大&#xff0c;它依靠专业技术&#xff0c;依照严格流程&#xff0c;对软…

WPF TextBlock控件性能优化指南

WPF TextBlock控件性能优化指南 1. 引言 TextBlock作为WPF中最基础且使用最广泛的文本显示控件&#xff0c;其性能优化对整个应用程序的响应速度和资源占用有着重要影响。尽管TextBlock是一个轻量级控件&#xff0c;但在大型应用或需要显示大量文本的场景中&#xff0c;不恰当…

【Linux】关于虚拟机

一些在Linux驱动开发中使用虚拟机的经验。 部分图片和经验来源于网络&#xff0c;若有侵权麻烦联系我删除&#xff0c;主要是做笔记的时候忘记写来源了&#xff0c;做完笔记很久才写博客。 专栏目录&#xff1a;记录自己的嵌入式学习之路-CSDN博客 目录 1 VirtualBox使用技…

AimRT从入门到精通 - 04RPC客户端和服务器

一、ROS中的service通信机制 服务通信也是ROS中一种极其常用的通信模式&#xff0c;服务通信是基于请求响应模式的&#xff0c;是一种应答机制。也即&#xff1a;一个节点A向另一个节点B发送请求&#xff0c;B接收处理请求并产生响应结果返回给A。比如如下场景&#xff1a; 机器…

普通IT的股票交易成长史--20250502 突破(1)

声明&#xff1a;本文章的内容只是自己学习的总结&#xff0c;不构成投资建议。文中观点基本来自yt站方方土priceaction&#xff0c;综合自己的观点得出。感谢他们的无私分享。 送给自己的话&#xff1a; 仓位就是生命&#xff0c;绝对不能满仓&#xff01;&#xff01;&#…

《操作系统真象还原》调试总结篇

文章目录 前言第11章调试我们操作系统目前的内存管理现状 前言 上一章结尾调试还没有完成&#xff0c;本章开始前需要先完成上一章代码的调试。 总的来说&#xff0c;我们的操作系统目前有三大块内容&#xff1a;线程-进程内容、内存管理内容、中断内容。当然这三部分肯定不可…

【Machine Learning Q and AI 读书笔记】- 01 嵌入、潜空间和表征

Machine Learning Q and AI 中文译名 大模型技术30讲&#xff0c;主要总结了大模型相关的技术要点&#xff0c;结合学术和工程化&#xff0c;对LLM从业者来说&#xff0c;是一份非常好的学习实践技术地图. 本文是Machine Learning Q and AI 读书笔记的第1篇&#xff0c;对应原…

Flutter 学习之旅 之 Flutter 和 Android 原生 实现数据交互的MethodChanel和EventChannel方式的简单整理

Flutter 学习之旅 之 Flutter 和 Android 原生 实现数据交互的MethodChanel和EventChannel方式的简单整理 目录 Flutter 学习之旅 之 Flutter 和 Android 原生 实现数据交互的MethodChanel和EventChannel方式的简单整理 一、简单介绍 二、Flutter 和 Android 原生之间的数据…

outlook for mac本地邮件存放在哪儿?

尽管 PST 格式通常与 Microsoft Outlook 联系在一起&#xff0c;但认为它也在 Mac OS 上存储邮箱数据是一种误解。实际上&#xff0c;Outlook for Mac 不会将邮件存储为 PST 文件。无法在 Outlook for Mac 中找到 PST 文件位置&#xff0c;因为它不使用 PST 文件来存储邮箱数据…

数字时代,如何为个人信息与隐私筑牢安全防线?

首席数据官高鹏律师团队编著 在当今数字化时代&#xff0c;个人信息和隐私保护至关重要。我们在享受数字生活带来的便利时&#xff0c;也面临着个人信息泄露、隐私被侵犯的风险。下面将从先进技术和法律途径两个方面&#xff0c;探讨如何严格保护个人信息和隐私。 一、先进技…

MongoDB的图形化工具robo3t,navicat

MongoDB 常用的两个图形化工具 —— Robo 3T 和 Navicat 的详细介绍、区别和基本使用方法&#xff1a; &#x1f9f0; 一、Robo 3T&#xff08;原 Robomongo&#xff09; &#x1f4cc; 简介 Robo 3T 是一款专注于 MongoDB 的轻量级可视化客户端。由原 Robomongo 团队开发&am…

Qt QWebEngine应用和网页的交互

一、QWebEngine简介 1、Qt WebEngine模块提供了一个Web浏览器引擎&#xff0c;可以轻松地将万维网上的内容嵌入到没有本机Web引擎的平台上的Qt应用程序中。 2、Qt WebEngine提供了用于渲染HTML&#xff0c;XHTML和SVG文档的C 类和QML类型&#xff0c;它们使用级联样式表&#…

d202552-sql

一、184. 部门工资最高的员工 - 力扣&#xff08;LeetCode&#xff09; 要找到每个部门工资最高的 使用窗口函数 加排序函数 排序函数用rank dense_rank都行 把最高相同的找出来就行 select *, dense_rank() over(partition by departmentId order by Salary desc) as rank …

AntSK:基于大模型的一体化AI知识库解决方案深度解析

随着大模型&#xff08;如GPT、LLM&#xff09;技术的飞速发展&#xff0c;企业对智能知识管理和专属AI助手的需求日益增长。AntSK 正是在这一背景下诞生的企业级AI一体机解决方案。本文将从技术架构、核心功能、创新点和应用场景等方面&#xff0c;深入解析 AntSK 如何助力企业…

在Electron中爬取CSDN首页的文章信息

背景 之前分享了Electron入门的相关文章&#xff1a;https://gitee.com/ruirui-study/electron-demo 后来&#xff0c;我就想在里面多做一些演示给大家看&#xff0c;集成了以下功能及演示&#xff1a; 窗口管理、各种方法封装托盘管理菜单管理获取屏幕演示多窗口及通信演示…