情景:input輸入值顏色與提示語顏色不一致的情況輸入數字時,數字型number輸入0(或者0.0)時,顏色還是placeholder顏色一樣,體驗不佳。故採用文本型text進行
下面進行的是對輸入的值進行number型和最多隻能輸入兩位小數的判斷
let reg = /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/; // 判斷是否是數字
if ((this.moneyVal != '' && /^\d+$/.test(parseFloat(this.moneyVal) * 10)) || this.moneyVal == '') {
let arr = [];
if (this.moneyVal.indexOf('.') > 0) { // 判斷該數有幾個小數點,只允許一個小數點存在
arr = this.moneyVal.split('.');
}
if (this.moneyVal.length == 2 && this.moneyVal.slice(0, 1) == 0 && keyItem != '.') { // 這裏keyItem 指的是你鍵盤按下的值
// 不滿足條件
}else if (reg.test(this.moneyVal) || arr.length == 2) {
if (((this.moneyVal) * 100 == 0 && this.moneyVal.length >= 4) || (this.moneyVal.indexOf('.') > 0 && parseFloat(this.moneyVal.split('.')[0]) == 0 && this.moneyVal.split('.')[0].length > 1) || this.moneyVal.indexOf('.') > 0 && this.moneyVal.split('.')[1].length > 2) { // 這裏主要是判斷首位爲0情況下第二位的輸入判斷情況,不可00連輸,第二位小數只能輸入小數點;最多兩位小數
// 不滿足條件
}else {
}
}else {
// 不滿足條件
}
}
關鍵點:
- 數字型
- 最多兩位小數
- 小數點最多爲一個
- 首位爲零時,第二位不可輸入零或者其他數字,且第二位只能輸入小數點