vue中做一个最多输入一位小数且可以为负数的输入框（包含最前面最后面为小数点及多个-符号与前导零校验）

原创于 2024-12-24 15:44:15 发布 · 551 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

需求背景

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

实现过程

<el-input
            style="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