Vue+Element UI实战：el-input如何优雅限制0-100整数输入（附联动校验）

Vue+Element UI实战：el-input如何优雅限制0-100整数输入（附联动校验）

在表单开发中，数字输入限制是高频需求。最近接手一个数据配置后台，产品经理要求两个关联输入框必须满足"最小值≤最大值"的规则，且数值范围限定在0-100的整数。这个看似简单的需求，实际藏着不少坑——用户可能粘贴非数字内容、输入超出范围的值，甚至通过浏览器开发者工具直接修改DOM。本文将分享一套经过实战检验的解决方案。

1. 核心方案设计思路

Element UI的el-input组件提供了formatter和parser这两个鲜为人知却极其强大的属性。它们就像数据的"守门人"：

• formatter：负责将绑定的值格式化为显示内容
• parser：负责将用户输入的内容解析为绑定的值

这种双向处理机制比单纯用v-model+事件监听更优雅。我曾尝试用@input事件处理，发现要处理光标位置、输入法组合文本等问题，代码很快变得难以维护。而formatter/parser方案只需关注数据转换逻辑。

典型问题场景：

• 用户粘贴"12abc"文本
• 输入法正在组合中文拼音
• 通过开发者工具直接修改value属性
• 最小值输入框的值超过最大值

2. 基础输入限制实现

先实现单个输入框的0-100整数限制。关键点在于正则表达式处理和边界检查：

const formatInput = (value) => {
  // 过滤所有非数字字符，但保留有效数字
  return value.toString().replace(/[^\d]/g, '')
}

const parseInput = (value) => {
  const numValue = parseInt(value || 0, 10)
  
  // 边界检查
  if (numValue < 0) return '0'
  if (numValue > 100) return '100'
  
  return numValue.toString()
}

在模板中的使用方式：

<el-input
  v-model="minValue"
  :formatter="formatInput"
  :parser="parseInput"
  placeholder="最小值"
/>

几个优化细节：

1. 处理value为null/undefined的情况
2. 使用toString()避免数字类型的方法调用错误
3. 返回字符串类型保持输入框显示稳定

3. 联动校验实现方案

当需要处理最小值、最大值的联动时，情况变得复杂。我们需要在blur事件时进行交叉验证：

const validateRange = (type, cu