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

news2024/12/24 10:05:33

使用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-23
      value = value.replace(/-(0+)/g, "0"); // 不能出现-0,-001,-0001类似
      value = value.replace(/^0+(\d)/, "0"); // 第一位0开头,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(/^\d/g, ""); // 不能以数字开头
      value = value.replace(/\-{2,}/g, "-"); // -只能保留一个
      value = value.replace(/(\d)\-/g, "$1"); // 数字后面不能接-,不能出现类似-11-2,12-,11-23
      value = 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-23
      value = 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后面为数字或者.,则过滤掉,取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(/^[^\-]/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

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

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

相关文章

孙溟㠭先生篆刻欣赏——“数”

孙溟㠭篆刻作品《数》 孙溟㠭篆刻作品《数》 线条之美可见一斑。游龙戏凤&#xff0c;嬉戏又雅趣。此时溟㠭先生之心境又如何&#xff1f; 人生几多戏谑&#xff0c;世事几多无常&#xff1b;趣心对待&#xff0c;过而无痕。何必拘束&#xff1f;何必强求规矩&#xff1f;突…

测量射频器件噪声系数的三种方法盘点

本文介绍了测量噪声系数的三种方法&#xff1a;增益法、Y系数法和噪声系数测试仪法。这三种方法的比较以表格的形式给出。 在无线通信系统中&#xff0c;噪声系数&#xff08;NF&#xff09;或者相对应的噪声因数(F)定义了噪声性能和对接收机灵敏度的贡献。本篇应用笔记详细阐…

P1043 [NOIP2003 普及组] 数字游戏

题目描述 丁丁最近沉迷于一个数字游戏之中。这个游戏看似简单&#xff0c;但丁丁在研究了许多天之后却发觉原来在简单的规则下想要赢得这个游戏并不那么容易。游戏是这样的&#xff0c;在你面前有一圈整数&#xff08;一共 &#xfffd;n 个&#xff09;&#xff0c;你要按顺序…

Java List、Set、Map区别

概述 集合类存放于java.util包中。集合类存放的都是对象的引用&#xff0c;而非对象本身。常见的集合主要有三种——Set(集&#xff09;、List&#xff08;列表&#xff09;和Map&#xff08;映射&#xff09;。List和Set 都实现了 Collection 接口&#xff0c;并且List和Set也…

php执行语句在MySQL批量插入大数据量的解决方案及计算程序执行时间(大数据量、MySQL语句优化)

MySQL里批量插入大数据的解决方案 前言一、PHP计算程序执行时间二、Mysql批量插入数据1.INSERT INTO 语句2.批量插入大数据2.1 使用循环$sql的方式2.2 循环(值1, 值2,....)的语句2.3测试过程出现的错误 前言 近期在MySQL报表开发过程中&#xff0c;需要爬取多API返回JSON数据&…

MySql中执行计划如何来的——Optimizer Trace | 京东云技术团队

作者&#xff1a;京东物流 籍磊 1.前言 当谈到MySQL的执行计划时&#xff0c;会有很多同学想&#xff1a;“我就觉得使用其他的执行方案比EXPLAIN语句输出的方案强&#xff0c;凭什么优化器做的决定与我得不一样&#xff1f;”。这个问题在MySQL 5.6之前或许自己很难解决&…

真题详解(磁盘)-软件设计(五十八)

真题详解&#xff08;MTTR&#xff09;-软件设计&#xff08;五十七)https://blog.csdn.net/ke1ying/article/details/130354940 1、2021年上半年 解析&#xff1a; 哈希地址 0 1 2 3 4 5 6 7 8 9 10 构建哈希表 第一步&#xff1a;3%11 3 &#xff0c;放在哈希地址3的位置…

如何申请gpt4.0-如何接入ChatGPT4

如何接入ChatGPT4 ChatGPT-4是OpenAI公司推出的最新自然语言处理技术&#xff0c;采用深度学习算法&#xff0c;旨在提供更加高效、准确的人工智能语言处理能力。如果您想要接入ChatGPT-4&#xff0c;您可以按照以下步骤&#xff1a; 注册OpenAI账号并申请API密钥&#xff1a;…

2022年NOC大赛创客智慧编程赛道Python初赛题,包含答案

目录 一、单选题 二、多选题 三、判断题 下载文档打印做题: NOC Python 初赛考题 一、单选题 <

【c语言】typedef的基本用法 | 定义格式

创作不易&#xff0c;本篇文章如果帮助到了你&#xff0c;还请点赞支持一下♡>&#x16966;<)!! 主页专栏有更多知识&#xff0c;如有疑问欢迎大家指正讨论&#xff0c;共同进步&#xff01; 给大家跳段街舞感谢支持&#xff01;ጿ ኈ ቼ ዽ ጿ ኈ ቼ ዽ ጿ ኈ ቼ ዽ ጿ…

【图像分割】【深度学习】SAM官方Pytorch代码-Image encoder模块Vision Transformer网络解析

【图像分割】【深度学习】SAM官方Pytorch代码-Image encoder模块Vision Transformer网络解析 Segment Anything&#xff1a;建立了迄今为止最大的分割数据集&#xff0c;在1100万张图像上有超过1亿个掩码&#xff0c;模型的设计和训练是灵活的&#xff0c;其重要的特点是Zero-s…

从Domino目录导出你想要的信息

大家好&#xff0c;才是真的好。 无论出于什么原因&#xff0c;很多时候&#xff0c;我们要从Domino目录&#xff08;names.nsf&#xff09;中导出人员、群组或Domino相关的配置信息。不过更多时候&#xff0c;还没开始导&#xff0c;很多人就说Domino封闭&#xff0c;不让导出…

由浅入深MFC学习摘记--第四部分下

目录 第十三章 多文件与多显示MDI 和 SDI动态拆分窗口静态拆分窗口拆分 拆分窗口示例同源子窗口CMDIFrameWnd::OnWindowNew范例程序 多文件 第十四章 MFC 多线程从操作系统层面看执行线程线程优先级从程序设计层面看执行线程MFC 多线程程序设计工作线程UI线程执行线程的结束线程…

CASAIM 自动化3d测量系统检测压缩机壳体尺寸偏差/装配验证

压缩机是一种将低压气体提升为高压气体的从动的流体机械&#xff0c;是制冷系统的心脏。 压缩机的壳体共有三部份组成&#xff1a;排气壳体&#xff08;主要是组成压缩机排气通道及接口&#xff09;&#xff0c;机体壳体&#xff08;主要是组成压缩机的涡盘、涡盘支承座、电机…

Bladex后端实现登入时间过期后自动跳转登入页

Bladex后端实现登入时间过期后自动跳转登入页 背景现状期待成果解决方法一找到鉴权配置页面重写拦截器addInterceptors创建CustomMiddleware编制拦截逻辑修改登入有效时常 背景现状 Bladex可手动设置过期时间&#xff0c;但是我使用的是springboot BladeX 2.8.1.RELEASE版本&am…

游戏测试的面试技巧

游戏测试的面试技巧 1.自我介绍 回答提示&#xff1a;一般人回答这个问题过于平常&#xff0c;只说姓名、年龄、爱好、工作经验 &#xff0c;这些在简历上都有&#xff0c;其实&#xff0c;企业最希望知道的是求职者能否胜任工作&#xff0c;包括&#xff1a;最强的技能、最深入…

docker镜像创建|实战案例(ssh|systemd|nginx|apache|tomcat)

docker镜像创建|实战案例&#xff08;ssh|systemd|nginx|apache|tomcat&#xff09; 一 Docker 镜像的创建1.基于现有镜像创建2基于本地模板创建3 基于Dockerfile 创建为什么Docker里的centos的大小才200M&#xff1f;DockerfileDocker 镜像结构的分层 4 Dockerfile 案例&#…

宝光股份 | 打造营销管理数据平台,实现营销管理和业务双提升

陕西宝光真空电器股份有限公司&#xff08;以下简称“宝光股份”&#xff09;&#xff0c;注册资本3.3亿元&#xff0c;于2002年1月在上海证券交易所上市&#xff08;股票代码&#xff1a;600379&#xff09;。 宝光股份已发展成为享誉国内外的真空灭弧室产销基地&#xff0c;…

Python每日一练(20230426)

目录 1. 删除重复字符 ※ 2. 颜色分类 &#x1f31f;&#x1f31f; 3. 计算圆周率 ※ &#x1f31f; 每日一练刷题专栏 &#x1f31f; Golang每日一练 专栏 Python每日一练 专栏 C/C每日一练 专栏 Java每日一练 专栏 1. 删除重复字符 原标题&#xff1a; 输出不重复…

mysql数据库SQL语句orderBy排序同时limit分页出现数据重复问题

先说解决方案&#xff1a;排序中使用唯一值&#xff08;例如主键id&#xff09;&#xff0c;保证每条数据不重复 SELECT * FROM table WHERE 1 1 ORDER BY create_time,id DESC LIMIT 0, 10;1、问题 MySQL官方描述&#xff1a; 如果多行在列中具有相同的值ORDER BY&#xff…