微信小程序提现金额input输入限制(保留两位小数)

小程序提现输入金额限制,好久没写小程序了,写的有点捞,凑合看吧,没想到更好得办法,就写了一堆判断然后限制吧,有更好得方法可以交流一哈。。

在这里插入图片描述
在这里插入图片描述

弹窗用的van-popup

这里注意: type="digit" 开启带小数键盘,这个在微信开发者工具里没效果,写上在真机上验证

<!-- 提现弹窗 -->
<van-popup
  custom-class="withdrawal-wrap"
  show="{
     
     { isWithdrawal }}"
  round
  bind:close="onClose">
  <view class="withdrawal_title">
    <text>提现金额:</text>
  </view>
  <view class="withdrawal_popup">
    <van-cell-group>
      <van-field
        value="{
     
     { amount }}"
        type="digit"
        center
        clearable
        label=""
        placeholder="可提现金额{
     
     {basicAmountInfo.accountBalance}}元"
        border="{
     
     { false }}"
        use-button-slot
        placeholder-style="color:#AAAAAA;font-size:28rpx;"
        bind:input="getInputNum"
      >
        <view
          slot="button"
          size="small"
          style="color: #AD9282;font-size:22rpx;font-weight: 500;"
          catchtap="onAllWithdrawal"
        >
          全部提现
        </view>
      </van-field>
    </van-cell-group>
  </view>
  <view class="withdrawal_toast">满{
   
   {basicAmountInfo.minWithdrawalAmount}}元可发起提现</view>
  <view class="withdrawal_btn">
    <view class="cancel_btn" bindtap="onCancel">取消</view>
    <view class="confirm_btn" bindtap="onConfirm">确认</view>
  </view>
</van-popup>

检验input输入金额值

// input输入中
getInputNum (e) {
    
    
	let amount = e.detail
    let num = null
    // 小数点后最多只能输入两位
    num = amount.replace(new RegExp('^(\\d+\\.\\d{2}).+'), '$1')

    // 小数点开头得话,让前面加个0   eg: 0.xx
    const startPoint = /^\./g
    if (startPoint.test(num)) {
    
    
      num = amount.replace(startPoint, '0.')
    }

    // 若没有小数点,前面输入多个0,去掉0取整
    // if(num有值 && 没有小数点 && 不等于'0')
    if (num && !num.includes('.') && num !== '0') {
    
    
      num = +num
    }
    // 若出现多个小数点,则替换为1个
    const morePoint = /\.+(\d*|\.+)\./g
    if (morePoint.test(num)) {
    
    
      num = amount
        .replace(/\.{2,}/g, ".")
        .replace(".", "$#$")
        .replace(/\./g, "")
        .replace("$#$", ".")
    }

	this.setData({
    
    
		amount: num
	})
}

最终输出效果:正常得数字eg: 1、22、333等,以及正常的最多两位小数 eg: 0.12、10.11等
有点不好的是,因为都用的replace都是输完之后会闪一下,体验有点不好,有更好办法的话可以分享给我!!!

调试期间遇到很多问题,工具占一半,有的改完值没效果,可能需要重新编译,有的就完全没效果,但是在手机上是有效果的
微信开发者工具:真不咋滴!!!建议都在真机上测试最终结果!!!

猜你喜欢

转载自blog.csdn.net/weixin_43106777/article/details/127980500