前言：
最近在用uni-app框架抠蚣，寫一個項目（支付寶和微信小程序）遇到一個需求概说，要求金額輸入框只能輸入2位小數(shù)网梢，且第一位數(shù)不能是 "."震缭，只能是數(shù)字。發(fā)現(xiàn)用 @input事件監(jiān)聽input v-model綁定輸入的值澎粟，在用正則去校驗蛀序，可以解決這個問題，但是不完美的是活烙，當達到小數(shù)點第二位之后徐裸，再次輸入光標會不停的閃爍，體驗感很差啸盏，又不想用第三方插件重贺，也不想自定義組件，經過一番嘗試回懦，最終總結解決方案如下气笙，既滿足條件需求，用戶體驗感也完美怯晕，開心開心潜圃。
注意看注釋!!!!!!!!
代碼（vue版本）：
<input type="digit" v-model="writeMoney" class="payInput" @input="oninput" :maxlength="moneyMaxLeng" />
data() {
return {
writeMoney: "",
moneyMaxLeng: 8//規(guī)定最大可輸入的長度
}
},
//輸入內容驗證
oninput(e) {
this.$nextTick(() => {
let val = e.target.value.toString();
val = val.replace(/[^\d.]/g, ""); //清除"數(shù)字"和"."以外的字符
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 class="weui-input" value="{{writeMoney}}" bindinput="oninput" maxlength="{{moneyMaxLeng}}" placeholder="請輸入" />
Page({
data: {
writeMoney: "",
},
oninput: function (e) {
let val = e.detail.value.toString();
wx.nextTick(() => {
val = val.replace(/[^\d.]/g, ""); //清除"數(shù)字"和"."以外的字符
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]) || ''
console.log('您輸入的值：',val);
this.setData({
writeMoney:val
})
});
}
})
歡迎加入技術交流 ：811956471
