正則校驗:去除帶整數和小數的數字前後多餘的0和多餘小數點

對於用戶輸入的 0003.4000這種數字,其實我們需要的就是3.4,多餘的0不僅視覺上不好看,在存儲時也很不方便。怎麼讓我們在用戶完成輸入後,清除掉這些無用的0數字呢?

此外,對於輸入了2.3.3多個小數點這種錯誤字符,value爲空,但輸入框未清空,需要手動清空

方案:在@blur鼠標失焦事件中,觸發正則校驗,將輸入的內容和過濾掉這些多餘的數字0,方法如下:

<el-input
    type="number"
    @blur="handleBlurWeight(answer, $event)"
    v-model="answer">
</el-input>

......

handleBlurWeight (item, event) {
  this.answer = handleBlurDots(item, event);
}

這裏提供了一個通用的方法handleBlurDots:

// 輸入框爲數字類型,不允許存在2.3.3連續小數點。(此時value爲空,但輸入框未清空,手動清空)
export function handleBlurDots (item, event) {
  if (item === '') {
    setTimeout(() => {
      event.target.value = '';
    }, 60);
  }
  // 去除整數前的0和小數點後多餘的0,如011.020300 =》 11.0203
  const reg1 = /0*([1-9]\d*|0\.\d+)/;
  const reg2 = /(?:\.0*|(\.\d+?)0+)$/;
  event.target.value = event.target.value.replace(reg1, '$1').replace(reg2, '$1');
  return event.target.value;
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章