场景分为以下四类

• 只能输入整数 📌
• 只能输入整数与负数 📌
• 只能输入数字、负数、小数点(默认保留两位小数) 📌
• 只能输入数字、小数点(默认保留两位小数) 📌

方法说明

无论走那个场景都会有默认输入值处理逻辑

validateInput 方法用于处理输入值的逻辑，并根据指定的参数类型对输入值进行验证和转换。

参数

• value (默认值: '')：要处理的输入值，可以是任意类型的字符串。
• objType：一个包含验证参数的对象，用于指定输入值的验证类型。它具有以下可选属性：
  • integer (默认值: false)：布尔值，只能输入整数。
  • isNoPoint (默认值: false)：布尔值，只能输入整数与负数。
  • isPositive (默认值: false)：布尔值，只能输入数字、负数、小数点(默认保留两位小数)。
  • isValidNumber (默认值: false)：布尔值，只能输入数字、小数点(默认保留两位小数)。
  • decimalPlaces (默认值: 2)：一个数字，指定保留的小数点后的位数默认两位小数在isPositive isValidNumber这两个类型上可以使用

回调函数

• callback：一个回调函数，接收处理后的输入值作为参数。

js
const validateInput = (value = '', objType, callback) => {
  let { decimalPlaces = 2 } = objType || {}

  // 默认的输入值处理逻辑
  const removeRedundantChars = (val) => {
    return val
      .replace(/-(?=.*-)/g, '') // 只保留第一个 - 清除多余的
      .replace(/^\./g, '') // 清除第一个字符是数字而不是 .
      .replace(/^0+(\d)/, '$1') // 清楚开头多余的0
      .replace('.', '$#$')
      .replace(/\./g, '')
      .replace('$#$', '.') // 只保留第一个. 清除多余的
  }
  value = removeRedundantChars(value)
  // 1. 只能输入整数
  if (objType.integer) {
    value = value.replace(/[^\d]/g, '')
    return callback(value)
  }

  // 2. 只能有整数与负数
  if (objType.isNoPoint) {
    value = value.replace(/[^\-?\d]/g, '').toString() // 只能输入数字和负号
    return callback(value)
  }

  // 3. 只能输入数字、负数、小数点（默认保留两位小数）
  if (objType.isPositive || objType.isValidNumber) {
    value = value.replace(/[^\-?\d.]/g, '').toString() // 清除数字和.以外的字符
    // 清除负号（仅适用于 objType.isValidNumber）
    if (objType.isValidNumber) {
      value = value.replace(/^-/g, '')
    }
    // 限制小数点后的位数，默认保留两位小数，可以传参限制小数点后的位数
    value = value.replace(
      new RegExp(`(\\.\\d{${decimalPlaces + 1},})$`),
      (match) => match.slice(0, decimalPlaces + 1)
    )
    return callback(value)
  }
}

示例

下面是一些示例，展示了不同的参数类型对输入值的处理逻辑：

示例 1：只能输入整数🌟

js
validateInput('123abc', { integer: true }, (value) => {
  console.log(value) // 输出：123
})

示例 2：只能有整数与负数🌟

js
validateInput('12-3abc', { isNoPoint: true }, (value) => {
  console.log(value) // 输出：-123
})

**示例 3：只能输入数字、负数、小数点（默认保留两位小数）**🌟

js
validateInput('12.345abc', { isPositive: true }, (value) => {
  console.log(value) // 输出：12.34
})

**示例 4：只能输入数字、小数点（默认保留两位小数）**🌟

js
validateInput('-12.345abc', { isValidNumber: true }, (value) => {
  console.log(value) // 输出：12.34
})

示例 5：自定义小数点位数限制为 3 位🌟

js
validateInput(
  '12.34567abc',
  { isValidNumber: true, decimalPlaces: 3 },
  (value) => {
    console.log(value) // 输出：12.345
  }
)

通过传入不同的参数类型，你可以根据需求对输入值进行验证和处理。

在 Input 框中的用法

在上面的·示例中其实已经展示了方法的时候、那么我们现在来 Input 回调中用一遍

例子：vue3.0 中使用完整代码

我的要求：只能输入数字、保留三位小数、不可以输入负数 那么我们就可以使用isValidNumber这个类型、然后给方法传递 { isValidNumber: true, decimalPlaces: 3 }isValidNumber 为 true 然后保留三位小数

js
<template>
  <div>
    <el-input
      style="width: 200px"
      v-model="inputValue"
      placeholder="请输入"
      clearable
      @input="handleInputValue"
    ></el-input>
  </div>
</template>

<script>
import { reactive, ref, toRefs } from "vue";

export default {
  setup() {
    const inputValue = ref("");
    const state = reactive({});
    // input输入框的回调方法
    const handleInputValue = (value) => {
      // 处理输入值的逻辑
      validateInput(
        value,
        { isValidNumber: true, decimalPlaces: 3 },
        (value) => {
          inputValue.value = value;
        }
      );
    };

    const validateInput = (value = "", objType, callback) => {
      let { decimalPlaces = 2 } = objType || {};

      // 默认的输入值处理逻辑
      const removeRedundantChars = (val) => {
        return val
          .replace(/-(?=.*-)/g, "") // 只保留第一个 - 清除多余的
          .replace(/^\./g, "") // 清除第一个字符是数字而不是 .
          .replace(/^0+(\d)/, "$1") // 清楚开头多余的0
          .replace(".", "$#$")
          .replace(/\./g, "")
          .replace("$#$", "."); // 只保留第一个. 清除多余的
      };
      value = removeRedundantChars(value);
      // 1. 只能输入整数
      if (objType.integer) {
        value = value.replace(/[^\d]/g, "");
        return callback(value);
      }

      // 2. 只能有整数与负数
      if (objType.isNoPoint) {
        value = value.replace(/[^\-?\d]/g, "").toString(); // 只能输入数字和负号
        return callback(value);
      }

      // 3. 只能输入数字、负数、小数点（默认保留两位小数）
      if (objType.isPositive || objType.isValidNumber) {
        value = value.replace(/[^\-?\d.]/g, "").toString(); // 清除数字和.以外的字符
        // 清除负号（仅适用于 objType.isValidNumber）
        if (objType.isValidNumber) {
          value = value.replace(/^-/g, "");
        }
        // 限制小数点后的位数，默认保留两位小数，可以传参限制小数点后的位数
        value = value.replace(
          new RegExp(`(\\.\\d{${decimalPlaces + 1},})$`),
          (match) => match.slice(0, decimalPlaces + 1)
        );
        return callback(value);
      }
    };

    return {
      ...toRefs(state),
      handleInputValue,
      inputValue,
      validateInput,
    };
  },
};
</script>