输入框验证与处理文档

功能概述

本文档描述了如何使用JavaScript和Vue.js（通过Element UI组件）来实现一个具有输入验证功能的数字输入框。该输入框允许用户输入正数、负数以及小数，并在输入无效时自动回退到上一次的有效值。此外，还处理了在输入框失去焦点（blur）时的特定情况，确保输入值的合法性。

主要函数

handleInput(value)
- 功能：处理输入框内的值变化。使用正则表达式验证输入是否为有效的数字（包括正数、负数和小数）。
- 参数：value（字符串）- 输入框当前的值。
- 逻辑：
  - 首先，通过正则表达式验证输入值的合法性。
  - 如果输入值合法且不为空，根据输入值的具体情况（是否包含小数点或负号）更新lastValidValue（上一次的有效值）和inputValue（当前输入框的值）。
  - 如果输入值不合法，将inputValue回退到lastValidValue。
  - 最后，打印包含当前inputValue的data对象到控制台。
inpublur(value)
- 注意：函数名可能存在拼写错误，应为onBlur或类似的名称以反映其用途。
- 功能：处理输入框失去焦点时的情况。
- 参数：value（字符串）- 失去焦点时输入框的值。
- 逻辑：
  - 首先，将value转换为字符串类型。
  - 如果value不为空且值为'-'或最后一个字符为.，则将inputValue回退到lastValidValue（如果lastValidValue存在的话），否则不做处理。

Vue模板集成

html 复制代码

<el-input v-model="inputValue" @input="handleInput" @blur="inpublur(inputValue)"></el-input>

javascript 复制代码

  const inputValue = ref('0');
  const lastValidValue = ref('');


function handleInput(value) {
  // 使用正则表达式来校验输入值
  const regex = /^[-+]?(\d+(\.\d*)?|\.\d+)?$/; // 允许正数、负数、小数

  console.log(value);
  if (regex.test(value) && value) {
    console.log(value);

    // 如果输入有效，则更新lastValidValue和currentValue
    if (!value.includes('.') && !value.includes('-')) {
      console.log(value);
      lastValidValue.value = Number(value);
      inputValue.value = Number(value);
    } else if (value.slice(-1) != '.' && value.slice(-1) != '-') {
      console.log(value);
      lastValidValue.value = Number(value);
      inputValue.value = Number(value);
    } else if (value.includes('.') && value.slice(-1) != '.') {
      lastValidValue.value = Number(value);
      inputValue.value = Number(value);
    }
  } else {
    console.log(value);

    // 如果输入无效，则回退到lastValidValue
    inputValue.value = lastValidValue.value;

    // 可选：如果你想要在用户输入无效时给出某种反馈（尽管你说不需要错误信息）
    // 你可以使用Toast、Snackbar或其他UI组件来显示一个短暂的提示
    // this.$message.error('请输入有效的数字'); // 假设你使用了Element UI的Message组件
  }

  let data = {
    a: inputValue.value,
  };
  console.log(data);
}

function inpublur(value) {
  console.log(value);
  value = value + '';
  if (value) {
    if (value == '-' || value.slice(-1) == '.') {
      inputValue.value = lastValidValue.value ? lastValidValue.value : '';
    }
  }
}

v-model="inputValue" ：双向绑定输入框的值到Vue实例的inputValue数据属性。
@input="handleInput" ：监听输入框的input事件，每当输入框的值变化时调用handleInput函数。
@blur="inpublur(inputValue)" ：监听输入框的blur事件（即失去焦点），调用inpublur函数并传入当前inputValue作为参数。

注意事项

本示例假定lastValidValue和inputValue是Vue实例的数据属性，需要在Vue组件的data函数中定义。
inputValue应该被定义为响应式数据，以便Vue能够追踪其变化并更新DOM。
示例中的正则表达式/^[-+]?(\d+(\.\d*)?|\.\d+)?$/允许用户输入正数、负数和小数，但不强制小数部分必须存在。
在实际应用中，可能需要更复杂的逻辑来处理边缘情况（如多个连续的小数点或负号等）。
如果需要向用户展示错误信息，可以使用Element UI的Message组件或其他UI框架提供的类似功能。