[JavaScript知识库]vue element-ui实现input输入框金额数字添加千分位

学习成长记录别喷哈

直接上代码

<template>
  <div>
    <el-input v-model.trim="form.pastAdjustFee" @blur="inputMoney($event,'pastAdjustFee')"></el-input>
  </div>
</template>

<script >
const MoneyTest = /((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/;
// 金额添加千分位
const comdify = function (n) {
  if (!n) return n;
  let str = n.split(".");
  let re = /\d{1,3}(?=(\d{3})+$)/g;
  let n1 = str[0].replace(re, "$&,");
  return str.length > 1 && str[1] ? `${n1}.${str[1]}` : `${n1}.00`;
};
//去除千分位中的‘，'
const delcommafy = function (num) {
  if (!num) return num;
  num = num.toString();
  num = num.replace(/,/gi, "");
  return num;
};
const valdateFn = function (rule, val, cb) {
  setTimeout(() => {
    if (val) {
      let inputVal = delcommafy(val);
      if (rule.test(inputVal)) {
        cb();
      } else {
        cb("只能是数字金额,最多两位小数");
      }
    }
    cb();
  });
};
// 验证金额数字可以为负数
const moneyValid = function (rule, val, cb) {
  valdateFn(/((^-?[1-9]\d*)|^-?0)(\.\d{0,2}){0,1}$/, val, cb);
};
// 验证金额数字不可以为负数
const moneyNValid = function (rule, val, cb) {
  valdateFn(MoneyTest, val, cb);
};
// 获取输入框的值
const getInputValue = function (el) {
  let inputVal = el.target.value || "";
  return comdify(delcommafy(inputVal));
};
export default {
  data() {
    return {
      form: {
        pastAdjustFee: "",
      },
    };
  },
  methods: {
    inputMoney(el, name) {
      this.form[name] = getInputValue(el);
    },
  },
};
</script>