input输入框过滤非金额内容保留一个小数点和2位小数

这篇是输入框过滤非金额内容保留一个小数点和2位小数,金额的其他格式化可以看这篇文章常用的金额数字的格式化方法

js方法直接使用

该方式可以直接使用过滤内容,也可以到onInput或onblur等地方过滤,自行使用

/*** 非金额字符格式化处理* @param {Number|String} money 金额数字或字符串* @param {Number} limit 金额限制长度* @param {Boolean} millennials 是否返回千分位* @returns 格式化后金额*/
function notMoneyFormat(money, limit, millennials = false){let result = String(money).replace(/[^0-9.]/g, '')//清除“数字”和“.”以外的字符result = result.replace(/\.{2,}/g,"."); //只保留第一个. 清除多余的          result = result.replace(".","$#$").replace(/\./g,"").replace("$#$","."); result = result.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');//只能输入两个小数if(result.indexOf(".")< 0 && result !=""){//以上已经过滤,此处控制的是如果没有小数点,首位不能为类似于 01、02的金额 result= parseFloat(result); } // 数字长度怎么截取这里调整,目前是根据总长度限制,也可以改为小数点前位数格式化if(limit && String(result).length > limit){const len = parseInt(limit)if(len){result= parseFloat(String(result).substring(0, limit));}}if(millennials){return Number(result).toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ",")}return result
}

vue自定义指令方式使用

自定义使用过滤没有加千分位的方式输出,需要的可以自行添加

import Vue from 'vue'
// 非金额字符过滤
Vue.directive('not-money-format', {// binding 为数字总长度bind(el, binding){el.addEventListener('input', (e)=> {// 值不存在,则赋值为默认值if(e.target.value){let result = e.target.value.replace(/[^0-9.]/g, '')//清除“数字”和“.”以外的字符result = result.replace(/\.{2,}/g,"."); //只保留第一个. 清除多余的          result = result.replace(".","$#$").replace(/\./g,"").replace("$#$","."); result = result.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');//只能输入两个小数if(result.indexOf(".")< 0 && result !=""){//以上已经过滤,此处控制的是如果没有小数点,首位不能为类似于 01、02的金额 result= parseFloat(result); } // 数字长度怎么截取这里调整if(binding.value && String(result).length > binding.value){const len = Number(binding.value)if(len){result= parseFloat(String(result).substring(0, binding.value));}}e.target.value = result;e.target.dispatchEvent(new Event('input')); // 更新v-model绑定的值}})}
})

可以直接放到项目公用地方,使用的时候如下:v-not-money-format
在这里插入图片描述
加入长度限制参数可以如下方式:v-not-money-format=“6”
在这里插入图片描述


以上就是过滤非金额内容保留一个小数点和2位小数的方式,展示金额的方式可以参考常用的金额数字的格式化方法 里边有千分位和金额中文大写展示的处理方式

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

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

相关文章

精益思维引领AI创新浪潮:从理念到实践的蜕变!

在人工智能&#xff08;AI&#xff09;飞速发展的今天&#xff0c;精益思维作为一种追求卓越、持续改进的管理哲学&#xff0c;正逐渐成为推动AI创新的重要动力。本文&#xff0c;天行健咨询将探讨精益思维如何与AI创新相结合&#xff0c;以及这种结合如何推动科技进步和社会发…

springboot-基础-eclipse集成mybatis+使用方法+排错

备份笔记。所有代码都是2019年测试通过的&#xff0c;如有问题请自行搜索解决&#xff01; 目录 集成mybatis安装mybatis的jar包安装插件&#xff1a;mybatis-generator安装方法生成方法报错&#xff1a;java.lang.RuntimeException: Exception getting JDBC Driver mybatis注解…

一文讲清DTO、BO、PO、VO

DTO、BO、PO、VO是什么&#xff1f; 在后端开发中&#xff0c;比如传统的MVC架构和现在流行的DDD架构&#xff0c;经常会使用到下列几种对象的概念 DTO (Data Transfer Object) 数据传输对象&#xff1a; DTO设计模式用于将数据从服务端传输到客户端&#xff0c;或者在不同的…

使用 Koltin 集合时容易产生的 bug 注意事项

来看下面代码&#xff1a; class ChatManager {private val messages mutableListOf<Message>()/*** 当收到消息时回调*/fun onMessageReceived(message: Message) {messages.add(message)}/*** 当删除消息时回调*/fun onMessageDeleted(message: Message) {messages.r…

jenkins + gitlab + nginx 自动部署(webhook)

一、意义 当代码仓库被更新时&#xff0c;Jenkins会自动拉取代码进行构建。 适用于测试环境 二、jenkins gitlab nginx 自动部署(webhook) 1.准备服务器 ①安装Jenkins&#xff08;Java17&#xff0c;tomcat9&#xff09; ②安装gitlab &#xff08;16&#xff09; ③…

[JavaWeb玩耍日记]Mybatis快速入门与增删改查

目录 模块一&#xff1a;快速入门 1.创建数据库&#xff0c;插入数据 2.创建maven模块后&#xff0c;需要导入的依赖有哪些&#xff1f; 3.想要输出查询到的数据(包括日志打印)&#xff0c;需要创建哪些文件&#xff1f; 4.如何放置UserMapper接口与User类&#xff1f; 5.…

SpringCloud-Docker安装与详解

Docker 是一款强大的容器化平台&#xff0c;通过其轻量级的容器技术&#xff0c;使应用程序的开发、部署和管理变得更加便捷和高效。本文将深入探讨 Docker 的安装过程&#xff0c;并详细解析其基本概念、组件及常用命令&#xff0c;以帮助读者充分理解和熟练使用 Docker。企业…

C++:多重继承带来的问题及解决方法

在继承的过程中&#xff0c;如果一个派生类由多个基类派生&#xff0c;则称为多重继承&#xff08;实际开发中会引入困难&#xff0c;不建议使用&#xff09; 目录 多重继承的构造函数、析构函数调用顺序&#xff1a; 多重继承引发的二义性问题&#xff1a; 问题1&#xff…

【SVN】使用TortoiseGit删除Git分支

使用TortoiseGit删除Git分支 前言 平时我在进行开发的时候&#xff0c;比如需要开发一个新功能&#xff0c;这里以蘑菇博客开发服务网关-gateway功能为例 一般我都会在原来master分支的基础上&#xff0c;然后拉取一个新的分支【gateway】&#xff0c;然后在 gateway分支上进…

SQL Server添加用户登录

我们可以模拟一下让这个数据库可以给其它人使用 1、在计算机中添加一个新用户TeacherWang 2、在Sql Server中添加该计算机用户的登录权限 exec sp_grantlogin LAPTOP-61GDB2Q7\TeacherWang -- 之后这个计算机用户也可以登录数据库了 3、添加数据库的登录用户和密码&#xff0…

微信小程序-底层框架-开发文档学习笔记

查看更多学习笔记&#xff1a;GitHub&#xff1a;LoveEmiliaForever 微信小程序开发指南 微信小程序开发文档 双线程模型 小程序是基于双线程模型的&#xff0c;在这个模型中&#xff0c;小程序的逻辑层与渲染层分开在不同的线程运行 技术选型 在对小程序的架构设计时的要求…

YOLOv7代码解读[02] cfg/training/yolov7.yaml解读

ELAN结构 MP结构 SPPCSPC结构 ELAN-H结构 # parameters nc: 80 # number of classes depth_multiple: 1.0 # model depth multiple width_multiple: 1.0 # layer channel multiple# anchors anchors:- [12,16, 19,36, 40,28] # P3/8- [36,75, 76,55, 72,146] #…

UnityWebGL UGUI中文不显示问题

这是Unity编辑中效果 打包成webgl后的效果&#xff08;中文没有显示出来&#xff09; 解决方法 将Unity默认使用的Arial替换成中文字体。 1.找到电脑字体库&#xff08;win电脑字体库路径&#xff1a;C:\Windows\Fonts &#xff1b;Mac电脑搜索“字体册”&#xff09;。 2.将…

大数据职业技术培训包含哪些

技能提升认证考试&#xff0c;旨在通过优化整合涵盖学历教育、职业资格、技术水平和高新技术培训等各种教育培训资源&#xff0c;通过大数据行业政府引导&#xff0c;推进教育培训的社会化&#xff0c;开辟教育培训新途径&#xff0c;围绕大数据技术人才创新能力建设&#xff0…

【GPTs分享】每日GPTs分享之Image Generator Tool

今日GPTs分享&#xff1a;Image Generator Tool。Image Generator Tool是一种基于人工智能的创意辅助工具&#xff0c;专门设计用于根据文字描述生成图像。这款工具结合了专业性与友好性&#xff0c;鼓励用户发挥创造力&#xff0c;同时提供高效且富有成效的交互体验。 主要功能…

Vue.js+SpringBoot开发校园失物招领管理系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、研究内容2.1 招领管理模块2.2 寻物管理模块2.3 系统公告模块2.4 感谢留言模块 三、界面展示3.1 登录注册3.2 招领模块3.3 寻物模块3.4 公告模块3.5 感谢留言模块3.6 系统基础模块 四、免责说明 一、摘要 1.1 项目介绍 校园失物招领…

【51单片机】红外遥控红外遥控电机调速(江科大)

1.红外遥控简介 红外遥控是利用红外光进行通信的设备,由红外LED将调制后的信号发出,由专用的红外接收头进行解调输出 通信方式:单工,异步 红外LED波长:940nm 通信协议标准:NEC标准 2.硬件电路 红外发送部分 IN高电平时&#xff0c;LED不亮&#xff0c;IN低电平时&…

STM32学习3 寄存器映射和GPIO寄存器编程

STM32学习3 寄存器映射和GPIO寄存器编程 一、STM32外设内存空间1. 内存空间划分2. 区域功能说明&#xff08;1&#xff09;block0&#xff08;2&#xff09;block1&#xff08;3&#xff09;block2&#xff08;4&#xff09;block3~4&#xff08;5&#xff09;block5&#xff0…

UE4 材质多张图片拼接成一张图片(此处用2×2拼接)

UE4 材质多张图片拼接成一张图片&#xff08;此处用22拼接&#xff09; //TexCoord,TextureA,TextureB,TextureC,TextureDfloat3 ReturnTexture TextureA; if(TexCoord.x < 0.5 && TexCoord.y < 0.5) {ReturnTexture TextureA; } else if(TexCoord.x > 0.5…

对Redis锁延期的一些讨论与思考

上一篇文章提到使用针对不同的业务场景如何合理使用Redis分布式锁&#xff0c;并引入了一个新的问题 若定义锁的过期时间是10s&#xff0c;此时A线程获取了锁然后执行业务代码&#xff0c;但是业务代码消耗时间花费了15s。这就会导致A线程还没有执行完业务代码&#xff0c;A线程…