input,textarea type爲text時模擬number進行數據判斷

情景: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 {
      // 不滿足條件
   }
 }

關鍵點:

  1. 數字型
  2. 最多兩位小數
  3. 小數點最多爲一個
  4. 首位爲零時,第二位不可輸入零或者其他數字,且第二位只能輸入小數點
發佈了112 篇原創文章 · 獲贊 123 · 訪問量 43萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章