正则校验:去除带整数和小数的数字前后多余的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;
}
发布了41 篇原创文章 · 获赞 65 · 访问量 4万+

猜你喜欢

转载自blog.csdn.net/cindy647/article/details/105277930
今日推荐