需求:退款金额,只能大于等于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
  }
}
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐