JavaScript技巧分享——纯数字(带小数点)过滤

应用场景

在编写输入金额的输入组件input时,虽然能够设置typenumber,但却不能够自动检验用户输入的值是否符合金额的格式。比如,用户能够同时输入两个小数点。本文章以此为大前提展开略浅的技巧。

过程解析

原始状态

说到校验,第一个想到的就是用正则表达式。以微信小程序为例。

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 : '';
},
...
用过都说好!

最后,嘻嘻!

阅读 307更新于 7月14日
推荐阅读
目录