输入框验证与处理文档

输入框验证与处理文档

功能概述

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

主要函数
  1. handleInput(value)

    • 功能:处理输入框内的值变化。使用正则表达式验证输入是否为有效的数字(包括正数、负数和小数)。
    • 参数value(字符串)- 输入框当前的值。
    • 逻辑
      • 首先,通过正则表达式验证输入值的合法性。
      • 如果输入值合法且不为空,根据输入值的具体情况(是否包含小数点或负号)更新lastValidValue(上一次的有效值)和inputValue(当前输入框的值)。
      • 如果输入值不合法,将inputValue回退到lastValidValue
      • 最后,打印包含当前inputValuedata对象到控制台。
  2. 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作为参数。
注意事项
  • 本示例假定lastValidValueinputValue是Vue实例的数据属性,需要在Vue组件的data函数中定义。
  • inputValue应该被定义为响应式数据,以便Vue能够追踪其变化并更新DOM。
  • 示例中的正则表达式/^[-+]?(\d+(\.\d*)?|\.\d+)?$/允许用户输入正数、负数和小数,但不强制小数部分必须存在。
  • 在实际应用中,可能需要更复杂的逻辑来处理边缘情况(如多个连续的小数点或负号等)。
  • 如果需要向用户展示错误信息,可以使用Element UI的Message组件或其他UI框架提供的类似功能。
相关推荐
coding随想8 分钟前
掌控网页的魔法之书:JavaScript DOM的奇幻之旅
开发语言·javascript·ecmascript
然我35 分钟前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子40 分钟前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹44 分钟前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器1 小时前
指定阿里镜像原理
前端
枷锁—sha1 小时前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha1 小时前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
群联云防护小杜1 小时前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
DanB241 小时前
html复习
javascript·microsoft·html
汉得数字平台2 小时前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控