正则校验:去除带整数和小数的数字前后多余的0和多余小数点

对于用户输入的 0003.4000这种数字,其实我们需要的就是3.4,多余的0不仅视觉上不好看,在存储时也很不方便。怎么让我们在用户完成输入后,清除掉这些无用的0数字呢?

此外,对于输入了2.3.3多个小数点这种错误字符,value为空,但输入框未清空,需要手动清空

方案:在@blur鼠标失焦事件中,触发正则校验,将输入的内容和过滤掉这些多余的数字0,方法如下:
<el-input
    type="number"
    @blur="handleBlurWeight(answer, $event)"
    v-model="answer">
</el-input>

......

handleBlurWeight (item, event) {
  this.answer = handleBlurDots(item, event);
}

这里提供了一个通用的方法handleBlurDots:

// 输入框为数字类型,不允许存在2.3.3连续小数点。(此时value为空,但输入框未清空,手动清空)
export function handleBlurDots (item, event) {
  if (item === '') {
    setTimeout(() => {
      event.target.value = '';
    }, 60);
  }
  // 去除整数前的0和小数点后多余的0,如011.020300 =》 11.0203
  const reg1 = /0*([1-9]\d*|0\.\d+)/;
  const reg2 = /(?:\.0*|(\.\d+?)0+)$/;
  event.target.value = event.target.value.replace(reg1, '$1').replace(reg2, '$1');
  return event.target.value;
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值