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 : '';
},
...

用过都说好！

最后，嘻嘻！