js 数字逢三切断、整数最大9位、小数最大2位

发布于:2025-07-24 ⋅ 阅读:(18) ⋅ 点赞:(0)

为了在 el-input 中实现这种功能,我们可以在 v-model 的输入值发生变化时进行格式化。

<template>
  <el-input
    v-model="addForm.accrateval"
    @input="formatInput"
    placeholder="请输入数字"
  />
</template>

<script>
export default {
  data() {
    return {
      addForm: {
        accrateval: '', // 用于绑定输入值
      },
    };
  },
  methods: {
    formatInput(value) {
      // 1. 去除非数字和小数点字符,且保证小数点最多一个
      let val = value.replace(/[^\d.]/g, '');

      // 2. 分割整数部分和小数部分
      const parts = val.split('.');
      let integerPart = parts[0].slice(0, 9); // 整数部分最多9位
      let decimalPart = parts[1] || '';

      // 3. 如果小数部分存在,保留最多2位
      decimalPart = decimalPart.slice(0, 2);

      // 4. 如果有小数部分,补足两位;如果没有小数部分,补“.00”
      if (decimalPart) {
        val = integerPart + '.' + decimalPart.padEnd(2, '0');
      } else {
        val = integerPart + '.00';
      }

      // 5. 逢三切断
      val = val.replace(/(\d)(?=(\d{3})+(\.))/g, '\$1,');

      // 更新输入框的值
      this.addForm.accrateval = val;
    },
  },
};
</script>

注释:

  • 输入 1234567 时,最终显示 1,234,567.00
  • 输入 1234567.89 时,显示 1,234,567.89
  • 输入 1234567890 时,显示 123,456,789.00(整数超过9位会被限制为9位)。

//方案2

不逢三切断 , 整数6位, 小数2位

<el-input
                style="width:150px;"
                v-model="addForm.accrateval"
                maxlength="9" 
                oninput="value=value.replace(/^(\d{0,6}(?:\.\d{0,2})?).*$/g, '$1')"
                @blur="$event.target.value?addForm.accrateval = Number($event.target.value)?Number($event.target.value).toFixed(2):'':''"
              />

输入 1234567 时,最终显示 123456时,显示123456.00

输入 123456.11 时,最终显示 123456.11 


网站公告

今日签到

点亮在社区的每一天
去签到