歡迎加我技術交流QQ群 ：811956471

前言：

最近在用uni-app框架，寫一個項目(支付寶和微信小程序)遇到一個需求，要求金額輸入框只能輸入2位小數，且第一位數不能是 "."，只能是數字。發現用 @input事件監聽input v-model綁定輸入的值，在用正則去校驗，可以解決這個問題，但是不完美的是，當達到小數點第二位之后，再次輸入光標會不停的閃爍，體驗感很差，又不想用第三方插件，也不想自定義組件，經過一番嘗試，最終總結解決方案如下，既滿足條件需求，用戶體驗感也完美，開心開心。

注意看注釋!!!!!!!!

代碼：

data() {

return {

writeMoney: "",

moneyMaxLeng: 8//規定最大可輸入的長度

}

},

//輸入內容驗證

oninput(e) {

this.$nextTick(() => {

let val = e.target.value.toString();

val = val.replace(/[^\d.]/g, ""); //清除"數字"和"."以外的字符

val = val.replace(/\.{2,}/g, "."); //只保留第一個. 清除多余的

val = val.replace(/^0+\./g, '0.');

val = val.match(/^0+[1-9]+/) ? val = val.replace(/^0+/g, '') : val

val = (val.match(/^\d*(\.?\d{0,2})/g)[0]) || ''

if (val.includes(".")) {

let numDian = val.toString().split(".")[1].length;

if (numDian === 2) {

this.moneyMaxLeng = val.length;

}

} else {

this.moneyMaxLeng = 8;

}

this.writeMoney = val;

});

},

總結

以上是生活随笔為你收集整理的input标签的值只能两位小数_解决input只能输入金额类型的方案（金额输入框只能输入2位小数）...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。