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.mfbz.cn/a/410363.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

有趣的CSS - 弹跳的圆

大家好&#xff0c;我是 Just&#xff0c;这里是「设计师工作日常」&#xff0c;今天分享的是用css写一个好玩的不停弹跳变形的圆。 《有趣的css》系列最新实例通过公众号「设计师工作日常」发布。 目录 整体效果核心代码html 代码css 部分代码 完整代码如下html 页面css 样式页…

解读2024生物发酵展览会-蓝帕控制阀门

参展企业介绍 感谢你正在或即将使用LAPAR系列产品&#xff0c;感谢你关注LAPAR&#xff01; LAPAR&#xff0c;流体控制领域的国际品牌之一&#xff0c;总部位于意大利米兰&#xff0c;成立多年以来&#xff0c;LAPAR凭借其完善的网络体系、优秀的产品质量、一体式的客户解决…

蓝桥杯-成绩分析

许久不敲代码&#xff0c;库名也忘了&#xff0c;精度设置还有求最大最小值都是常规题了。 #include <iostream> #include <iomanip> using namespace std; int main() { //一种不用开数组的方法 int n; cin>>n; int top0; int low100;//确定最大…

Uva 101: 木块问题(The Blocks Problem)

看着算法书看到了这一题&#xff0c;想着不能只看不做&#xff0c;就想着做了一下 算法书上的描述太抽象了&#xff0c;就网上找了其他的描述 当然去看英文描述是最准确的&#xff0c;算法书上说是哪一个oj网来着&#xff1f;我给忘了 STL还是很好用的 代码如下&#xff1a; …

【Vue3】学习watch监视:深入了解Vue3响应式系统的核心功能(下)

&#x1f497;&#x1f497;&#x1f497;欢迎来到我的博客&#xff0c;你将找到有关如何使用技术解决问题的文章&#xff0c;也会找到某个技术的学习路线。无论你是何种职业&#xff0c;我都希望我的博客对你有所帮助。最后不要忘记订阅我的博客以获取最新文章&#xff0c;也欢…

【Android12】Monkey压力测试源码执行流程分析

Monkey压力测试源码执行流程分析 Monkey是Android提供的用于应用程序自动化测试、压力测试的测试工具。 其源码路径(Android12)位于 /development/cmds/monkey/部署形式为Java Binary # development/cmds/monkey/Android.bp // Copyright 2008 The Android Open Source Proj…

Windows 安装Redis(图文详解)

一、Redis是什么数据库&#xff1f; Remote Dictionary Server(Redis) 是一个开源的使用 ANSI C 语言编写、遵守 BSD 协议、支持网络、可基于内存、分布式、可选持久性的键值对(Key-Value)存储数据库&#xff0c;并提供多种语言的 API&#xff0c;是跨平台的非关系型数据库。 …

多线程和并发

线程 进程&#xff1a;在操作系统中运行的程序&#xff0c;一个进程可以包含多个线程 程序就是指令和数据的有序集合&#xff0c;静态概念 进程就是执行程序的一次执行过程&#xff0c;动态概念系统资源分配的单元 一个进程中包含多个线程&#xff0c;一个进程至少包含一个线…

图解KMP算法

目录 1.最长公共前后缀1.1前缀1.2后缀1.3最长公共前后缀 2、KMP算法过程2.1例子12.2例子22.3Python代码&#xff1a;2.4next数组的计算过程 1.最长公共前后缀 1.1前缀 前缀说的是一个字符串除了最后一个字符以外&#xff0c;所有的子串都算是前缀。 前缀字符串&#xff1a;A…

KubeSphere实战

我是南城余&#xff01;阿里云开发者平台专家博士证书获得者&#xff01; 欢迎关注我的博客&#xff01;一同成长&#xff01; 一名从事运维开发的worker&#xff0c;记录分享学习。 专注于AI&#xff0c;运维开发&#xff0c;windows Linux 系统领域的分享&#xff01; 知…

49.仿简道云公式函数实战-文本函数-Ip

1. Ip函数 获取当前用户的ip地址 注意是Ipv4的地址 2. 函数用法 IP() 3. 函数示例 获取当前用户的ip地址IP() 4. 代码实战 首先我们在function包下创建text包&#xff0c;在text包下创建IpFunction类&#xff0c;代码如下&#xff1a; package com.ql.util.express.sel…

11:日志分析系统ELK|Elasticsearch|kibana

日志分析系统ELK&#xff5c;Elasticsearch&#xff5c;kibana 日志分析系统ELKELK概述Elasticsearch安装Elasticsearch部署Elasticsearch集群Elasticsearch插件 熟悉Elasticsearch的API调用_cat API创建 tedu 索引使用 PUT 方式增加数据查询数据修改数据删除数据 KibanaKibana…

(挖坑) Python调用图工具

基本效果 输入 #!/usr/bin/env pythonThis example demonstrates a simple use of pycallgraph.from pycallgraph import PyCallGraph from pycallgraph.output import GraphvizOutputclass Banana:def eat(self):passclass Person:def __init__(self):self.no_bananas()def…

Xcode与Swift开发小记

引子 鉴于React Native目前版本在iOS上开发遇到诸多问题&#xff0c;本以为搞RN只需理会Javascript开发&#xff0c;没想到冒出CocoaPod的一堆编译问题。所以横下一条心&#xff0c;决定直接进攻iOS本身。不管你是用React Native&#xff0c;还是用Flutter&#xff0c;iOS下的…

算能RISC-V通用云开发空间编译pytorch @openKylin留档

终于可以体验下risc-v了&#xff01; 操作系统是openKylin&#xff0c;算能的云空间 尝试编译安装pytorch 首先安装git apt install git 然后下载pytorch和算能cpu的库&#xff1a; git clone https://github.com/sophgo/cpuinfo.git git clone https://github.com/pytorc…

java农产品商城商城计算机毕业设计包运行调试讲解

jsp mysql农业商城 特效&#xff1a;js产品轮播 功能&#xff1a; 前台&#xff1a; 1.绿色水果 图文列表 详情 2.新闻动态 文章标题列表 详情 3.有机蔬菜 图文列表 详情 4.有机谷物 图文列表 详情 5.有机大米 图文列表 详情 6.用户注册 登陆&#xff08;选择用户和管…

c++ 广度优先搜索(Breadth-First Search,BFS)

广度优先搜索&#xff08;Breadth-First Search&#xff0c;BFS&#xff09;是一种图遍历算法&#xff0c;通常用于搜索或遍历树和图等数据结构。其基本思想是先访问起始顶点&#xff0c;然后逐层遍历其相邻的顶点&#xff0c;直到找到目标顶点或遍历完所有顶点。 BFS通常使用…

前端基础面试题(一)

摘要&#xff1a;最近&#xff0c;看了下慕课2周刷完n道面试题&#xff0c;记录下... 1.请说明Ajax、Fetch、Axios三者的区别 三者都用于网络请求&#xff0c;但维度不同&#xff1a; Ajax&#xff08;Asynchronous Javascript ang XML&#xff09;&#xff0c;是一种在不重新…

xss-跨站脚本攻击漏洞

前备知识&#xff1a; Cookie和Session是Web开发中用于维持用户状态、跟踪用户会话的核心技术&#xff0c;它们的主要目的是在无状态的HTTP协议基础上实现有状态的用户交互。 **Cookie**&#xff1a; - Cookie是一种由服务器发送到客户端&#xff08;通常是用户的浏览器&#x…

【JavaEE】_HttpServlet类

目录 1. init方法 2. destory方法 3. service方法 4. servlet生命周期 前文已经提及到&#xff1a;servlet是tomcat提供的&#xff0c;用于操作HTTP协议的一组API&#xff0c;可以将这组API理解为HTTP服务器的框架&#xff1b; 编写一个servlet程序&#xff0c;往往都要继…