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>