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://www.mzph.cn/news/705958.shtml

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

相关文章

EtherCAT主站转Ethernet/IP网关

产品功能 1 YC-ECTM-EIP工业级Profinet 网关 2 EtherCAT转 EtherNet/IP 3 支持EtherNet/IP从站 4 即插即用 无需编程 轻松组态 ,即实现数据交互 5 导轨安装 支持提供EDS文件 6 EtherNET/IP与EtherCAT互转数据透明传输可接入PLC组态 支持CodeSys/欧姆龙PLC&#xff0c;西门…

pytorch中的各种计算

对tensor矩阵的维度变换&#xff0c;加减乘除等是深度学习中的常用操作&#xff0c;本文对一些常用方法进行总结 矩阵乘法 混合矩阵相乘&#xff0c;官网 torch.matmul(input, other, *, outNone) → Tensor这个方法执行矩阵相乘操作&#xff0c;需要第一个矩阵的最后一个维度…

【递归】【回溯】Leetcode 112. 路径总和 113. 路径总和 II

【递归】【回溯】Leetcode 112. 路径总和 113. 路径总和 II 112. 路径总和解法&#xff1a;递归 有递归就有回溯 记得return正确的返回上去 113. 路径总和 II解法 递归 如果需要搜索整棵二叉树&#xff0c;那么递归函数就不要返回值 如果要搜索其中一条符合条件的路径&#xff…

Zoho ToDo 满足您的需求:任务管理满足隐私和安全要求

任务管理工具已经成为我们日常生活中不可或缺的一部分&#xff0c;它们帮助我们处理各种事务&#xff0c;从杂项和愿望清单到管理截止日期和资源。这些工具不仅仅是简单的任务列表&#xff0c;它们掌握了项目的蓝图、雄心勃勃的目标和完成的最后期限。然而随着这些工具的使用越…

Unity接入SQLite (三):C#封装SQL命令

在上一篇《Unity接入SQLite (二):SQL常用命令》介绍了常用的SQL命令&#xff0c;比如连接数据库、创建表、删除表、插入数据、更新数据等。这篇文章是Unity接入SQLite的实战篇&#xff0c;主要包括对于各种SQL命令的封装和示例。 1.介绍SQLite中重要类 与SQLite命令相关的两个…

开源软件:塑造软件行业未来的协作与创新之力

随着信息技术的迅猛发展&#xff0c;开源软件已经逐渐成为软件开发的潮流&#xff0c;以其独特的低成本、可协作性和透明度等特性&#xff0c;在全球范围内引起了广泛的关注和应用。越来越多的企业和个人选择使用开源软件&#xff0c;这不仅推动了软件行业的繁荣&#xff0c;还…

小程序应用、页面、组件生命周期

引言 微信小程序生命周期是指在小程序运行过程中&#xff0c;不同阶段触发的一系列事件和函数。这一概念对于理解小程序的整体架构和开发流程非常重要。本文将介绍小程序生命周期的概念以及在不同阶段触发的关键事件&#xff0c;帮助开发者更好地理解和利用小程序的生命周期。 …

人工智能大学课程-ChatGPT生成

抖动的声音&#xff1a;dilo_Abel 视频号&#xff1a;dilo_Abel的个人空间-dilo_Abel个人主页-哔哩哔哩视频 年级课程名称推荐书籍书籍内容描述说明大一年级计算机科学导论"Computer Science: An Overview" by J. Glenn Brookshear介绍计算机科学的基本概念、原理和…

Maven jar 的查找及依赖版本确定

关于 jar 的查找&#xff0c;及使用版本的确定&#xff0c;及依赖的版本确认&#xff0c;避免 jar 冲突或版本不兼容 在使用 maven 构建项目时&#xff0c;需要的 jar 可以通过在 https://mvnrepository.com/ 可以找到部分需要的依赖&#xff0c;这里以查找 mybatis 依赖为例&…

torch.nn.embedding的介绍和用法

nn.Embedding 是 PyTorch 中的一个神经网络层&#xff0c;它主要用于将离散的、高维的数据&#xff08;如词索引&#xff09;转换为连续的、低维的空间中的稠密向量表示。 在自然语言处理&#xff08;NLP&#xff09;中&#xff0c;这个层通常用于实现词嵌入&#xff08;Word E…

axios封装

一、axios是什么特性基本使用二、为什么要封装三、如何封装设置接口请求前缀设置请求头与超时时间封装请求方法请求拦截器响应拦截器小结 一、axios是什么 axios 是一个轻量的 HTTP客户端 基于 XMLHttpRequest 服务来执行 HTTP 请求&#xff0c;支持丰富的配置&#xff0c;支…

shell和go实现:防火墙放行所有端口,唯独拦截80端口

shell 1.防火墙放行所有端口&#xff0c;唯独拦截80端口 1.1拦截 mkdir -p /data/shellscat > /data/shells/02nginx_close.sh <<-EOF #!/bin/bash# 检查Linux系统版本 linux_version$(cat /etc/redhat-release)# 根据Linux系统版本选择相应的防火墙开启命令和保存…

python入门介绍

目录 内存 外存&#xff08;硬盘等&#xff09;区别 显卡&#xff1a; python的优缺点 内存 外存&#xff08;硬盘等&#xff09;区别 内存的存储空间小&#xff0c;外存的存储空间大内存的访问速度快&#xff0c;外存的访问速度慢内存比外存成本更高内存上的数据容易丢失&…

MongoDB - writeConcern

writeConcern 是 MongoDB 提供的一个功能&#xff0c;用于控制写操作的确认级别&#xff0c;以确保数据的持久性和一致性。在分布式环境中&#xff0c;写入操作可能会面临网络延迟、节点故障等情况&#xff0c;writeConcern 允许您指定在写入数据时所需的确认级别&#xff0c;以…

ZTE E8820V2重启偶现5G wifi丢失问题

使用ZTE E8820V2设备时,发现设备在多次重启过程中会出现5G wifi信号丢失的情况。 1. 现象日志 使用老毛子固件,具体丢失时会出现相关log: 2. 问题原因: GPIO#19 是 PCIE reset 外,GPIO#26 也要 reset。 3. 解决方法: E8820V2/rt-n56u/trunk$ git diff linux-3.4.x…

Aethir推出其首次去中心化AI节点售卖

Aethir&#xff0c;去中心化GPU云基础设施领导者&#xff0c;宣布其备受期待的节点销售。Aethir是一家企业级的以AI和游戏为重点的GPU即服务提供商。Aethir的去中心化云计算基础设施使GPU提供商能够与需要NVIDIA的H100芯片提供强大AI/ML任务支持的企业客户相连接。 此外&#x…

BUU [CISCN2019 华东南赛区]Web4

BUU [CISCN2019 华东南赛区]Web4 题目描述&#xff1a;Click to launch instance. 开题&#xff1a; 点击链接&#xff0c;有点像SSRF 使用local_file://协议读到本地文件&#xff0c;无法使用file://协议读取&#xff0c;有过滤。 local_file://协议&#xff1a; local_file…

JavaWeb 自己给服务器安装SQL Server数据库遇到的坑

之前买的虚拟主机免费送了一个SQL Server数据库&#xff0c;由于服务器提供商今年下架我用的那款虚拟主机产品&#xff0c;所以数据库也被收回了。我买了阿里云云服务器&#xff0c;但是没有数据库&#xff0c;于是自己装了一个SQL Server数据库&#xff0c;总结一下遇到的坑。…

小程序画布(二维地图线)

首先开始是想用小程序兼容openlayers的&#xff0c;但是了解到用不了&#xff0c;那就用画布来解决 实际效果如下 wxml中代码 <canvas id"trackDesignCanvas" //指定 id 的 Canvas 组件class"orbit-canvas-main" type"2d" …

安卓平板主板_安卓平板电脑主板MTK联发科|高通|紫光展锐方案

安卓平板电脑主板选择了MTK联发科方案&#xff0c;并且可以选配高通或者紫光展锐平台方案&#xff0c;为用户提供更强劲的性能和定制化的服务。主板搭载了联发科MT6771处理器&#xff0c;采用12nm制程工艺&#xff0c;拥有八核Cortex-A73Coretex-A53架构&#xff0c;主频为2.0G…