需求背景

日常开发中会有对input做校验的需求  例如做一个只可以输入一位小数及可以为负数的输入框  这时候会出现0开头、多个--、多个小数点插入或开头结尾为小数点的情况

实现过程

<el-inputstyle="width: 80px;"v-model="dataForm.low"@input="lowHandleInput($event, 'low')"@blur="lowValueBlur('low')"></el-input>
const formatValue=(value:any)=> {// 格式化输入的值，确保最多1位小数const [integerPart, decimalPart] = value.split(".");if (decimalPart && decimalPart.length > 1) {return `${integerPart}.${decimalPart.slice(0, 1)}`;}//只保留最前面的.value=value.replace(/\.(?=.*\.)/g, '');//多个-处理const firstChar = value[0] || '';const restOfString = value.slice(1).replace(/-/g, '');value= firstChar + restOfString;return value;}const  lowHandleInput=(value:any,name:string)=> {//基础格式检测const regex = /^[-]?\d*(\.\d{0,1})?$/;if (!regex.test(value)) {dataForm[name] = formatValue(value.replace(/[^-\d.]/g, "").replace(/(\.\d*)?\.$/, "$1"),);return;}dataForm[name] = formatValue(value);}const  lowValueBlur=(name:string)=> {if (dataForm[name].length) {//最后一位为.if (dataForm[name][dataForm[name].length - 1] == ".") {dataForm[name] = dataForm[name].slice(0, -1);}//最前面为.if (dataForm[name][0] == ".") {dataForm[name] = dataForm[name].slice(1);}//将前导零忽略dataForm[name]=String(Number(dataForm[name]));}}

失焦及输入事件可传key进行复用  若小数点需要支持多位 例如3位时可将正则及slice内数字1进行替换为3