当前位置: 首页 > news >正文

el-input 只能输入整数(包括正数、负数、0)或者只能输入整数(包括正数、负数、0)和小数

使用el-input-number标签

在这里插入图片描述

 也可以使用type=numbe和v-model.number属性,两者结合使用,能满足大多数需求,如果还不满足,可以再结合正则表达式过滤

<el-input v-model.number="value" type="number" />

el-input标签type=number或者v-model.number属性,可能也没有完全符合我们想要的结果,所以直接使用正则表达式过滤

<el-input v-model="height" placeholder="请输入" @input="handleEdit" />

el-input 只能输入正整数(包括0)

// 在 Input 值改变时触发
handleEdit(e) {let value = e.replace(/[^\d]/g, ""); // 只能输入数字value = value.replace(/^0+(\d)/, "$1"); // 第一位0开头,0后面为数字,则过滤掉,取后面的数字value = value.replace(/(\d{15})\d*/, '$1') // 最多保留15位整数this.height = value
}

el-input 只能输入正整数(不包括0)

// 在 Input 值改变时触发
handleEdit(e) {let value = e.replace(/^(0+)|[^\d]+/g,''); // 以0开头或者输入非数字,会被替换成空value = value.replace(/(\d{15})\d*/, '$1') // 最多保留15位整数this.height = value
}

el-input 只能输入负整数(包括0)

// 在 Input 值改变时触发
handleEdit(e) {let value = e.replace(/[^\-\d]/g, ""); // 只能输入-和数字value = value.replace(/^[1-9]/g, ""); // 不能以1-9开头value = value.replace(/\-{2,}/g, "-"); // -只能保留一个value = value.replace(/(\d)\-/g, "$1"); // 数字后面不能接-,不能出现类似-11-2,12-,11-23value = value.replace(/-(0+)/g, "0"); // 不能出现-0,-001,-0001类似value = value.replace(/^0+(\d)/, "0"); // 第一位0开头,0后面为数字,则过滤掉,取0value = value.replace(/(-\d{15})\d*/, '$1') // 最多保留15位整数this.height = value
}

el-input 只能输入负整数(不包括0)

// 在 Input 值改变时触发
handleEdit(e) {let value = e.replace(/[^\-\d]/g, ""); // 只能输入-和数字value = value.replace(/^\d/g, ""); // 不能以数字开头value = value.replace(/\-{2,}/g, "-"); // -只能保留一个value = value.replace(/(\d)\-/g, "$1"); // 数字后面不能接-,不能出现类似-11-2,12-,11-23value = value.replace(/(-)0+/g, "$1"); // 不能出现-0,-001,-0001类似value = value.replace(/(-\d{15})\d*/, '$1') // 最多保留15位整数this.height = value
}

el-input 只能输入整数(包括正整数、负整数、0)

// 在 Input 值改变时触发
handleEdit(e) {let value = e.replace(/[^\-\d]/g, ""); // 只能输入-和数字value = value.replace(/\-{2,}/g, "-"); // -只能保留一个value = value.replace(/(\d)\-/g, "$1"); // 数字后面不能接-,不能出现类似-11-2,12-,11-23value = value.replace(/-(0+)/g, "0"); // 不能出现-0,-001,-0001类似value = value.replace(/^0+(\d)/, "$1"); // 第一位0开头,0后面为数字,则过滤掉,取后面的数字value = value.replace(/(-?\d{15})\d*/, '$1') // 最多保留15位整数this.height = value
}

el-input 只能输入正小数(包括0)

// 在 Input 值改变时触发
handleEdit(e) {let value = e.replace(/[^\d.]/g, '') // 只能输入数字和.value = value.replace(/^\./g, '')  //第一个字符不能是.value = value.replace(/\.{2,}/g, '.') // 不能连续输入.value = value.replace(/(\.\d+)\./g, '$1') // .后面不能再输入.value = value.replace(/^0+(\d)/, '$1') // 第一位0开头,0后面为数字,则过滤掉,取后面的数字value = value.replace(/(\d{15})\d*/, '$1') // 最多保留15位整数value = value.replace(/(\.\d{2})\d*/, '$1')// 最多保留2位小数this.height = value
}

el-input 只能输入负小数(包括0)

 // 在 Input 值改变时触发
handleEdit(e) {let value = e.replace(/[^\-\d.]/g, ""); // 只能输入-和数字和.value = value.replace(/^[^\-0]/g, ""); // 只能-和0开头value = value.replace(/\-{2,}/g, "-"); // 不能连续输入-value = value.replace(/(-)\./g, "$1"); // -后面不能输入.value = value.replace(/\.{2,}/g, "."); // 不能连续输入.value = value.replace(/(\.\d+)\./g, "$1"); // .后面不能再输入.value = value.replace(/(\d+|\.)-/g, "$1"); // 数字和.后面不能接-,不能出现类似11-, 12.-value = value.replace(/(-)0+(\d+)/g, '$1$2') // 不能出现-01,-02类似value = value.replace(/^0+(\d|.)/, "0"); // 第一位0开头,0后面为数字或者.,则过滤掉,取0value = value.replace(/(\d{15})\d*/, '$1') // 最多保留15位整数value = value.replace(/(\.\d{2})\d*/, '$1')// 最多保留2位小数this.height = value
}

el-input 只能输入负小数(不包括0)

// 在 Input 值改变时触发
handleEdit(e) {let value = e.replace(/[^\-\d.]/g, ""); // 只能输入-和数字和.value = value.replace(/^[^\-]/g, ""); // 只能-开头value = value.replace(/\-{2,}/g, "-"); // 不能连续输入-value = value.replace(/(-)\./g, "$1"); // -后面不能输入.value = value.replace(/\.{2,}/g, "."); // 不能连续输入.value = value.replace(/(\.\d+)\./g, "$1"); // .后面不能再输入.value = value.replace(/(\d+|\.)-/g, "$1"); // 数字和.后面不能接-,不能出现类似11-, 12.-value = value.replace(/(-)0+(\d+)/g, '$1$2') // 不能出现-01,-02类似value = value.replace(/(\d{15})\d*/, '$1') // 最多保留15位整数value = value.replace(/(\.\d{2})\d*/, '$1')// 最多保留2位小数this.height = value
}

el-input 输入整数(包括正数、负数、0)和小数,保留15位整数和2位小数

// 在 Input 值改变时触发
handleEdit(e) {let value = e.replace(/[^\-\d.]/g, '') // 只能输入.和-和数字value = value.replace(/^\./g, '')  //第一个字符不能是.value = value.replace(/\.{2,}/g, '.') // 不能连续输入.value = value.replace(/(\.\d+)\./g, '$1') // .后面不能再输入.value = value.replace(/(-)\./g, '$1') // -后面不能输入.value = value.replace(/\-{2,}/g, '-') // -只能保留一个value = value.replace(/(\d+|\.)-/g, '$1') // 数字和.后面不能接-,不能出现类似11-, 12.-value = value.replace(/-(0){2,}/g, "$1") // 不能出现-00,-001,-0001类似value = value.replace(/(-)0+(\d+)/g, '$1$2') // 不能出现-01,-02类似value = value.replace(/^0+(\d)/, '$1') // 第一位0开头,0后面为数字,则过滤掉,取后面的数字value = value.replace(/(\d{15})\d*/, '$1') // 最多保留15位整数value = value.replace(/(\.\d{2})\d*/, '$1')// 最多保留2位小数this.height= value
}

$1表示匹配第一个括号里的内容,$2表示匹配第二个括号的内容,比如

value = value.replace(/(-)\./g, '$1') // 输入框输入-.就会替换成-
value = value.replace(/(-)(0{2,})/g, '$1$2') // 输入-00,-000,就会替换成-0

相关文章:

el-input 只能输入整数(包括正数、负数、0)或者只能输入整数(包括正数、负数、0)和小数

使用el-input-number标签 也可以使用typenumbe和v-model.number属性&#xff0c;两者结合使用&#xff0c;能满足大多数需求&#xff0c;如果还不满足&#xff0c;可以再结合正则表达式过滤 <el-input v-model.number"value" type"number" /> el-i…...

Docker Compose的常用命令与docker-compose.yml脚本属性配置

Docker Compose的常用命令与配置 常见命令ps&#xff1a;列出所有运行容器logs&#xff1a;查看服务日志输出port&#xff1a;打印绑定的公共端口build&#xff1a;构建或者重新构建服务start&#xff1a;启动指定服务已存在的容器stop&#xff1a;停止已运行的服务的容器&…...

with语句和上下文管理器(py编程)

1. with语句的使用 基础班向文件中写入数据的示例代码: # 1、以写的方式打开文件f open("1.txt", "w")# 2、写入文件内容f.write("hello world")# 3、关闭文件f.close()代码说明: 文件使用完后必须关闭&#xff0c;因为文件对象会占用操作系统…...

《JavaEE初阶》HTTP协议和HTTPS

《JavaEE初阶》HTTP协议和HTTPS 文章目录 《JavaEE初阶》HTTP协议和HTTPSHTTP协议是应用层协议:使用Fiddler抓取HTTP请求和响应:Fiddler的下载和基本使用:Fiddler的中间代理人身份:其他抓包工具: 先简单认识HTTP请求与HTTP响应:HTTP请求:HTTP响应: HTTP请求详解:首行&#xff1…...

微信小程序 | 基于高德地图+ChatGPT实现旅游规划小程序

&#x1f388;&#x1f388;效果预览&#x1f388;&#x1f388; ❤ 路劲规划 ❤ 功能总览 ❤ ChatGPT交互 一、需求背景 五一假期即即将到来&#xff0c;在大家都阳过之后&#xff0c;截止到目前这应该是最安全的一个假期。所以出去旅游想必是大多数人的选择。 然后&#x…...

Excel技能之实用技巧,高手私藏

今天来讲一下Excel技巧&#xff0c;工作常用&#xff0c;高手私藏。能帮到你是我最大的荣幸。 与其加班熬夜赶进度&#xff0c;不如下班学习提效率。能力有成长&#xff0c;效率提上去&#xff0c;自然不用加班。 消化吸收&#xff0c;工作中立马使用&#xff0c;感觉真不错。…...

黑马程序员Java零基础视频教程笔记-运算符

文章目录 一、算数运算符详解和综合练习二、隐式转换和强制转换三、字符串和字符的加操作四、自增自减运算符五、赋值运算符和关系运算符六、四种逻辑运算符七、短路逻辑运算符八、三元运算符 一、算数运算符详解和综合练习 1. 运算符和表达式 ① 运算符&#xff1a;对字面量…...

Microsoft Data Loss Prevention(DLP)部署方案

目录 一、前言 二、部署流程 步骤一:确定数据需求 步骤二:规划信息保护策略...

win系统使用frp端口映射实现内网穿透,配置“任务计划程序”提高稳定性

Github下载最新版frp: https://github.com/fatedier/frp/releases/download/v0.48.0/frp_0.48.0_windows_amd64.zip 解压把frpc.exe和frpc.ini放到D:\program\frp目录下&#xff0c;修改frpc.ini内容如下&#xff1a; [common] server_addr 服务器域名或IP&#xff0c;假设…...

python工具方法 39 大图裁剪为小图|小图还原成大图(含生成大图伪标签)

在进行遥感影像的处理中,通常都是几万x几万的大型影像,这给数据标注(图像尺寸过大使标注软件不能正常打开或过大给标注带来困难)、训练模型(只能使用小图)、测试图片(在小图上预测需要还原成大图)、生成伪标签(需要大图的伪标签,而不是小图的)都带来了困难。针对此进…...

MUSIC算法仿真

MUSIC算法原理及仿真 DOA波达方向估计MUSIC算法概述MUSIC算法原理MUSIC算法MATLB仿真 DOA波达方向估计 DOA&#xff08;Direction Of Arrival&#xff09;波达方向是指通过阵列信号处理来估计来波的方向&#xff0c;这里的信源可能是多个&#xff0c;角度也有多个。DOA技术主要…...

redis 数据类型详解 以及 redis适用场景场合

1. MySqlMemcached架构的问题 实际MySQL是适合进行海量数据存储的&#xff0c;通过Memcached将热点数据加载到cache&#xff0c;加速访问&#xff0c;很多公司都曾经使用过这样的架构&#xff0c;但随着业务数据量的不断增加&#xff0c;和访问量的持续增长&#xff0c;我们遇…...

python基于轻量级YOLOv5的生猪检测+状态识别分析系统

在我之前的一篇文章中有过生猪检测盒状态识别相关的项目实践&#xff0c;如下&#xff1a; 《Python基于yolov4实现生猪检测及状态识》 感兴趣的话可以自行移步阅读&#xff0c;这里主要是基于同样的技术思想&#xff0c;将原始体积较大的yolov4模型做无缝替换&#xff0c;使…...

阅读笔记 First Order Motion Model for Image Animation

文章解决的是图片动画的问题。假设有源图片和驱动视频&#xff0c;并且其中的物体是同一类的&#xff0c;文章的方法让源图片中的物体按照驱动视频中物体的动作而动。 文章的方法只需要一个同类物体的视频集&#xff0c;不需要而外的标注。 方法 该方法基于self-supervised策…...

【计算机图形学】课堂习题汇总

在直线的光栅化算法中&#xff0c;如果不考虑最大位移方向则可能得到怎样的直线&#xff1f; A&#xff1a;斜率为1的线 B&#xff1a;总是垂直的 C&#xff1a;离散的点&#xff0c;无法构成直线 D&#xff1a;总是水平的 在直线的改进的Bresenham算法中&#xff0c;每当误…...

国外导师对博士后申请简历的几点建议

正所谓“工欲善其事&#xff0c;必先利其器”&#xff0c;想要申请国外的博士后职位&#xff0c;就要准备好相应的申请文书材料。如果说Cover Letter是职位的窍门砖&#xff0c;那么申请者的简历就是争取职位的决定性筹码。 相信大家已经看过许多简历的模版了&#xff0c;但是…...

【五一创作】Scratch资料袋

Scratch软件是免费的、免费的、免费的。任何需要花钱才能下载Scratch软件的全是骗子。 1、什么是Scratch Scratch是麻省理工学院的“终身幼儿园团队”开发的一种图形化编程工具。是面向青少年的一款模块化&#xff0c;积木化、可视化的编程语言。 什么是模块化、积木化&…...

数据库基础篇 《17.触发器》

数据库基础篇 《17.触发器》 在实际开发中&#xff0c;我们经常会遇到这样的情况&#xff1a;有 2 个或者多个相互关联的表&#xff0c;如商品信息和库存信息分别存放在 2 个不同的数据表中&#xff0c;我们在添加一条新商品记录的时候&#xff0c;为了保证数据的完整性&#…...

03 - 大学生如何使用GPT

大学生如何使用GPT提高学习效率 一、引言 在当今的高速发展的信息时代&#xff0c;大学生面临着越来越多的学习挑战。作为一种先进的人工智能技术&#xff0c;GPT为大学生提供了一种强大的学习工具。本文将介绍大学生在不同场景中如何使用GPT来提高学习效率&#xff0c;并给出…...

【P1】Jmeter 准备工作

文章目录 一、Jmeter 介绍1.1、Jmeter 有什么样功能1.2、Jmeter 与 LoadRunner 比较1.3、常用性能测试工具1.4、性能测试工具如何选型1.5、学习 Jmeter 对 Java 编程的要求 二、Jmeter 软件安装2.1、官网介绍2.2、JDK 安装及环境配置2.3、Jmeter 三种模式2.4、主要配置介绍2.4.…...

Android 性能优化:内存泄漏排查与解决

Android性能优化&#xff1a;内存泄漏排查与解决 在Android开发中&#xff0c;性能优化是提升用户体验的关键环节&#xff0c;而内存泄漏则是常见却容易被忽视的问题。内存泄漏会导致应用占用内存持续增加&#xff0c;最终引发卡顿、崩溃甚至被系统强制终止。如何高效排查与解…...

SNOMED CT入门指南:从概念、关系到数据文件,手把手带你理解这个医学术语标准

SNOMED CT技术解析&#xff1a;从数据结构到医疗信息系统的实战指南 在医疗信息化领域&#xff0c;数据标准化是打破信息孤岛的关键。当不同医院的电子病历系统使用各自独立的术语体系时&#xff0c;跨机构的数据交换就像一场没有翻译的多国会议——充满误解和低效。这正是SNOM…...

组态王Modbus高低字节调整实战:3种方法解决数据乱跳问题(附modbusmaster.ini配置)

组态王Modbus高低字节调整实战&#xff1a;3种方法解决数据乱跳问题&#xff08;附modbusmaster.ini配置&#xff09; 工业现场的数据通讯就像一场精密的外科手术&#xff0c;任何一个字节的错位都可能导致整个系统"瘫痪"。最近在调试某化工厂DCS系统时&#xff0c;遇…...

图解CV中的交叉注意力:用QKV三兄弟搞定图像特征增强(附PyTorch代码示例)

图解CV中的交叉注意力&#xff1a;用QKV三兄弟搞定图像特征增强&#xff08;附PyTorch代码示例&#xff09; 在计算机视觉领域&#xff0c;注意力机制正逐渐成为提升模型性能的关键技术。不同于传统卷积操作的固定感受野&#xff0c;注意力机制赋予模型动态聚焦重要区域的能力。…...

别再用鼠标点来点去了!用JavaScript原生DOM操作实现按钮高亮切换(附完整代码)

别再用鼠标点来点去了&#xff01;用JavaScript原生DOM操作实现按钮高亮切换&#xff08;附完整代码&#xff09; 在Web开发中&#xff0c;交互式按钮状态管理是最基础却最常被忽视的技能之一。很多开发者习惯依赖jQuery或前端框架提供的便捷方法&#xff0c;却对原生JavaScrip…...

AI-AGENT概念解析 - LLM任务训练

**问题&#xff1a;LLM大模型是否针对写作&#xff0c;做PPT&#xff0c;编写程序&#xff0c;拆解任务这些输入参数&#xff0c;用同一个大模型需要训练为不同的模型结构或参数化的权重矩阵去适应那些不同的提示词输入参数&#xff1f; 对于不同的任务类型&#xff08;写作、做…...

终极指南:如何快速实现CocoaHTTPServer自定义连接处理

终极指南&#xff1a;如何快速实现CocoaHTTPServer自定义连接处理 【免费下载链接】CocoaHTTPServer A small, lightweight, embeddable HTTP server for Mac OS X or iOS applications 项目地址: https://gitcode.com/gh_mirrors/co/CocoaHTTPServer CocoaHTTPServer是…...

3大维度解析Awesome Claude Skills:重新定义AI效率边界

3大维度解析Awesome Claude Skills&#xff1a;重新定义AI效率边界 【免费下载链接】awesome-claude-skills A curated list of awesome Claude Skills, resources, and tools for customizing Claude AI workflows 项目地址: https://gitcode.com/GitHub_Trending/aw/awesom…...

移动机器人自主导航与集群协同:从单机优化到群体智能

1. 移动机器人自主导航的核心框架 当你第一次看到扫地机器人在房间里自如穿梭时&#xff0c;有没有好奇过它是如何做到的&#xff1f;这背后就是移动机器人自主导航技术的魔力。简单来说&#xff0c;自主导航系统就像机器人的"大脑"&#xff0c;由感知、规划、控制三…...

UniApp跨平台跳转外部链接全攻略:H5、App与小程序实战解析

1. UniApp跳转外部链接的核心逻辑 跨平台开发最头疼的就是"一套代码适配多个平台"&#xff0c;而外部链接跳转恰恰是平台差异最明显的功能之一。我做过十几个UniApp项目&#xff0c;发现90%的开发者第一次遇到这个问题都会懵——为什么在H5能用的代码&#xff0c;打包…...