微信小程序金额输入限制

金额的格式如下：

1、只保留两位小数
2、输入的数字中只能有一个小数点
3、首位不能为0

有两种情况：

1、在input标签上做限制，type属性设置为“digit”,禁止输入其他字符。

<input placeholder="输入金额" value='{{info.money==null?"":info.money}}' type="digit" adjust-position="true" bindblur="inputMoney"></input>

js：

//输入金额inputMoney: function(e) {console.log(e)const exp = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;exp.test(e.detail.value)console.log(exp.test(e.detail.value))if (!exp.test(e.detail.value)) {wx.showModal({content: '请输入正确的金额',showCancel: true,})} else {this.setData({money: e.detail.value})}}

2、输入的时候不做限制，在提交后台时再做一个限制。

/*** 金额输入限制*/
const money = function(param) {let num = param.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
}

inputMoney函数：

  inputMoney: function(e) {console.log(e)this.setData({money: config.money(e.detail.value)})}

微信小程序金额输入限制相关推荐

解决微信小程序银行卡号输入转换格式
解决微信小程序银行卡号输入转换格式问题 ps:2017-02-17 19:44 (发现新bug,暂已解决优化中) 新手第一次写博客,请多多见谅! (感觉会有更好的办法,希望有大牛能对我指点指点) 输入 ...
微信小程序自定义输入仿咸鱼发布
微信小程序自定义输入仿咸鱼发布效果图效果图2 主要代码 .js // pages/user/release/release.js import Toast from 'vant-weapp/toa ...
微信小程序文本输入＜textarea/＞详解
也许你迷茫,但是我想说,在你迷茫的同时,保持本心,过好今天就好. 在微信小程序开发中,input 用来实现文本输入,是单行的,textarea是多行的输入实现 1 基本使用 <textarea ...
微信小程序输入框输入换行
今天的每日一测,更新文本输入框中输入换行的问题. 最近在做微信小程序项目的测试,因为输入框中输入换行的问题导致项目上线后出现bug. 具体情况是,在某些文本输入框中,我想到了测试输入换行是否能提交成功 ...
web和微信小程序input输入时禁止输入中文方法
前言:作为一个小白--,每天进步一点点,每天总结一点点,生活就会美好一点- -------------------------------- 进入正文 1.首先禁止输入中文就需要用到正则表达式: 2. ...
微信小程序只能输入数字和字母
微信小程序的input组件中有个bindinput属性,用来实时检测输入的内容,只需要在返回的时候,使用正则表达式处理输入的内容,然后返回到输入框. <input type='text' bin ...
实现微信小程序输入框输入时页面不上移【完美 ~_~】
之前做过的小程序里面这种功能不是太重要,所以有点小瑕疵也一直没去理它.但是这次的小程序有一个话题评论功能,要求比较高,查csdn翻文档好半天终于实现了第一步:输入框固定在页面底部 + 适配底部安全区 ...
微信小程序---密码输入
设计支付密码的输入框效果如下: 源码:github地址:https://github.com/fiveTree/-_- 干货: <view class="pay"> ...
微信小程序---实现输入手机验证码功能
*** html部分 <view class='container'> <view class='main-title' bindtap="test"> 输 ...

微信小程序金额输入限制

微信小程序金额输入限制相关推荐

最新文章

热门文章