Elementui怎么限制el-input框輸入小數點

本文小編為大家詳細介紹“Elementui怎么限制el-input框輸入小數點”，內容詳細，步驟清晰，細節處理妥當，希望這篇“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

讀到這里，這篇“Elementui怎么限制el-input框輸入小數點”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。