首先说明输入框中的格式限制如下:
(1)当第一位为0时,第二位只能输入小数点,且不能输入其他数字(如00)
(2)当第一位不为0时,后边不限制
(3)数据中只能输入一个小数点
(4)小数点后边保留2位
不说废话,直接上代码:
<input type="text" v-model="inputValue" @input="handleInput" />const inputValue = ref('')/*** 功能: 数据格式校验【保留2位小数】* e: input返回的值*/
const handleInput = (e: any) => {// 一定要加nextTick,否则特殊情况的更改不生效【如:000时,更改为0】nextTick(() => {let value = e.detail.value// 如果当前输入为空,直接允许清空if (!value) {inputValue.value = ''} else if (value?.charAt(0) === '0' && value.charAt(1) && value.charAt(1) !== '.') {// // 1. 当第一位为0时,只能输入小数点【第二位必须是小数点】value = '0'}value = value.replace(/[^\d.]/g, '') // 清除"数字"和"."以外的字符value = value.replace(/\.{2,}/g, '.') // 只保留第一个. 清除多余的value = value.match(/^\d*(\.?\d{0,2})/g)[0] || '' // 保留2位小数inputValue.value = valuereturn})
}
注意在handleInput方法中,一定要使用nextTick,否则部分赋值无效