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。
推薦閱讀:
- Vue實現數值型輸入框並限制長度
- element多個表單校驗的實現
- vue將數字轉為中文大寫金額方式
- 使用ElementUI循環生成的Form表單添加校驗
- vue表單驗證rules及validator驗證器的使用方法實例