vue中input框输入大于等于0且保留两位小数,超出的部分无法输入(还有保留一位小数、输入正整数)

需求:退款金额,只能大于等于0,且只能输入2位小数。

由于我的web端和APP和小程序,框架不一样。 因此input输入框内方法有部分变动。
我总结了以下方法:

一、最实的的原生input框(所有框架都能用)

需求:大于等于0,且只能输入2位小数

		<input
       	  type="number"
          v-model="amount"
          maxlength="12"
          @input="handleInput(amount)"
          placeholder="请输入金额"
        />
 

// 检查输入
    handleInput(value) {
    	//大于等于0,且只能输入2位小数
	  let val=value.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/,'$1');
	  if(val==null||val==undefined||val==''){
          val=0
      }
      this.amount = val;
    },

// 或者替换下@input     (这个有可能因为框架问题,出问题,但胜在简单)
		<input
       	  type="number"
          v-model="amount"
          maxlength="12"
          oninput="value=value.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/,'$1')"
          placeholder="请输入金额"
        />
//

一些其他正则总结

	var reg = /[^\d.]/g
	// 只能是数字和小数点,不能是其他输入
	val = val.replace(reg, "")
	
	// // 保证第一位只能是数字,不能是点
	val = val.replace(/^\./g, "");
	
	// // 小数只能出现1位
	val = val.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
	
	// // 小数点后面保留2位
	val = val.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');

二、ant design vue 中输入框a-input和a-input-number

需求:大于等于0,且只能输入2位小数

	<a-input  placeholder="输入金额"
		  type="number" 
		  @change="limitNumber(item.amount,index)" 
		  v-model:value="item.itemAmount" 
		  style="border: none;">
	 </a-input>

	 limitNumber(value,i) {
      // console.log(i);
      	let val=value.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/,'$1');
        if(val==null||val==undefined||val==''){
          val=0
        }
        this.itemAmount=val
    }

需求:只能输入大于等于零的整数

    <a-input-number
      v-model:value="item.amount"
      :min="0"
      :formatter="limitNumber"
      :parser="limitNumber"
    />

// ant design数字输入框限制只能输入大于等于零的整数
limitNumber(value){
  if (typeof value === 'string') {
    return !isNaN(Number(value)) ? value.replace(/\./g, '') : 0
  } else if (typeof value === 'number') {
    return !isNaN(value) ? String(value).replace(/\./g, '') : 0
  } else {
    return 0
  }
}
  • 3
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值