js 正则表达式 验证 :页面中一个输入框,可输入1个或多个vid/pid,使用英文逗号隔开...
就是意思一个输入框里面,按VID/PID格式输入,VID和PID最大长度是4,最多50组
1、页面代码
<el-form ref="ruleForm" :model="tempSet" :rules="rules" label-position="right">
<!-- 最多 50组,每组9个字符加逗号分隔,是10个,最后一个不需要字符就是,就是499个 -->
<el-form-item label="设备VID/PID" label-width="100px" prop="vpid" :error="errForm.vpid.error">
<el-input id="vpid" v-model.trim="tempSet.vpid" placeholder="按VID/PID形式输入,最多输入50组,英文逗号分隔" maxlength="499" type="textarea" :rows="6" style="width: 358px;" />
</el-form-item>
</el-form>
2、非必填的正则
rules: {
vpid: [
{ required: false, validator: validatorUsb, trigger: 'blur' }
]
},
3、页面编写正则
如图这个位置

4、代码如下:
// 非必填项 正则校验
var validatorUsb = (rule, value, callback) => {
if (value) {
// 一组VID/PID 逻辑处理
var isViDVip = (function() {
var regexp = /[\/]/;
return function(value) {
var valid = regexp.test(value);
if (!valid) { // 首先必须是 xxxx/xxxx 最长4位 这种形式的字符,如果不是,返回false
// _this.$message.error('按VID/PID格式输入')
return false;
}
return value.split('/').every(function(num) {
// 切割开来,每个都做对比,可以为0,可以小于等于255,但是不可以0开头的俩位数
// 只要有一个不符合就返回false
if (num.length > 4) {
// _this.$message.error('VID和PID最大长度是4')
return false;
} else if (num === '') {
// _this.$message.error('VID和PID若输入其中一个,另外一个不能为空')
return false;
}
return true;
});
}
}());
// var test_vips = '123/234';
// alert(isViDVip(test_vips)); // 返回true
// 多组 VID/PID,VID/PID的正则处理,用逗号(,)隔开
var test_vips = value;
var isTrue = test_vips.split(',').every(function(vip) {
return isViDVip(vip); // 先将字符串按照逗号分成数组,再校验就可以了
});
// alert(isTrue); // isTrue 返回true,上面的vid/pid 全部正确以逗号分隔 最多50组
if (!isTrue || test_vips.split(',').length > 50) {
return callback(new Error('按VID/PID格式输入,VID和PID最大长度是4,最多50组'))
} else {
return callback();
}
} else {
return callback()
}
}
5、效果图搞定

相关文章:
js 正则表达式 验证 :页面中一个输入框,可输入1个或多个vid/pid,使用英文逗号隔开...
就是意思一个输入框里面,按VID/PID格式输入,VID和PID最大长度是4,最多50组 1、页面代码 <el-form ref"ruleForm" :model"tempSet" :rules"rules" label-position"right"> <!-- 最多 50组,每组9个字符…...
【算法与数据结构】112、LeetCode路径总和
文章目录 一、题目二、解法三、完整代码 所有的LeetCode题解索引,可以看这篇文章——【算法和数据结构】LeetCode题解。 一、题目 二、解法 思路分析:本题通过计算根节点到叶子节点路径上节点的值之和,然后再对比目标值。利用文章【算法和数据…...
②matlab桌面和编辑器
目录 matlab编辑器练习 运行脚本 matlab编辑器练习 您可以通过点击灰色代码框在脚本中输入命令。 准备就绪后,您可以通过点击蓝色的提交按钮提交代码。 任务 在脚本中输入命令 r 3。 2.任务 在脚本中添加命令 x pi*r^2。 附加练习 当您在实时编辑器中完成…...
高亮img、pdf重点部分(html2canvas、pdfjs-dist、react-pdf)
可用业务场景 报销单据审批中,高亮发票部分 需求 后台返回一张图片或者pdf、返回一组坐标,坐标类型[number,number,number,number],分别代表了x、y、width、height。需要根据坐标在图片上高亮出来坐标位置。如下图 高亮的坐标是࿱…...
18.神奇导航菜单指示器
效果 源码 <!DOCTYPE html> <html> <head> <title>Magic Menu Indicator | 03</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body><div class="navig…...
WPF+Prism+WebApi 学习总结
一、基本概念 WPF:WPF(Windows Presentation Foundation)是(微软推出的)基于Windows的用户界面框架,提供了统一的编程模型,语言和框架,做到了分离界面设计人员与开发人员的工作;WPF…...
uniapp热更新
首先热更新需要wgt包; 其次先了解这两个组件 下载的方法 安装的组件 场景: 当你项目的js文件或者页面文件或者静态图片文件css文件更新的时候可以走热更新; 而当你安装新的组件插件或者开启新的权限等功能的时候就无法通过热更新进行更新了…...
AUTOSAR从入门到精通-【应用篇】基于CAN协议的汽车尾气后处理诊断系统的软件开发(续)
目录 尾气后处理诊断程序的开发 5.1 数据库的解析 5.1.1 寻找XML文件 5.1.2 读取XML文件...
mybatis plus新版代码生成器,类型转换处理器ITypeConvertHandler使用
目录 引言关键代码源码分析记录一坑类型转换的第二种方式完整源码地址 引言 当默认生成的数据类型不满足时,就需要自定义指定要生成的类型 关键代码 FastAutoGenerator.create(url, username, password).dataSourceConfig(builder -> {builder.typeConvertHandl…...
python中的matplotlib画直方图(数据分析与可视化)
python中的matplotlib画直方图(数据分析与可视化) import numpy as np import pandas as pd import matplotlib.pyplot as pltpd.set_option("max_columns",None) plt.rcParams[font.sans-serif][SimHei] plt.rcParams[axes.unicode_minus]Fa…...
【详解】文本检测OCR模型的评价指标
关于文本检测OCR模型的评价指标 前言:网上关于评价标准乱七八糟的,有关于单词的,有关于段落的,似乎没见过谁解释一下常见论文中常用的评价指标具体是怎么计算的,比如DBNet,比如RCNN,这似乎好像…...
Python遥感图像处理应用篇038 GDAL 遥感图像特征提取(统计特征图)
1.图像统计特征 遥感图像的统计特征是对图像中像素值的统计分布进行定量化描述的过程。这些统计特征可以提供关于图像内容和特性的有用信息。下面是一些常用的遥感图像统计特征描述方法: 平均值(Mean):计算图像中所有像素值的平均值,可以反映整个图像的亮度水平。 方差(…...
全局ID生成方式
全局ID生成方式 目录 1. 全局唯一id介绍 1.1 特点 2. 常见的全局唯一id生成策略 2.1 利用数据库自增字段生成id2.2 UUID2.3 Redis生成id2.4 zookeeper生成ID2.5 Twitter的snowflake算法 3. 面试题目:实现一个全局的ID生成器,注意线程安全 3.1 单例模式…...
c++之指针
总结性质 我们如何在一个函数中获取数组的长度: 我们都知道,在main函数中我们获得数组的长度只需要使用sizeof(a)/sizeof(a【0】)即可获得,但当我们把一个数组传入到方法时,c默认把…...
JVM 访问对象的两种方式
Java 程序会通过栈上的 reference 数据来操作堆上的具体对象。由于 reference 类型在《Java 虚拟机规范》里面只规定了它是一个指向对象的引用,并没有定义这个引用应该通过什么方式去定位、访问到堆中对象的具体位置,所以对象访问方式也是由虚拟机实现而…...
yo!这里是Linux基础开发工具介绍
目录 前言 基础开发工具 yum vim 1.基本介绍 2.基本操作 3.正常模式常用命令 4.底行模式常用命令 gcc/g gdb 1.基本介绍 2.常用操作 make/Makefile 1.背景 2.介绍 3.使用 git 1.介绍 2.操作 进度条程序简单实现 后记 前言 在学完初步的基础指令及权限控…...
本地组策略编辑器找不到怎么解决?| 解决windows home 版本隐藏本地组策略编辑器的问题 | 简单的介绍本地组策略编辑器
一般的 Windows 非家庭系统中,本地组策略编辑器不会被隐藏,但在某些特定情况下,可能会受到限制或不可用。如果你无法访问本地组策略编辑器,并且认为应该可以访问,请确保你拥有管理员权限,并检查是否有任何系…...
将Spring boot 项目部署到tomcat服务艰难
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z X Y Z...
第十二章 ObjectScript - 命令
文章目录 第十二章 ObjectScript - 命令命令熟悉的命令用于多维数组的命令 第十二章 ObjectScript - 命令 命令 本节概述了在 ObjectScript 常用命令。其中包括与其他语言中的命令相似的命令,以及其他语言中没有等效项的其他命令。 命令名称不区分大小写…...
在 CentOS 7 / RHEL 7 上安装 OpenSSL 1.1.x
OpenSSL 是一个开源软件库,由用于实现传输层安全 (TLS) 和安全套接字层 (SSL) 协议以及其他加密功能(例如签名、加密、解密和验证)的工具和库组成。操作系统和许多应用程序使用 OpenSSL 通过互联网提供安全通信。 CentOS 7 / RHEL 7 操作系统…...
3种高效方案破解NCM格式限制:从单文件到批量处理的完整指南
3种高效方案破解NCM格式限制:从单文件到批量处理的完整指南 【免费下载链接】ncmdump 项目地址: https://gitcode.com/gh_mirrors/ncmd/ncmdump 你是否曾为网易云音乐的NCM加密格式而烦恼?当你想要在非网易生态设备上播放已购买音乐时࿰…...
GetQzonehistory:数字记忆锚点——让QQ空间时光永不褪色的本地归档方案
GetQzonehistory:数字记忆锚点——让QQ空间时光永不褪色的本地归档方案 【免费下载链接】GetQzonehistory 获取QQ空间发布的历史说说 项目地址: https://gitcode.com/GitHub_Trending/ge/GetQzonehistory 当你试图找回十年前那条深夜发布的QQ空间说说时&…...
AI智能二维码工坊性能优化:多线程并发处理识别请求实战
AI智能二维码工坊性能优化:多线程并发处理识别请求实战 1. 项目核心价值与应用场景 想象一下,你运营着一个大型活动签到系统,或者管理着一个需要批量处理商品信息的电商后台。用户或同事上传的图片里,可能包含成千上万个二维码。…...
RVC效果对比实测:原声vs克隆声,你能听出区别吗?
RVC效果对比实测:原声vs克隆声,你能听出区别吗? 1. 引言:AI语音克隆技术的新突破 想象一下,你最喜欢的歌手正在用你的声音唱歌,或者你的播客节目突然有了专业播音员的音色。这不再是科幻场景,…...
Qwen3-Embedding-4B广告过滤应用:恶意内容识别系统实战
Qwen3-Embedding-4B广告过滤应用:恶意内容识别系统实战 1. 引言:当广告变成“牛皮癣”,我们如何反击? 想象一下,你运营着一个用户社区或内容平台。每天,用户都在热情地分享、讨论。但总有一些不速之客&am…...
C++ 模板类型推导的底层实现
C模板类型推导的底层实现 C的模板类型推导是现代C编程中不可或缺的核心机制,它使得泛型编程变得灵活而高效。从简单的函数模板到复杂的元编程,类型推导在编译期间自动推断模板参数,减少了冗余代码。其底层实现机制却鲜为人知。本文将揭开模板…...
Alpamayo-R1-10B保姆级教程:Windows WSL2环境下通过NVIDIA Container Toolkit部署
Alpamayo-R1-10B保姆级教程:Windows WSL2环境下通过NVIDIA Container Toolkit部署 1. 引言:为什么要在Windows上部署自动驾驶AI模型? 如果你对自动驾驶技术感兴趣,或者正在从事相关的研究开发工作,那么Alpamayo-R1-1…...
想入门脑机接口?这5个免费EEG数据集帮你从理论到实战(含Python处理示例)
想入门脑机接口?这5个免费EEG数据集帮你从理论到实战(含Python处理示例) 当你第一次听说脑机接口(BCI)时,脑海中浮现的可能是科幻电影中那些炫酷的场景——用意念控制机械臂、通过思维与计算机交互。但现实…...
安装即实战,用快马平台生成集成openclaw的数据采集与分析示例项目
最近在做一个数据采集相关的项目,需要用到openclaw这个工具。说实话,刚开始安装和集成的时候踩了不少坑,后来发现InsCode(快马)平台可以一键生成完整的实战项目,简直不要太方便。今天就把我的经验分享给大家,希望能帮到…...
节点式AI视觉创作工具ComfyUI零基础掌握:从入门到实践
节点式AI视觉创作工具ComfyUI零基础掌握:从入门到实践 【免费下载链接】ComfyUI 最强大且模块化的具有图形/节点界面的稳定扩散GUI。 项目地址: https://gitcode.com/GitHub_Trending/co/ComfyUI ComfyUI是一款基于稳定扩散技术的节点式视觉AI创作工具&#…...
