引言:金额输入时,需求如下:

  1)首位不能出现0或者小数点(.)

  2)仅保留两位小数

  3)仅保留一个小数点(.),不允许出现多个。

1.wxml核心代码:

<!-- 1.adjust-position:true  键盘弹起时,是否自动上推页面 2.bindinput="inputedit":类似双向绑定,实现实时获取输入框值 3.type='digit' 带小数点的数字键盘-->
<input type='digit' class='n-input' placeholder='请输入充值金额' bindinput="inputedit" adjust-position="true" value="{{moneyNum}}"/>

2.js核心代码:

data: {
// 用户输入的金额
moneyNum:null
},
/**
* @method: 双向绑定,实时获取输入框值
* @params: event形参必须有,返回输入框相关对象
*/
inputedit:function(event){
this.setData({
moneyNum: this.money(event.detail.value) //money匹配金额输入规则,返回输入值
});
},
/**
* @method: 金额输入限制
* @params: val接收number值
*/
money(val) {
let num = val.toString(); //先转换成字符串类型
if (num.indexOf('.') == 0) { //第一位就是 .
num = '0' + num
}
num = num.replace(/[^\d.]/g, ""); //清除“数字”和“.”以外的字符
num = num.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
num = num.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
num = num.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); //只能输入两个小数
if (num.indexOf(".") < 0 && num != "") {
num = parseFloat(num);
}
return num
}

结果如下图:

微信小程序如何做金额输入限制的更多相关文章

  1. 微信小程序tips集合:无法输入文字/随时查看页面/元素审查/点击事件/数据绑定

    1:编辑文档无法输入文字 出现这种情况一般是因为之前编辑的文档未保存,所有在其他文档输入的时候会自动输入到未保存的文档中,在文档暂时编辑完毕后要ctrl+s随手保存,不然会出现无法打字情况 2: 随时 ...

  2. 微信小程序怎么获取用户输入

    能够获取用户输入的组件,需要使用组件的属性bindchange将用户的输入内容同步到 AppService. <input id="myInput" bindchange=& ...

  3. 微信小程序定时器组件(输入时间字符串即可倒计时)

    昨天写了代码,今天发现要重用,干脆就抽出来做个组件得了,顺便还改善了一下代码通用性. 昨天的代码在这里 github下载地址 用法: 引入: var timer = require('../../pl ...

  4. 微信小程序监听input输入并取值

    小程序的事件分为两种,冒泡和非冒泡事件,像<form/>的submit事件,<input/>的input事件,<scroll-view/>的scroll事件等非冒泡 ...

  5. 微信小程序之支付密码输入demo

    在小程序中实现支付密码的输入,要解决几个问题: 1.小程序要想唤起键盘,必须要借助input控件.通过input控件和其属性focus来唤起和隐藏输入键盘. 2.要让input控件不可见.让光标和输入 ...

  6. 微信小程序—如何获取用户输入文本框的值

    我们就拿简单常用的登录来举例子吧,先看最终效果图片

  7. 天河微信小程序入门:阿里云tomcat免费配置https

    天河君在第一时间通过了微信小程序验证,开启了我的微信小程序之旅.因为天河君之前是一名后端狗,对前端不是很了解,所以几乎可以认为是从零开始学做微信小程序.也希望有志在微信小程序方向做点事情的朋友能够和我 ...

  8. 记录使用微信小程序的NFC和蓝牙功能读取15693芯片的开发历程

    开发目标: (1) 对于Android手机,直接通过微信小程序调用手机的NFC功能,对15693协议的芯片进行读写操作: (2)对于苹果手机(及没有NFC模块的手机),通过微信小程序的蓝牙功能连接到蓝 ...

  9. 微信小程序初探--写个扫雷分享给你玩

    闲暇里,想学一下微信小程序, 于是,用微信小程序原生做了个扫雷玩. 以下略作总结,分享给大家. 微信里下拉,输入[mini计算器], 看到这个图标的就是了: 说好的扫雷,怎么变成计算器了?原因后面解释 ...

随机推荐

  1. leetcode菜鸡斗智斗勇系列(3)--- Jewels and Stones珠宝和钻石

    1.原题: https://leetcode.com/problems/jewels-and-stones/ You're given strings J representing the types ...

  2. 你竟然没用 Nuget 构建项目?

    想写这篇文章缘起于公众号文章里的一条留言: 对于一个现代化的开发平台,建立一种让开发者创建,分享与使用可复用代码的机制是十分必要的.这种"可复用代码"被打包后的文件通常被称作&qu ...

  3. 利用PyInstaller打包exe文件

    前言 平常我们通过Python写完一些小脚本之后,如果使用不频繁的话,一般会选择在DOS界面直接跑脚本,或者在IDE中运行.但当我们需要频繁使用某些脚本,或者在没有Python环境的机器上也能顺利运行 ...

  4. Android OkHttp + Retrofit 断点续传

    本文链接 前面我们已经知道如何使用OkHttp+Retrofit下载文件. 下载文件时,可能会遇到一些意外情况,比如网络错误或是用户暂停了下载. 再次启动下载,如果又要从头开始,会白白浪费前面下载好的 ...

  5. JVM运行时数据区-详细结构图

  6. 如何使ElementUi中的el-dropdown传入多参数

    这边因为业务的需求,觉得随着产品中心以后需要按钮的增多(图1操作栏的效果),这样会导致排版和按钮过于冗长的问题,用户体验不佳,于是想到利用el-dropdown做一个下拉按钮(图1操作1栏的效果) . ...

  7. 设计冲刺Design Sprint - 阅读记录

    改进团队流程: 审查了头脑风暴 - brain storming的成果,真正付诸实践并且获得成功的想法并不是来自大喊大叫的头脑风暴.而是来自静下心来的一次思考. 1. 搭建舞台 在开始设计冲刺之前,你 ...

  8. 文件迁移到FileTable中

    看此文档前,先参考一下文档 https://blog.csdn.net/downmoon/article/details/24374609 环境:阿里云ECS SQL Server 2017 + De ...

  9. python科学计算和数据分析常用库

    NumPy NumPy最强大的是n维数组,该库还包含基本的线性代数函数.傅立叶变换.随机函数和其他底层语言(如Fortran.C和C++)集成的工具. SciPy SciPy建立在NumPy基础上,它 ...

  10. subprocess之check_out用法

    在python3中使用subprocess的check_out方法时,因为该输出为byte类型,所以如果要查看具体的内容时需要进行转码,如果转码不对话,会影响内容输出的可读性,如下: #1,输出解码不 ...