正则校验:去除带整数和小数的数字前后多余的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;
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章