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

k00baa 發(fā)布于2019-08-23 18:40 / 1474人閱讀

摘要：比如，用戶能夠同時輸入兩個小數(shù)點。本文章以此為大前提展開略淺的技巧。過程解析原始狀態(tài)說到校驗，第一個想到的就是用正則表達(dá)式。以微信小程序為例。獲取干凈的數(shù)據(jù)非空用過都說好最后，嘻嘻

應(yīng)用場景

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

過程解析 原始狀態(tài)

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

DOM結(jié)構(gòu)

...

...

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) {
  // 數(shù)據(jù)過濾
  // 只保留兩位小數(shù)
  if (next && !/^(([1-9]d*)|0)(.d{0,2}?)?$/.test(next)) {
    if (next === ".") return "0.";
    return prev;
  }
  return next;
}
...

獲取非空數(shù)據(jù)并且轉(zhuǎn)換數(shù)據(jù)類型

因為經(jīng)過過濾后，返回的數(shù)據(jù)類型是字符串，在使用時，需要再轉(zhuǎn)換一下數(shù)據(jù)類型。

...
getPureMoney() {
  // 獲取干凈的數(shù)據(jù)（非空）
  const { value } = this.data;
  const PARSE_VALUE = parseFloat(value);
  return !isNaN(PARSE_VALUE) ? PARSE_VALUE : "";
},
...