资讯专栏INFORMATION COLUMN

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

k00baa / 1309人阅读

摘要:比如,用户能够同时输入两个小数点。本文章以此为大前提展开略浅的技巧。过程解析原始状态说到校验,第一个想到的就是用正则表达式。以微信小程序为例。获取干净的数据非空用过都说好最后,嘻嘻

应用场景

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

过程解析 原始状态

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

DOM结构
...

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

最后,嘻嘻!

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/105634.html

相关文章

  • JavaScript 技巧收藏

    摘要:对象通过方法强制转化为数字,通过方法强制转换为字符串过滤数组中的所有假植中有一些假值过滤这些假值,可以使用构造函数来进行一次转换双位运算符可以使用双位操作符来代替。双否定位操作符的优势在于它执行相同的操作运行速度更快。 JavaScript 小技巧 1.类型转换 string -> number 32 * 1 // 32 abc * 1 // NaN nul...

    pkhope 评论0 收藏0
  • 前端实用资源整理

    摘要:事件的响应分区为三个阶段捕获目标冒泡阶段。绑定的多个事件会被覆盖,后者覆盖前者。再用转换成数值表示。如实际数量为,则展示为项目中使用过滤器做的处理可以抽取方法的,调整相关,可以获取指定位数的缩写。 CSS html5中a的download属性 定义和用法download 属性定义下载链接的地址或指定下载文件的名称。文件名称没有限定值,浏览器会自动在文件名称末尾添加该下载文件的后缀 (...

    Gu_Yan 评论0 收藏0
  • 前端实用资源整理

    摘要:事件的响应分区为三个阶段捕获目标冒泡阶段。绑定的多个事件会被覆盖,后者覆盖前者。再用转换成数值表示。如实际数量为,则展示为项目中使用过滤器做的处理可以抽取方法的,调整相关,可以获取指定位数的缩写。 CSS html5中a的download属性 定义和用法download 属性定义下载链接的地址或指定下载文件的名称。文件名称没有限定值,浏览器会自动在文件名称末尾添加该下载文件的后缀 (...

    wslongchen 评论0 收藏0
  • 【JS】关于JS的一些知识点(JS基础,记录)

    摘要:如何让根据拆箱转换,以及的隐式转换,可以如下写为什么计算机中所有的数据都是以二进制存储的,所以在计算机计算时要把数据先转换成二进制进行计算,然后把计算结果转换成十进制。会存在精度丢失问题和的二进制都是以无线循环的小数的二进制的二进制 本想着记笔记里,但是笔记里没有分类,还是以文章的形式,当个人总结吧,这一篇就当作JS基础篇的记录吧,有修改的和新增的持续更新~ 关于JS的一些小技巧 1:...

    SwordFly 评论0 收藏0

发表评论

0条评论

k00baa

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<