对input输入框的正则限制

news2024/11/26 18:22:52

一、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})?$/;

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

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

相关文章

如何打开azw/azw3文件?两个步骤解决

要打开AZW或AZW3格式的电子书&#xff0c;遵循以下步骤&#xff0c;无论你是Windows、Mac用户&#xff0c;还是使用移动设备&#xff0c;都可以轻松阅读这些亚马逊Kindle专用格式的电子书&#xff1a; 第一步&#xff1a;安装NeatReader&#xff1a; 访问NeatReader的官方网站或…

MySQl基础入门⑯【操作视图】完结

上一边文章内容 表准备 CREATE TABLE Students (id INT AUTO_INCREMENT PRIMARY KEY,name VARCHAR(100),email VARCHAR(255),major VARCHAR(100),score int,phone_number VARCHAR(20),entry_year INT,salary DECIMAL(10, 2) );数据准备 INSERT INTO Students (id, name, ema…

谷歌可穿戴设备与生成式AI模型PH-LLM:打造个性化健康监测与指导的新纪元

随着移动和可穿戴设备的普及&#xff0c;它们为个人健康监测提供了前所未有的机会&#xff0c;通过收集步数、心率变异性、睡眠持续时间等连续、精细和纵向数据&#xff0c;帮助用户实时跟踪自己的健康状况。这些数据不仅可以用于简单的监测&#xff0c;还可以结合生成式人工智…

什么是模型轻量化?如何自动进行模型轻量化?

轻量化是已经是3D可视化业界人所共知的一个概念&#xff0c;虽然至今没有任何严谨的学术或者理论定义&#xff0c;但是这个概念已经几乎成为了行业的标准。它的大意是说&#xff0c;一个适用用于浏览器端渲染的模型数据&#xff0c;包括几何数据和行业数据&#xff0c;必然可以…

数据库、中台、报表平台之间的关系

我最近在接触报表平台和中台&#xff0c;发现他们跟我平常用的数据库不是一个东西。然后&#xff0c;我开始了摸索他们的过程&#xff0c;终于&#xff0c;我在理清他们的关系以后&#xff0c;简单写一个入门级的区分。 数据库&#xff1a; 定义&#xff1a; 数据库是被长期存…

MySQL 下载及安装教程

MySQL是一款开源的关系数据库管理系统&#xff0c;被广泛应用于各种应用程序和网站的数据管理中。以下是下载和安装MySQL的详细步骤。 1. 访问MySQL官方网站 首先&#xff0c;打开你的浏览器&#xff0c;访问MySQL官方网站&#xff1a; MySQL官方网站: https://www.mysql.com …

同三维T80004EHU 高清HDMI/USB编码器

1路HDMI或1路USB输入&#xff0c;带1路3.5音频输入&#xff0c;高清1080P60 来百度APP畅享高清图片 产品简介&#xff1a; 同三维T80004EHU 高清 HDMI/USB编码器是一款1路HDMI或1路USB高清编码器&#xff0c;。可将 HDMI 或USB视频源编码压缩成网络流&#xff0c;通过有线网络…

springboot 3.x 之 集成rabbitmq实现动态发送消息给不同的队列

背景 实际项目中遇到针对不同类型的消息&#xff0c;发送消息到不同的队列&#xff0c;而且队列可能还不存在&#xff0c;需要动态创建&#xff0c;于是写了如下代码&#xff0c;实践发现没啥问题&#xff0c;这里分享下。 环境 springboot 3.2 JDK 17 rabbitMQ模型介绍 图片…

银河麒麟系统升级openssh至9.7p1

银河麒麟系统升级openssh至9.7p1 升级过程建议参照链接 https://blog.csdn.net/zt19820204/article/details/137877652 当前环境 开始安装 # 1.查看当前服务器的openssh版本 ssh -V# 2.openssh下载地址 https://cdn.openbsd.org/pub/OpenBSD/OpenSSH/portable/# 3.升级opens…

想停,不可能!

转融通出借数量突然暴增&#xff0c;逼得证监会火速出来辟谣&#xff0c;这是坊间这几天传得&#xff08;最&#xff09;火的事。 事情呢&#xff0c;一句话概括就是光6月12号那一天&#xff0c;就新增了1.7亿股&#xff0c;吓得大家都说是转融通疯狂报复来了&#xff01;但官家…

Google 新 AI 为视频生成配乐和对白;Runway 发布 Gen-3 视频生成模型丨 RTE 开发者日报 Vol.226

开发者朋友们大家好&#xff1a; 这里是 「RTE 开发者日报」 &#xff0c;每天和大家一起看新闻、聊八卦。我们的社区编辑团队会整理分享 RTE&#xff08;Real-Time Engagement&#xff09; 领域内「有话题的新闻」、「有态度的观点」、「有意思的数据」、「有思考的文章」、「…

烟雾自动监测识别摄像机

烟雾自动监测识别摄像机是现代城市安全管理的关键装备&#xff0c;其在各类场所的应用日益广泛&#xff0c;尤其在大型建筑、工厂和公共设施中&#xff0c;其重要性更为突出。该类摄像机采用先进的传感技术&#xff0c;能够实时监测环境中的烟雾密度和变化。通过高灵敏度的传感…

批量创建文件夹 就是这么简单 一招创建1000+文件夹

批量创建文件夹 就是这么简单 一招创建1000文件夹 在工作中&#xff0c;或者生活中&#xff0c;我们经常要用到批量创建文件夹&#xff0c;并且根据不同的工作需求&#xff0c;要求是不一样的&#xff0c;比如有些人需要创建上千个不一样名称的文件夹&#xff0c;如果靠手动创…

开发淘宝在线扭蛋机小程序:关键点与实战技巧

引言 在上一篇文章中&#xff0c;我们介绍了开发淘宝在线扭蛋机小程序的基本步骤和前期准备。但在实际开发过程中&#xff0c;还有一些关键点和实战技巧需要特别注意。本文将为您详细阐述这些关键点和技巧。 一、关键点 用户体验&#xff1a; 简洁明了的界面设计&#xff0c…

AI 视频生成工具 Sora 横空出世!一文带你了解 Sora:简介|主要功能|使用场景|平替工具等!

要说最近的头条热搜&#xff0c;非 Sora 莫属&#xff01;Sora 的诞生&#xff0c;再一次引发了人们对 AI 人工智能以及 AIGC 的关注。 对第一次听说 Sora 的人&#xff0c;可能会好奇&#xff0c;大家都在说的 Sora 是什么&#xff1f; Sora 是什么软件&#xff1f; Sora&a…

录制视频软件哪个好?录制视频,4款好软件推荐

随着网络技术的飞速发展和社交媒体的普及&#xff0c;录制视频已经成为人们记录生活、分享知识和展示才华的重要方式。在众多录制视频软件中&#xff0c;如何挑选一款功能强大、操作简便的工具&#xff0c;成为了许多用户的难题。本文将为您推荐4款优秀的录制视频软件&#xff…

守护电力心脏:国网电力监控运维平台的智慧使命

国网电力监控运维平台&#xff0c;以其强大的数据分析和处理能力&#xff0c;实现了对电网运行的实时监控。无论是电压波动、电流异常&#xff0c;还是设备故障&#xff0c;平台都能迅速捕捉并发出预警&#xff0c;确保电力供应的稳定和安全。 山海鲸可视化电力监控运维平台 想…

Unity引擎UGUI上特效处理重叠和裁剪问题的多种解决办法

大家好&#xff0c;我是阿赵。   使用Unity引擎开发项目&#xff0c;使用UGUI做界面&#xff0c;经常会遇到需要把特效放在UI上&#xff0c;但UI本身和特效又需要有遮挡关系和裁剪效果。   之前我介绍了一下使用MaskableGraphic的方式把粒子特效渲染在UI上&#xff0c;把粒…

闲鱼平台与宝藏详情API接口

一、闲鱼平台简介 闲鱼&#xff0c;是我国知名二手交易平台&#xff0c;成立于2015年&#xff0c;隶属于阿里巴巴集团。联讯数据用户可以在闲鱼上买卖二手商品&#xff0c;实现闲置物品的流通与再利用。随着我国互联网经济的快速发展&#xff0c;闲鱼平台用户规模不断扩大&…