vue中做一个最多输入一位小数且可以为负数的输入框(包含最前面最后面为小数点及多个-符号与前导零校验)

news/2024/12/25 9:47:41/

需求背景

日常开发中会有对input做校验的需求  例如做一个只可以输入一位小数及可以为负数的输入框  这时候会出现0开头、多个--、多个小数点插入或开头结尾为小数点的情况

实现过程

javascript"><el-inputstyle="width: 80px;"v-model="dataForm.low"@input="lowHandleInput($event, 'low')"@blur="lowValueBlur('low')"></el-input>
const formatValue=(value:any)=> {// 格式化输入的值,确保最多1位小数const [integerPart, decimalPart] = value.split(".");if (decimalPart && decimalPart.length > 1) {return `${integerPart}.${decimalPart.slice(0, 1)}`;}//只保留最前面的.value=value.replace(/\.(?=.*\.)/g, '');//多个-处理const firstChar = value[0] || '';const restOfString = value.slice(1).replace(/-/g, '');value= firstChar + restOfString;return value;}const  lowHandleInput=(value:any,name:string)=> {//基础格式检测const regex = /^[-]?\d*(\.\d{0,1})?$/;if (!regex.test(value)) {dataForm[name] = formatValue(value.replace(/[^-\d.]/g, "").replace(/(\.\d*)?\.$/, "$1"),);return;}dataForm[name] = formatValue(value);}const  lowValueBlur=(name:string)=> {if (dataForm[name].length) {//最后一位为.if (dataForm[name][dataForm[name].length - 1] == ".") {dataForm[name] = dataForm[name].slice(0, -1);}//最前面为.if (dataForm[name][0] == ".") {dataForm[name] = dataForm[name].slice(1);}//将前导零忽略dataForm[name]=String(Number(dataForm[name]));}}

失焦及输入事件可传key进行复用  若小数点需要支持多位 例如3位时可将正则及slice内数字1进行替换为3


http://www.ppmy.cn/news/1557958.html

相关文章

Ubuntu20.4 VPN+Docker代理配置

1.VPN:clash-for-Linux 首先配置VPN https://zhuanlan.zhihu.com/p/2852384493 2.配置docker 前面的步骤正常参照Ubuntu20.4配置docker的步骤 ubuntu20.04 安装docker (详细版)【24】_docker ubuntu image-CSDN博客 但是在run hello-world的时候总是显示超时连接 配置Doc…

信息安全技术——物理环境与设备安全、虚拟专用网

物理环境与设备安全 物理安全和设备安全 物理安全风险主要指由于周边环境和物理特性引起的设备和线路的不可用&#xff0c;而造成系统的不可用。 例如&#xff1a;设备被盗、设备老化、意外故障、无线电磁辐射泄密等。 设备安全包含防盗&#xff0c;容灾等内容 机房物理位置…

Cpp摘记:函数指针、函数模版、类模板

Cpp摘记&#xff1a;函数指针、函数模版、类模板 1. 函数指针2. 函数模版3. 类模板 1. 函数指针 \qquad 函数指针是一个很有意思的功能&#xff0c;在阅读代码的时候深有感触。一般所说的指针是指向变量&#xff0c;可以用指针指向不同变量的地址&#xff1b;函数指针也类似&am…

如何永久解决Apache Struts文件上传漏洞

Apache Struts又双叒叕爆文件上传漏洞了。 自Apache Struts框架发布以来&#xff0c;就存在多个版本的漏洞&#xff0c;其中一些漏洞涉及到文件上传功能。这些漏洞可能允许攻击者通过构造特定的请求来绕过安全限制&#xff0c;从而上传恶意文件。虽然每次官方都发布补丁进行修…

广州大学计算机组成原理课程设计

一.课设性质&#xff0c;目的&#xff0c;任务 《计算机组成与系统结构课程设计》是计算机学院各专业集中实践性环节之一&#xff0c;是学习完《计算机组成与系统结构》课程后进行的一次全面的综合练习。其目的是综合运用所学计算机原理知识&#xff0c;设计并实现一台模型计算…

Vue.js前端框架教程14:Vue组件el-popover

文章目录 el-popover 组件基础用法嵌套信息手动控制显示状态自定义挂载节点触发事件el-popover 组件 el-popover 是 Element UI 库中的一个弹出框组件,它用于在用户交互时显示额外的信息或操作。以下是 el-popover 组件的一些基本用法: 基础用法 el-popover 可以通过不同的…

ensp 关于acl的运用和讲解

ACL&#xff08;Access Control List&#xff0c;访问控制列表&#xff09;是一种常用于网络设备&#xff08;如路由器、交换机&#xff09;上的安全机制&#xff0c;用于控制数据包的流动与访问权限。ACL 可以指定哪些数据包允许进入或离开某个网络接口&#xff0c;基于不同的…

Java项目--仿RabbitMQ的消息队列--基于MQ的生产者消费者模型

目录 一、引言 二、生产者 三、消费者 四、扩展 五、总结 一、引言 本篇文章就是本次Java项目的最后一篇文章了&#xff0c;本篇文章主要介绍基于MQ的生产者消费者模型的代码编写 二、生产者 public class DemoConsumer {public static void main(String[] args) throws…