前端实现数字的‘三位一撇’同时判断数字数量级别（基于 Element）

〇、前言

本文将通过实例，简单介绍下“三位一撇”和判定数字的数量级，供参考。

效果如下图：

一、具体实现

HTML 代码如下：

<template>
  <div class="app-container TestPage">
    <!-- 弹窗 -->
    <el-dialog
      title="新增"
      width="500px"
      :visible.sync="showDialogAdd"
    >
      <el-form
        :model="formData"
        ref="formData"
        label-width="150px"
        class="demo-formData"
      >
        <el-form-item label="总额：" prop="hetongze" :rules="[{required: false, message: '请输总额', trigger: 'change'}]">
          <el-input class="uniform-width-detail"
            v-model="formData.zonge" @input="ChangeInputZE"
            placeholder="非必填，请输入大于 0 且最多两位小数的数字"
          ></el-input>
          <span v-if="display_span_units">{{ units }}</span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirmDialog()" :disabled="this.submitButtonDisabledAdd">提 交</el-button>
        <el-button @click="cancelAdd">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

js 代码如下：

<script>
export default {
  name: "TestPage",
  components: {},
  data() {
    return {
      showDialogAdd:false,
      units:"",
        submitButtonDisabledAdd:false,
        formData:{},
        display_span_units:false,
    };
  },
  computed: { },
  methods: {
    ChangeInputZE(){
      const regex = /^[0-9,.]+$/ // /^\d{1,3}(,\d{3})*(\.\d+)?$/;
      // const regex = /^[0-9,.-]+$/ // 进一步支持负数
      if (this.formData.zonge!=null&&this.formData.zonge.length>0 && (!regex.test(this.formData.zonge)||this.formData.zonge=="0")) {
        this.$message.warning("请输入大于0的金额！")
        this.submitButtonDisabledAdd = true
        return
      }
      else{
        this.submitButtonDisabledAdd=false
      }
      if(this.formData.zonge!=""){
        this.formData.zonge=this.formData.zonge.replaceAll(",","") // 转成纯数字，校验大小
        if(this.formData.zonge!=null&&this.formData.zonge<=0){
          this.submitButtonDisabledAdd=true
        }
        if(this.formData.zonge!=null&&this.formData.zonge>0){
          this.units=this.getNumberUnit(Number(this.formData.zonge)) // 判断数字级别
          if(this.units!=null&&this.units.length>0){
            this.display_span_units=true
          }else{
            this.display_span_units=false
          }
        }
        if(this.formData.zonge.indexOf(".")>=0){
          let htze_arr=this.formData.zonge.split(".")
          this.formData.zonge=this.moneyFormat(Number(htze_arr[0]))+"."+htze_arr[1]
        }
        else{
          this.formData.zonge=this.moneyFormat(this.formData.zonge)
        }
      }
      // 转换成目标样式后，再进行正则校验
      let regex2 = /^(\d{1,3}(,\d{3})*)(\.\d{1,2})?$/; // 支持三位一撇的数字
      // let regex2 = /^(-?\d{1,3}(,\d{3})*)(\.\d{1,2})?$/; // 进一步支持负数
      if (this.formData.zonge!=null&&this.formData.zonge.length>0 && (!regex2.test(this.formData.zonge)||this.formData.zonge=="0")) {
        this.$message.warning("请输入大于0且最多两位小数的金额！");
        this.submitButtonDisabledAdd=true
        return;
      }
      else{
        this.submitButtonDisabledAdd=false
      }
    },
    // 数量级别判断方法
    getNumberUnit(num) {
      if (typeof num !== 'number' || isNaN(num) || num < 10000) { // 小于一万，没有对应单位
        return undefined;
      }
      const units = [
        { value: 1e8, label: '亿' }, // 还可以支持更高数量级
        { value: 1e7, label: '千万' },
        { value: 1e6, label: '百万' },
        { value: 1e5, label: '十万' },
        { value: 1e4, label: '万' },
      ];
      for (let i = 0; i < units.length; i++) {
        if (num >= units[i].value) {
          return units[i].label;
        }
      }
      return undefined;
    },
    // 三位一撇 具体实现代码
    moneyFormat(num) {
      num = String(num)
      let symbol="";
      if(num.indexOf("-")>=0){ // 先将负号暂存
        num=num.replace("-","");
        symbol="-";
      }
      let arr = num.split("."); // 将小数点后的数字分开存放，最后再进行拼接
      let result = '';
      let count = 0;
      for (let i = arr[0].length - 1; i >= 0; i--) { // 从最右边开始，位数分别除以 3，余数为 0，就加逗号
        count++;
        result = arr[0][i] + result;
        if (count % 3 === 0 && i !== 0) {
          result = ',' + result;
        }
      }
      if(arr.length>1)
        return symbol + result + "." + arr[1]; // 拼接小数位的值
      else
        return symbol+result;
    },
  },
};
</script>