对input输入框的正则限制

一、0-100的整数

正则: 

const inputRules = ref([
    {
        required: false,
        trigger: "blur",
        validator: (rule, value, callback) => {
            const reg = /^[0-9]+$/; // 只允许整数
            if (
                (0 <= value && value <= 100 && reg.test(value)) ||
                value == "" ||
                value == undefined
            ) {
                callback();
            } else {
                callback(new Error("请输入0-100之间的整数"));
            }
        },
    },
]);

html: 

 <el-form-item label="值" >
                    <div>
                        <el-button :disabled="queryParams.valveRateMin <= 0" @click="
                            queryParams.valveRateMin =
                            Number(queryParams.valveRateMin) - 1
                            " style="width: 32px">
                            <el-icon>
                                <Minus />
                            </el-icon>
                        </el-button>
                    </div>
                    <div style="width: 60%; margin: 0 4px">
                        <el-form-item label="" label-width="0" prop="valveRateMin" :rules="inputRules">
                            <el-input v-model="queryParams.valveRateMin" placeholder="请输入"></el-input>
                        </el-form-item>
                    </div>
                    <div>
                        <el-button :disabled="queryParams.valveRateMin >= 100" @click="
                            queryParams.valveRateMin =
                            Number(queryParams.valveRateMin) + 1
                            " style="width: 32px">
                            <el-icon>
                                <Plus />
                            </el-icon>
                        </el-button>
                    </div>
                </el-form-item>

如图: 

二、-10至10的整数

const inputRules = ref([
    {
        required: false,
        trigger: "blur",
        validator: (rule, value, callback) => {
          const reg = /^-?\d+$/; // 允许负数和正整数
            if (
                (-10 <= value && value <= 10 && reg.test(value)) ||
                value == "" ||
                value == undefined
            ) {
                callback();
            } else {
                callback(new Error("请输入-10-10之间的整数"));
            }
        },
    },
]);

 三、0-100允许一位小数

const inputRules = ref([
    {
        required: false,
        trigger: "blur",
        validator: (rule, value, callback) => {
            const reg = /^[-]?[0-9]+(\.[0-9]{1,1})?$/;
            if (
                (0 <= value && value <= 100 && reg.test(value)) ||
                value == "" ||
                value == undefined
            ) {
                callback();
            } else {
                callback(new Error("请输入0-100之间且最多保留一位小数的数"));
            }
        },
    },
]);

如果保留两位小数

   const reg = /^[-]?[0-9]+(\.[0-9]{1,2})?$/;

以此类推。。。

三位:   const reg = /^[-]?[0-9]+(\.[0-9]{1,3})?$/;

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

视频汇聚安防综合管理系统EasyCVR平台GB28181设备注册未上线的原因排查与解决

视频汇聚安防综合管理平台EasyCVR视频监控系统基于云边端架构&#xff0c;可支持海量视频汇聚集中管理&#xff0c;能提供视频监控直播、云端录像、云存储、录像检索与回看、告警&#xff08;协议告警/智能告警/1400视图库告警&#xff09;、平台级联、AI智能分析接入等视频能力…

Python 库PySpark,一个超级强大的数据处理引擎

目录 01初识 PySpark 为什么选择 PySpark? 安装 PySpark 配置 PySpark 02基本操作 创建 RDD 基本 RDD 操作 03DataFrame 和 Spark SQL 创建 DataFrame 基本 DataFrame 操作 使用 Spark SQL 04机器学习与流处理 …

这俩项目,牛哇。

你每天是不是会在各个平台上浏览文章&#xff0c;比如公众号、知乎等等&#xff0c;想把看过的高质量文章管理在一个地方&#xff1f;第一个开源项目能帮到你。 第二个开源项目&#xff0c;是 AI 大佬吴恩达开源的基于 Agent 的项目&#xff0c;结合逛逛 GitHub 之前发布的 AI …

RK3568技术笔记九 编译Linux详细介绍

在编译前需要按照前面的方法始化编译环境&#xff0c;否则会导致编译失败&#xff08;若配置过则无需重复配置&#xff09;。 全自动编译包含所有镜像编译&#xff0c;包括&#xff1a;uboot编译、Kernel编译、Recovey编译、文件系统编译、编译完成镜像的更新与打包。 按照前面…

基于Spring Boot+VUE旅游管理系统

1管理员功能模块 管理员通过点击后台管理&#xff0c;进入页面可以输入用户名、密码、角色进行登录相对应操作&#xff0c;如图1所示。 图1管理员登录界面 管理员通过点击后台管理&#xff0c;进入页面可以填写首页、个人中心、用户管理、旅游方案管理、旅游购买管理、系统管…

多协议接入/GB28181/GAT1400协议/安防综合管理系统EasyCVR报错version`GLIBCXX_3.4.19‘not found如何处理?

多协议接入/GB28181/GAT1400协议/安防综合管理系统EasyCVR视频汇聚平台能在复杂的网络环境中&#xff0c;将前端设备统一集中接入与汇聚管理。智慧安防/视频存储/视频监控/视频汇聚EasyCVR平台可以提供实时远程视频监控、视频录像、录像回放与存储、告警、语音对讲、云台控制、…

RemObjects教程

File—Other…—RemObjects Data Abstract—ComboServer Step(1) 在出现的 NewRemObjects SDK Server 对话框中 Project Folder &#xff1a;文件存档路径 Project Name &#xff1a;工程名称 Also-Create a matching client application and a project group&#xff1a;在创…

【麒麟虚拟机】NetworkManager没有运行

麒麟V10 建linux麒麟虚拟机&#xff0c;发现&#xff0c;网络没有配置 提示&#xff0c;NetworkManager没有运行。编辑联接也不能配置 解决方法&#xff0c;在终端输入命令&#xff1a; sudo systemctl start NetworkManager 启动以后&#xff0c;编辑连接选自动以太网&…

事件、方法实现 on_radioGreen_clicked ,on_chkBoxUnder_clicked,Qfont,QPalette

Vertical Layout 、Horizontal Layout 实验窗体自适应布局 接上篇界面布局&#xff0c; 实验checkBox、radioBox 的事件槽&#xff0c; 使用Qfont组件变更纯文本框QPlainTextEdit中字体的下划线、加粗、斜体效果 使用调色板组QPalette变更纯文本框QPlainTextEdit中文本颜色 UI…

Sectigo OV通配符SSL证书多少钱?

在网络安全领域&#xff0c;SSL数字证书起着至关重要的作用&#xff0c;尤其是在保护网站和用户信息方面。而Sectigo OV通配符证书是一种常用的数字证书之一&#xff0c;它能够为同一域名下的多个子域名提供保护&#xff0c;还能够通过企业验证来增强安全性。那么&#xff0c;对…

Table 宽度超出页面宽度时,出现滚动条,单元格内容不换行实

修改前 方法 <div styleoverflow:auto><table stylewhite-space: nowrap></table> </div>修改后

【Gradio】Building With Blocks 块中的状 态 + 动态应用程序与渲染装饰器

State in Blocks 块中的状态 我们介绍了接口中的状态&#xff0c;这个指南将看看块中的状态&#xff0c;其工作原理大致相同。 全局状态 块中的全局状态与接口中的工作原理相同。在函数调用外创建的任何变量都是所有用户共享的引用。 会话状态 Gradio 支持会话状态&#xff…

IT入门知识第一部分《IT基础知识》(1/10)

目录 IT入门知识第一部分《IT基础知识》&#xff08;1/10&#xff09; 1.引言 2.第一部分&#xff1a;IT基础知识 2.1 计算机硬件 CPU&#xff1a;计算机的心脏 内存&#xff1a;数据的临时居所 存储设备&#xff1a;数据的长期仓库 输入输出设备&#xff1a;与计算机的…

LeetCode 48.旋转图像

1.做题要求: 2.从此题我们可以看出规律为第几行要变为倒数第几列&#xff0c;所以我们最好先把二维数组存入一维数组中&#xff0c;然后先从最后一列遍历&#xff0c;把一维数组里的元素&#xff0c;依次等于遍历的元素即可: void rotate(int** matrix, int matrixSize, int*…

【Seata】分布式事务解决方案——理论

目录 回顾什么是事务数据库事务的四大特性&#xff1a;ACID 分布式事务解释面临挑战分布式事务产生场景1. 单体架构中多数据源场景2. 分布式架构场景 分布式事务解决方案jta AtomikosLCN模式问题 Alibaba的Seata解决分布式事务问题 使用MQ解决分布式事务问题问题1&#xff1a;…

连接智能世界,Vatee万腾平台在行动

随着科技的飞速发展&#xff0c;我们生活在一个日益智能化的世界里。从智能家居到智慧城市&#xff0c;从无人驾驶到远程医疗&#xff0c;智能科技正以前所未有的速度改变着我们的生活。而在这场智能革命中&#xff0c;Vatee万腾平台凭借其前瞻性的视野和创新的实力&#xff0c…

企业级WordPress开发 – 创建企业级网站的优秀技巧

目录 1 “企业级”一词是什么意思&#xff1f; 2 使用 WordPress 进行企业级 Web 开发有哪些好处&#xff1f; 3 使用 WordPress 进行企业级开发的主要好处 3.1 WordPress 可扩展、灵活且价格实惠 3.2 WordPress 提供响应式 Web 开发 3.3 WordPress 提供巨大的可扩展…

全球进口家装水管十大品牌

随着科技进步发展&#xff0c;健康环保家居观念深入人心&#xff0c;家装管道用水安全对人们健康起来至关重要的作用&#xff0c;水管管道业主非常重视&#xff0c;但面临市场参差不齐的进口水管不知如何选择&#xff0c;下面就和大家推荐一下进口家装水管十大品牌 1.德国洁水…

未授权访问漏洞总结

以下总结了常见的未授权访问漏洞&#xff0c;还在持续更新中&#xff0c;遇到就会补充。欢迎大家关注~ 目录 FTP未授权访问&#xff08;21&#xff09; 漏洞原理 漏洞检测 漏洞利用 漏洞修复 LDAP未授权访问&#xff08;389&#xff09; 漏洞原理 漏洞检测 漏洞利用 …

MacOS - 启动台多了个『卸载 Adobe Photoshop』

问题描述 今天安装好了 Adobe Ps&#xff0c;但是发现启动台多了个『卸载 Adobe Photoshop』强迫症又犯了&#xff0c;想把它干掉&#xff01; 解决方案 打开访达 - 前往 - 资源库&#xff0c;搜索要卸载的名字就可以看到&#xff0c;然后移除到垃圾筐