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

shenzhipeng1023

已于 2024-02-26 13:06:47 修改

阅读量456

点赞数 5

分类专栏： js代代码库 Vue 文章标签：金额格式化 js过滤非金额内容输入框过滤非金额内容金额内容过滤

于 2024-02-26 13:05:29 首次发布

本文链接：https://blog.csdn.net/jason_renyu/article/details/136295076

版权

js代代码库同时被 2 个专栏收录

27 篇文章 0 订阅

订阅专栏

Vue

7 篇文章 0 订阅

订阅专栏

本文介绍了如何使用JavaScript函数和Vue自定义指令对输入的金额进行格式化，保留小数点和2位小数，并过滤非金额字符。同时提及了如何在Vue指令中设置数字长度限制。

摘要由CSDN通过智能技术生成

这篇是输入框过滤非金额内容保留一个小数点和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绑定的值
      }
    })
  }
})