Elementui如何限制el-input框輸入小數點

限制el-input框輸入小數點

<el-input v-model="value" @keyup.native="value = oninput(value,2)"></el-input>
/**
* oninput 限制輸入框小數點位數,多出的過濾掉
* @param  Number     {num}
* @param  Number     {limit}
 */
oninput(num, limit) {
  var str = num
  var len1 = str.substr(0, 1)
  var len2 = str.substr(1, 1)
  //如果第一位是0,第二位不是點,就用數字把點替換掉
  if (str.length > 1 && len1 == 0 && len2 != ".") {
    str = str.substr(1, 1)
  }
  //第一位不能是.
  if (len1 == ".") {
    str = ""
  }
  //限制隻能輸入一個小數點
  if (str.indexOf(".") != -1) {
    var str_ = str.substr(str.indexOf(".") + 1)
    if (str_.indexOf(".") != -1) {
      str = str.substr(0, str.indexOf(".") + str_.indexOf(".") + 1)
    }
  }
  //正則替換
  str = str.replace(/[^\d^\.]+/g, '') // 保留數字和小數點
  if (limit / 1 === 1) {
    str = str.replace(/^\D*([0-9]\d*\.?\d{0,1})?.*$/,'$1') // 小數點後隻能輸 1 位
  } else {
    str = str.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/,'$1') // 小數點後隻能輸 2 位
  }
  return str
}

el-input 僅限保留兩位小數問題

廢話不多說:

 <el-form-item
     label="概率值(100%)"
     rules="[{ required: true, message: '請填寫概率值,僅限兩位小數'},{pattern:/^\d{1,2}(\.\d{1,2})?$/, message: '概率權重精確到兩位小數點,勿超過100'}]"
                    prop="weight">
    <el-input type="number" step="0.01" v-model.number="lotteryBonusCfg.weight" autocomplete="off"></el-input>
</el-form-item>

關鍵是:正則:/^\d{1,2}(.\d{1,2})?$/

但是這個功能有個bug,就是無法輸入0.01,input會直接失去焦點,數字變成0.

解決辦法

v-model.number ==》 v-model=“lotteryBonusCfg.weight”

即可輸入0.01,或者1.01

以上僅為個人經驗,希望能給大傢一個參考,也希望大傢多多支持WalkonNet。

推薦閱讀: