element plus el-form自定义验证输入框为纯数字函数

element plus 的el-form 使用自定义验证器,验证纯数字,禁止输入小数、中文、字母、特殊符号。input的maxlength为最大输入多少位长度

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

在这里插入图片描述

在这里插入图片描述

<el-form ref="dataFormRef" :model="dataForm" :rules="dataRules" label-width="120px" :disabled="type==='view'"><el-form-item label="数量上限" prop="replicaLimit"><el-input v-model.number="dataForm.replicaLimit" placeholder="请输入数量上限" maxlength="5"/></el-form-item>
</form>// 提交表单数据
const dataForm = reactive({name: '',//组件名称componentSign: '',//组件标识(主键-只新增,不许修改)replicaLimit: '',//数量上限icon: '',//组件图标
});//校验纯数字(函数位置放在调用前
const validateNumber = (rule: any, value: string, callback: any) => {const reg = /^[0-9]*$/;//纯数字正则表达式if (!reg.test(value)) {//!取反 如果不是纯数字callback(new Error('请输入纯数字'));} else {callback();}
}// 定义校验组件
const dataRules = ref({name: [{required: true, message: '请输入组件名称', trigger: 'blur'}],componentSign: [{required: true, message: '请输入组件标识', trigger: 'blur'},],replicaLimit: [{required: true, message: '请输入数量上限', trigger: 'blur'},{ validator: validateNumber, trigger: 'blur' },],icon: [{required: true, message: '请上传组件图标', trigger: 'blur'},],
})

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

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

相关文章

jira如何查看历史Sprint

方法一&#xff1a;通过看板模块查看历史 Sprint 进入看板模块 在项目的看板中&#xff0c;找到并点击“模块项”。在右侧历史记录中选择一个模块项。 查看 Sprint 历史 进入模块项界面后&#xff0c;点击“搜索”按钮旁边的“更多”下拉菜单。勾选“Sprint”选项&#xff0c;…

阿里云 DataWorks 正式支持 SelectDB Apache Doris 数据源,实现 MySQL 整库实时同步

SelectDB 是由飞轮科技基于 Apache Doris 内核打造的现代化数据仓库&#xff0c;支持大规模实时数据上的极速查询分析。 通过实时、统一、弹性、开放的核心能力&#xff0c;能够为企业提供高性价比、简单易用、安全稳定、低成本的实时大数据分析支持。SelectDB 具备世界领先的实…

OV(企业型)通配符域名SSL证书

SSL证书是由CA机构签发的&#xff0c;相信这一点大家都知道&#xff0c;然而目前全世界兼容性可以达到99%机构仅有&#xff1a;GlobalSign、DigiCert、Sectigo、Certum&#xff0c;最后一家还是勉强。 SSL证书选择OV&#xff08;国内有人称之为企业型&#xff09;其实就是实名…

使用docker-compose实现不停机部署/灰度发布

使用 Docker Compose 实现不停机部署&#xff08;零 downtime 部署&#xff09;或灰度发布是常见的需求&#xff0c;可以通过以下几种方法来实现&#xff1a; 方法一&#xff1a;使用 docker-compose up --scale 和 docker-compose stop 步骤 备份现有服务&#xff1a; 在进行…

软考系统分析师知识点三五: 考前强记知识点

前言 今年报考了11月份的软考高级&#xff1a;系统分析师。 考试时间&#xff1a;11月9日。 倒计时&#xff1a;2天。 目标&#xff1a;优先应试&#xff0c;其次学习&#xff0c;再次实践。 复习计划第四阶段&#xff1a;考前强记知识点。 考前强记知识点 系统分析主要任…

基础算法——排序算法(冒泡排序,选择排序,堆排序,插入排序,希尔排序,归并排序,快速排序,计数排序,桶排序,基数排序,Java排序)

1.概述 比较排序算法 算法最好最坏平均空间稳定思想注意事项冒泡O(n)O( n 2 n^2 n2)O( n 2 n^2 n2)O(1)Y比较最好情况需要额外判断选择O( n 2 n^2 n2)O( n 2 n^2 n2)O( n 2 n^2 n2)O(1)N比较交换次数一般少于冒泡堆O( n l o g n nlogn nlogn)O( n l o g n nlogn nlogn)O( n l…

探索 Python 视频编辑新纪元:MoviePy库的神秘面纱

文章目录 探索 Python 视频编辑新纪元&#xff1a;MoviePy 库的神秘面纱第一部分&#xff1a;背景介绍第二部分&#xff1a;MoviePy 是什么&#xff1f;第三部分&#xff1a;如何安装这个库&#xff1f;第四部分&#xff1a;简单的库函数使用方法第五部分&#xff1a;结合场景使…

优雅的遍历JSONArray,获取里面的数据

最近看到有个同事在遍历json数组的时候&#xff0c;用for循环写了一层有一层&#xff0c;那么是否有简便的写法呢&#xff1f;当然有了&#xff0c;下面就有用流的行驶&#xff0c;优雅的遍历数组&#xff0c;获取我们想要的数据 public static void main(String[] args) {Str…

计算机网络:网络层 —— 多播路由选择协议

文章目录 多播路由选择协议多播转发树构建多播转发树基于源树的多播路由选择建立广播转发树建立多播转发树 组共享树的多播路由选择基于核心的生成树的建立过程 因特网的多播路由选择协议 多播路由选择协议 仅使用 IGMP 并不能在因特网上进行IP多播。连接在局域网上的多播路由…

Jenkins插件使用问题总结

Git Push插件 插件介绍 主要是用于git推送代码到远程仓库中使用&#xff0c;插件地址 pipeline中使用 官方说明中只有一句代码gitPush(gitScm: scm, targetBranch: env.BRANCH_NAME, targetRepo: origin) 流水线语法中也做的不齐全所以一开始我老是设置错&#xff0c;导致代…

MYSQL备库的并行复制

备库在消费中转日志时&#xff0c;其实可以分多个线程同时对多个事务进行消费&#xff0c;但是要满足2个基本原则&#xff1a; 1.涉及同一行数据的多个事务必须在同一个线程中执行&#xff0c;否则会导致数据不一致 2.同一个事务不能被拆开 MYSQL 5.6的并行复制策略&#xff…

委托, Lambda表达式 , 事件

1&#xff1a;什么是委托 委托就是持有一个或者多个方法的对象&#xff01;并且该对象可以执行&#xff0c;可以传递。 1.1&#xff1a; 声明委托类型 委托可以持有方法&#xff0c;可以声明它是一种应用类型 声明关键字&#xff1a;delegete void ActCute(); 定义委托类型的对…

Redis 热key总结

什么是热key&#xff1f; 1 、MySQL等数据库会被频繁访问的热数据 如爆款商品的skuId。 2 、redis的被密集访问的key 如爆款商品的各维度信息&#xff0c;skuId、shopId等。 3 、机器人、爬虫、刷子用户 如用户的userId、uuid、ip等。 4 、某个接口地址 如/sku/query或…

【命令操作】Linux三剑客之awk详解 _ 统信 _ 麒麟 _ 方德

原文链接&#xff1a;【命令操作】Linux三剑客之awk详解 | 统信 | 麒麟 | 方德 Hello&#xff0c;大家好啊&#xff01;今天带来一篇关于Linux三剑客之awk命令详解的文章。在文本处理工具中&#xff0c;awk以其强大的文本筛选、格式化和数据处理功能而闻名。它能够在处理结构化…

操作系统概念(一)——IOMMU学习

系列文章目录 提示&#xff1a;本系列主要记录工作过程中遇到的操作系统基础概念以及工作原理 第一章 操作系统之IOMMU 文章目录 系列文章目录1. 设备访问内存的几种主要方式1.1 传统的 I/O 访问&#xff08;程序控制 I/O&#xff09;1.2 直接内存访问&#xff08;DMA&#xf…

计算机网络:网络层 —— IP 多播技术

文章目录 基本概念IP多播地址和多播组 IP多播的类型硬件多播将IPv4多播地址映射为多播MAC地址 基本概念 多播&#xff08;Multicast&#xff0c;也称为组播&#xff09;是一种实现“一对多”通信的技术&#xff0c;允许一台或多台主机&#xff08;多播源&#xff09;发送单一数…

【k8s】ClusterIP能http访问,但是不能ping 的原因

ClusterIP 服务在 Kubernetes 中是可以访问的&#xff0c;但通常无法通过 ping 命令来测试连通性。这主要是因为 ClusterIP 是一个虚拟 IP 地址&#xff0c;而不是实际分配给某个网络接口的 IP 地址。以下是一些原因和解释&#xff1a; 1. 虚拟 IP 地址 ClusterIP 是一个虚拟…

Jest项目实战(2): 项目开发与测试

1. 项目初始化 首先&#xff0c;我们需要为开源库取一个名字&#xff0c;并确保该名字在 npm 上没有被占用。假设我们选择的名字是 jstoolpack&#xff0c;并且已经确认该名字在 npm 上不存在。 mkdir jstoolpack cd jstoolpack npm init -y2. 安装依赖 接下来&#xff0c;我…

windows运行ffmpeg的脚本报错:av_ts2str、av_ts2timestr、av_err2str => E0029 C4576

问题描述 我目前的环境是&#xff1a; 编辑器&#xff1a; Microsoft Visual Studio Community 2022 (64 位) 运行的脚本是ffmpeg自带的remux样例&#xff0c;只不过我想用c语言执行这个样例。在执行的过程中报错如下图&#xff1a; C4576 后跟初始值设定项列表的带圆括…

翻译工具开发技术笔记:《老挝语翻译通》app支持语音识别翻译功能,怎么提高语音识别的准确度呢?

《老挝语翻译通》app是一款专为老挝语翻译设计的免费工具&#xff0c;支持文本翻译、老挝文OCR文字识别提取、文字转语音。这款工具以其技术优势和用户友好的界面&#xff0c;为用户提供了便捷的老挝语翻译体验。 技术特点 文本翻译&#xff1a;支持双语输入&#xff0c;提供精…