input、el-input 输入数字校验

131 阅读1分钟

el-input只允许输入数字(可以解决某次操作输入的是中文,会导致后续再输入数字,无法更新v-model的值的情况):

                    <el-input
                      :value="row.selectGradeNum"
                      @input="(str) => (row.selectGradeNum = str.trim().replace(/[^\d]/g, ''))"
                    ></el-input>

这个方法可以把字符串中的数字提取出来,如果有小数就保留两位小数,有多个前导0就去除。


      replaceNumberStr(str, noFloat) {
        // 使用正则表达式匹配输入的内容,只保留数字和小数点
        let cleanedValue = str.replace(/[^0-9.]/g, '');

        // 移除多余的小数点
        cleanedValue = cleanedValue.replace(/\.{2,}/g, '.');

        // 确保小数点只存在一个
        const dotCount = cleanedValue.split('.').length - 1;
        if (dotCount > 1) {
          const parts = cleanedValue.split('.');
          cleanedValue = `${parts[0]}.${parts.slice(1).join('')}`;
        }

        // 移除前导零
        cleanedValue = cleanedValue.replace(/^0+(?=\d)/, '');

        // 保留两位小数(只对小数部分进行格式化的优势是,避免输入300,在删除最后一个0时,输入框内容变为30.00)
        const parts = cleanedValue.split('.');
        const integerPart = parts[0];
        const decimalPart = parts[1] || '';

        // 判断是否为负数
        if (integerPart.length === 0 || integerPart === '-') {
          cleanedValue = '';
        }

        // 不保留小数
        if (noFloat) {
          return integerPart;
        }
        if (decimalPart.length > 2) {
          cleanedValue = `${integerPart}.${decimalPart.slice(0, 2)}`;
        }
        return cleanedValue;
      },
      
    // 校验字符串,返回整数部分
      replaceNumberStr2(str) {
        return this.replaceNumberStr(str, true);
      }

image.png