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

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位小数的方式,展示金额的方式可以参考常用的金额数字的格式化方法 里边有千分位和金额中文大写展示的处理方式

相关文章:

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

这篇是输入框过滤非金额内容保留一个小数点和2位小数&#xff0c;金额的其他格式化可以看这篇文章常用的金额数字的格式化方法 js方法直接使用 该方式可以直接使用过滤内容&#xff0c;也可以到onInput或onblur等地方过滤&#xff0c;自行使用 /*** 非金额字符格式化处理* p…...

推荐系统经典模型YouTubeDNN代码

文章目录 前言数据预处理部分模型训练预测部分总结与问答 前言 上一篇讲到过YouTubeDNN论文部分内容&#xff0c;但是没有代码部分。最近网上教学视频里看到一段关于YouTubeDNN召回算法的代码&#xff0c;现在我分享一下给大家参考看一下&#xff0c;并附上一些我对代码的理解…...

学习加密(三)spring boot 使用RSA非对称加密,前后端传递参数加解密

1.前面一篇是AES对称加密写了一个demo,为了后面的两者结合使用,今天去了解学习了下RSA非对称加密. 2.这是百度百科对(对称加密丶非对称加密)的解释: (1)对称加密算法在加密和解密时使用的是同一个秘钥。 (2)非对称加密算法需要两个密钥来进行加密和解密&#xff0c;这两个秘钥…...

面向对象编程入门:掌握C++类的基础(2/3):深入理解C++中的类成员函数

在C编程中&#xff0c;类是构建程序的基石&#xff0c;而理解类的默认成员函数对于高效使用C至关重要。本文将深入探讨这六个默认成员函数及其他相关概念&#xff0c;提供给读者一个全面的视角。 类的6个默认成员函数&#xff1a; 如果一个类中什么成员都没有&#xff0c;简称为…...

javaWeb学习04

AOP核心概念: 连接点: JoinPoint, 可以被AOP控制的方法 通知: Advice 指哪些重复的逻辑&#xff0c;也就是共性功能(最终体现为一个方法) 切入点: PointCut, 匹配连接点的条件&#xff0c;通知仅会在切入点方法执行时被应用 目标对象: Target, 通知所应用的对象 通知类…...

Day07:基础入门-抓包技术全局协议封包监听网卡模式APP小程序PC应用

目录 非HTTP/HTTPS协议抓包工具 WireShark 科来网络分析系统 WPE封包 思维导图 章节知识点&#xff1a; 应用架构&#xff1a;Web/APP/云应用/三方服务/负载均衡等 安全产品&#xff1a;CDN/WAF/IDS/IPS/蜜罐/防火墙/杀毒等 渗透命令&#xff1a;文件上传下载/端口服务/Sh…...

通过elementUI学习vue

<template><el-radio v-model"radio" label"1">备选项</el-radio><el-radio v-model"radio" label"2">备选项</el-radio> </template><script>export default {data () {return {radio: 1}…...

音视频数字化(数字与模拟-电视)

上一篇文章【音视频数字化(数字与模拟-音频广播)】谈了音频的广播,这次我们聊电视系统,这是音频+视频的采集、传输、接收系统,相对比较复杂。 音频系统的广播是将声音转为电信号,再调制后发射出去,利用“共振”原理,收音机接收后解调,将音频信号还原再推动扬声器,我…...

CSS复合选择器(二)

CSS复合选择器&#xff08;二&#xff09; 伪类选择器一、动态伪类&#xff1a;二、结构伪类三、否定伪类&#xff1a;四、UI伪类&#xff1a;五、目标伪类&#xff08;了解&#xff09;六、语言伪类&#xff08;了解&#xff09; 伪类选择器 作用&#xff1a;选中特殊状态的元…...

Postgresql中VACUUM操作原理和应用

VACUUM操作在PostgreSQL中的底层原理涉及几个关键概念&#xff0c;包括MVCC&#xff08;多版本并发控制&#xff09;、事务ID包裹、以及垃圾回收机制。我们逐一解析这些概念&#xff0c;以及它们是如何与VACUUM操作相互作用的。 关键概念 1. MVCC&#xff08;多版本并发控制&…...

5.1 Ajax数据爬取之初介绍

目录 1. Ajax 数据介绍 2. Ajax 分析 2.1 Ajax 例子 2.2 Ajax 分析方法 &#xff08;1&#xff09;在网页页面右键&#xff0c;检查 &#xff08;2&#xff09;找到network&#xff0c;ctrl R刷新 &#xff08;3&#xff09;找 Ajax 数据包 &#xff08;4&#xff09;…...

react-组件进阶

1.目标 能够实用props接收数据 能够实现父子组件之间的通讯 能够实现兄弟组件之间的通讯 能够给组件添加props校验 能够说出生命周期常用的钩子函数 能够知道高阶组件的作用 2.目录 组件通讯介绍 组件的props 组件通讯的三种方式 Context props深入 组件的生命周期 Render-p…...

企业有了ERP,为什么还要上BI?

在我们以往和企业的沟通过程中&#xff0c;我们发现还是有相当多的一部分企业对于商业智能 BI 了解不多&#xff0c;或者对商业智能 BI 的理解仅停留在花花绿绿的可视化页面上&#xff0c;要么就是提出以下类似问题&#xff1a; 财务部门&#xff1a;BI 的财务分析指标也就是三…...

P1331 海战

难度&#xff1a;普及- 题目背景 在峰会期间&#xff0c;武装部队得处于高度戒备。警察将监视每一条大街&#xff0c;军队将保卫建筑物&#xff0c;领空将布满了 F-2003 飞机。 此外&#xff0c;巡洋船只和舰队将被派去保护海岸线。不幸的是&#xff0c;因为种种原因&#x…...

Orange3数据预处理(索引选择器组件)

组件描述 数据行即使在某些或全部原始变量被来自原始变量的计算变量替换时&#xff0c;也保持其身份。 此小部件获取两个数据表&#xff08;“数据”和“数据子集”&#xff09;&#xff0c;它们可以追溯到同一来源。基于行身份而非实际数据&#xff0c;它会从“数据”中选择所…...

Python实现时间序列分析进行平稳性检验(ADF和KPSS)和差分去趋势(adfuller和kpss算法)项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档视频讲解&#xff09;&#xff0c;如需数据代码文档视频讲解可以直接到文章最后获取。 1.项目背景 时间序列分析中的平稳性检验是评估一个时间序列是否具有稳定的均值和方差。在经济学、金融学以及其他诸…...

代码随想录 Leetcode494. 目标和

题目&#xff1a; 代码(首刷看解析 2024年2月26日&#xff09; 思路&#xff1a;根据题意&#xff0c;设两个背包&#xff0c;packageA存放前面是""的数字之和&#xff0c;packageB存放前面是“-”的数字之和 则sum packageA packageB; target packageA - packag…...

【5G NR】【一文读懂系列】移动通讯中使用的信道编解码技术-NR编解码LDPC和Polar概述(一)

目录 NR LDPC和Polar编码技术概述 LDPC&#xff08;低密度奇偶校验码&#xff09; LDPC 工作原理 LDPC 应用场景&#xff1a; LDPC 与其他编码技术相比的优势&#xff1a; Polar 极化码 Polar 工作原理 Polar 应用场景&#xff1a; Polar 与其他编码技术相比的优势&am…...

代码库管理工具Git介绍

阅读本文同时请参阅-----免费的Git图形界面工具sourceTree介绍 Git是一个分布式版本控制系统&#xff0c;它可以帮助开发者跟踪和管理代码历史。Git的命令行工具是使用Git的核心方式&#xff0c;虽然它可能看起来有些复杂&#xff0c;但是一旦掌握了基本命令&#xff0c;你…...

【长期更新】游戏开发中可能会用到的数学小工具

从一个向量生成一组正交基 https://graphics.pixar.com/library/OrthonormalB/paper.pdf...

观成科技:隐蔽隧道工具Ligolo-ng加密流量分析

1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具&#xff0c;该工具基于TUN接口实现其功能&#xff0c;利用反向TCP/TLS连接建立一条隐蔽的通信信道&#xff0c;支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式&#xff0c;适应复杂网…...

变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析

一、变量声明设计&#xff1a;let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性&#xff0c;这种设计体现了语言的核心哲学。以下是深度解析&#xff1a; 1.1 设计理念剖析 安全优先原则&#xff1a;默认不可变强制开发者明确声明意图 let x 5; …...

linux之kylin系统nginx的安装

一、nginx的作用 1.可做高性能的web服务器 直接处理静态资源&#xff08;HTML/CSS/图片等&#xff09;&#xff0c;响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器 隐藏后端服务器IP地址&#xff0c;提高安全性 3.负载均衡服务器 支持多种策略分发流量…...

8k长序列建模,蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂

蛋白质结合剂&#xff08;如抗体、抑制肽&#xff09;在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上&#xff0c;高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术&#xff0c;但这类方法普遍面临资源消耗巨大、研发周期冗长…...

IGP(Interior Gateway Protocol,内部网关协议)

IGP&#xff08;Interior Gateway Protocol&#xff0c;内部网关协议&#xff09; 是一种用于在一个自治系统&#xff08;AS&#xff09;内部传递路由信息的路由协议&#xff0c;主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...

【磁盘】每天掌握一个Linux命令 - iostat

目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat&#xff08;I/O Statistics&#xff09;是Linux系统下用于监视系统输入输出设备和CPU使…...

页面渲染流程与性能优化

页面渲染流程与性能优化详解&#xff08;完整版&#xff09; 一、现代浏览器渲染流程&#xff08;详细说明&#xff09; 1. 构建DOM树 浏览器接收到HTML文档后&#xff0c;会逐步解析并构建DOM&#xff08;Document Object Model&#xff09;树。具体过程如下&#xff1a; (…...

Android15默认授权浮窗权限

我们经常有那种需求&#xff0c;客户需要定制的apk集成在ROM中&#xff0c;并且默认授予其【显示在其他应用的上层】权限&#xff0c;也就是我们常说的浮窗权限&#xff0c;那么我们就可以通过以下方法在wms、ams等系统服务的systemReady()方法中调用即可实现预置应用默认授权浮…...

SAP学习笔记 - 开发26 - 前端Fiori开发 OData V2 和 V4 的差异 (Deepseek整理)

上一章用到了V2 的概念&#xff0c;其实 Fiori当中还有 V4&#xff0c;咱们这一章来总结一下 V2 和 V4。 SAP学习笔记 - 开发25 - 前端Fiori开发 Remote OData Service(使用远端Odata服务)&#xff0c;代理中间件&#xff08;ui5-middleware-simpleproxy&#xff09;-CSDN博客…...

【7色560页】职场可视化逻辑图高级数据分析PPT模版

7种色调职场工作汇报PPT&#xff0c;橙蓝、黑红、红蓝、蓝橙灰、浅蓝、浅绿、深蓝七种色调模版 【7色560页】职场可视化逻辑图高级数据分析PPT模版&#xff1a;职场可视化逻辑图分析PPT模版https://pan.quark.cn/s/78aeabbd92d1...