JavaScript技巧分享——純數字（帶小數點）過濾

應用場景

在編寫輸入金額的輸入組件input時，雖然可以設置type爲number，但卻不可以自動檢驗用戶輸入的值是否符合金額的格式。好比，用戶可以同時輸入兩個小數點。本文章以此爲大前提展開略淺的技巧。

過程解析

原始狀態

說到校驗，第一個想到的就是用正則表達式。以微信小程序爲例。

DOM結構

...
<input type='digit' value='{{value}}' bindinput='numChange' />
...

JavaScript邏輯

...
numChange(e) {
  // 修改單次金額
  const NEXT = e.detail.value;
  let currentValue = this.data.value;
  const NEW_VALUE = this.numCheck(currentValue, NEXT);
  this.setData({
    value: NEW_VALUE || currentValue;
  })
},
numCheck(prev, next) {
  // 數據過濾
  // 只保留兩位小數
  if (next && !/^(([1-9]\d*)|0)(\.\d{0,2}?)?$/.test(next)) {
    if (next === '.') return '0.';
    return prev;
  }
  return next;
}
...

獲取非空數據而且轉換數據類型

由於通過過濾後，返回的數據類型是字符串，在使用時，須要再轉換一下數據類型。

...
getPureMoney() {
  // 獲取乾淨的數據（非空）
  const { value } = this.data;
  const PARSE_VALUE = parseFloat(value);
  return !isNaN(PARSE_VALUE) ? PARSE_VALUE : '';
},
...

用過都說好！

最後，嘻嘻！