JavaScript技巧分享——纯数字（带小数点）过滤

2024年1月22日 228次阅读 来源: Tylerrrkd

应用场景

在编写输入金额的输入组件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 : '';
},
...

用过都说好！

最后，嘻嘻！

    原文作者：Tylerrrkd
    原文地址: https://segmentfault.com/a/1190000019756537
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞