el-input动态范围限制实战：0-100正整数输入与极值联动控制

1. 为什么你的数字输入框总出问题？

不知道你有没有遇到过这种情况：产品经理跑过来说，“咱们这个表单里，用户填年龄的地方，有人输了个-5岁，还有人输了个999岁，这数据入库后报表都没法看了！” 或者，在配置某个系统的阈值时，要求最小值不能大于最大值，但用户先填了个最大值80，回头又把最小值改成了90，结果逻辑直接混乱，后台报错。

这些问题，本质上都是前端输入框的动态范围限制没做好。尤其是在使用像 Element UI 这样的成熟组件库时，很多人会觉得 el-input 加个 type="number" 或者 max、min 属性就万事大吉了。我刚开始也这么想，直到在实际项目里踩了坑才发现，事情远没这么简单。type="number" 确实能阻止键盘输入非数字，但它管不住粘贴进来的内容，也管不住通过浏览器开发者工具直接修改的值。更重要的是，它无法实现两个输入框之间的智能联动——比如最小值变化时，自动检查并修正最大值，反之亦然。

所以，今天我想跟你深入聊聊的，就是如何用 Element UI 的 el-input 组件，实现一个既严谨又用户友好的 0-100正整数输入限制，并且让最小值和最大值这两个框能够“聪明地”互相校验。这个需求听起来简单，但要做好，里面有不少门道。我们会用到 el-input 的 formatter 和 parser 这两个高级属性，它们就像是输入框的“守门员”和“翻译官”，一个负责把用户输入的东西“打扮”成我们想要的格式展示出来，另一个负责把展示的格式再“翻译”回程序能处理的真实数据。掌握了它们，你就能轻松驾驭各种复杂的输入限制场景了。

2. 理解核心武器：formatter 与 parser

在动手写代码之前，我们得先搞清楚手里的两件“法宝”到底是干嘛的。很多朋友对 v-model 很熟，但对 formatter 和 parser 可能就比较陌生了。你可以这样理解：v-model 是数据和输入框的双向绑定通道，而 formatter 和 parser 就是这条通道上的两个“加工站”。

formatter（格式化函数） 的作用是：当 v-model 绑定的数据要显示在输入框中时，它会介入，对数据进行一番“梳妆打扮”。比如，你后台存的是数字 100，但你想在输入框里显示为“100%”，formatter 就能帮你加上这个百分号。它的工作时机是 数据 -> 视图。

parser（解析函数） 的作用则相反：当用户在输入框里输入了内容，这些内容要转换回数据更新到 v-model 时，parser 会出手，把那些“梳妆打扮”去掉，还原出数据的“素颜”。比如，用户输入了“100%”，parser 就需要把“%”去掉，得到纯数字 100。它的工作时机是 视图 -> 数据。

为什么我们实现0-100限制非用它们不可？因为单纯靠 type="number" 和 max、min 属性，我们无法在用户输入的过程中进行实时、精细的控制。例如，用户输入“123”，我们希望立刻将其限制为“100”；用户输入“abc”，我们希望直接过滤掉。这些 formatter 和 parser 都能做到。更重要的是，它们能让我们在数据“进出”输入框的关口进行拦截和处理，为后续的联动校验打下坚实的基础。

这里有一个非常关键的细节需要注意：formatter 和 parser 必须配对使用，并且实现逻辑要互逆。也就是说，经过 formatter 处理后的显示值，再经过 parser 处理，应该能变回原始数据（或经过业务限制后的有效数据）。如果它们俩“对不上”，就可能导致数据在输入框里显示是一套，实际存储的值是另一套，引发各种诡异的问题。

3. 实战：从零构建0-100正整数输入限制

好了，理论铺垫得差不多了，我们直接上代码，看看怎么一步步把这个功能做扎实。我会假设你有一个 Vue 3 + Element Plus 的项目环境（Vue 2 + Element UI 原理完全一样）。

3.1 基础限制：只允许数字，且范围在0-100

首先，我们创建一个组件，里面有两个 el-input，分别绑定最小值和最大值。

<template>
  <div>
    <el-input
      v-model.number="minValue"
      :formatter="formatInput"
      :parser="parseInput"
      placeholder="最小值"
      style="width: 120px"
    />
    <s