element 中 el-input 数字框验证（8 位整数 2位小数）

element 中 el-input 数字框验证（8 位整数 2位小数）

🎄🎄🎄🎄🎄🎄🎄🎄🎄🎄🎄🎄🎄🎄🎄🎄🎄🎄🎄🎄🎄🎄🎄🎄🎄🎄🎄🎄🎄🎄🎄🎄🎄🎄🎄🎄🎄🎄🎄

• 不传参数

  <template>
      <!-- 表单 -->
     <el-form-item label="金额" prop="money">
          <!-- 需要验证的输入框绑定普通输入框 el-input 的 @input 事件 -->
          <el-input
            v-model="list.money"
            placeholder="请输入金额"
            clearable
            @input="oninput()"
          />
     </el-form-item>
  </template>
  
  <script>
    export default（）{
      data(){
        return () {
          list: []
        }
      },
      methods: {
       oninput () {
        // 先把非数字的都替换掉，除了数字和 .
        this.list.money = this.list.money.replace(/[^\d.]/g, "");
        // 保证只有出现一个 . 而没有多个 .
        this.list.money = this.list.money.replace(/\.{2,}/g, ".");
        // 必须保证第一个为数字而不是 .
        this.list.money = this.list.money.replace(/^\./g, "");
        // 保证 . 只出现一次，而不能出现两次以上
        this.list.money = this.list.money
          .replace(".", "$#$")
          .replace(/\./g, "")
          .replace("$#$", ".");
        // 只能输入 2 位小数
        this.list.money = this.list.money.replace(
          /^(\-)*(\d+)\.(\d\d).*$/,
          "$1$2.$3"
        );
        // 最多只能输入 8 位数字
        this.list.money = this.list.money.replace(
          /^\D*(\d{0,8}(?:\.\d{0,2})?).*$/g,
          "$1"
        );
      },
    }
    }
  </script>
  

• 传递参数

  <template>
      <!-- 表单 -->
     <el-form-item label="金额" prop="money">
          <!-- 需要验证的输入框绑定普通输入框 el-input 的 @input 事件 -->
        <el-input
            v-model="list.money"
            placeholder="金额"
            @input="oninput(form, 'money')"
          />
     </el-form-item>
  </template>
  
  <script>
    export default（）{
      data(){
        return () {
          list: []
        }
      },
      methods: {
        oninput (form, index) {
        // 先把非数字的都替换掉，除了数字和 .
        form[index] = form[index].replace(/[^\d.]/g, "");
        // 保证只有出现一个 . 而没有多个 .
        form[index] = form[index].replace(/\.{2,}/g, ".");
        // 必须保证第一个为数字而不是 .
        form[index] = form[index].replace(/^\./g, "");
        // 保证 . 只出现一次，而不能出现两次以上
        form[index] = form[index]
          .replace(".", "$#$")
          .replace(/\./g, "")
          .replace("$#$", ".");
        // 只能输入 2 位小数
        form[index] = form[index].replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3");
        // 只能输入 8 位整数
        form[index] = form[index].replace(
          /^\D*(\d{0,15}(?:\.\d{0,2})?).*$/g,
          "$1"
        );
      },
      }
    }
  </script>