對於用戶輸入的 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;
}