如何使用JavaScript限制数值输入框输入值大于另一输入框数值？

嘿，我看你正在处理输入框数值限制的问题，刚好之前也帮别人解决过类似的需求，给你分享一个实用的方案吧！

首先，你之前已经获取了各个输入框的值，接下来我们可以把验证逻辑通用化，避免重复写代码，同时保证实时验证的体验。

思路拆解 #

我们要做的核心是：让每个「已获分数」输入框能关联到对应的「总分」输入框，每次用户输入或修改数值时，自动检查是否超过总分，要是超了就提示用户或者直接修正数值。

具体实现步骤 #

1. 先调整HTML结构（给输入框加关联标识）

给每个「已获分数」输入框加一个自定义属性data-total-id，值就是对应「总分」输入框的ID，这样JS就能知道该找哪个输入框做对比：

<div>
  <label>Matric 总分: <input type="number" id="matrictotal" class="total-input"></label>
  <label>Matric 已获分数: <input type="number" id="matricobtained" class="obtained-input" data-total-id="matrictotal"></label>
  <!-- 可以加个错误提示位 -->
  <span class="error-message"></span>
</div>
<div>
  <label>Inter 总分: <input type="number" id="intertotal" class="total-input"></label>
  <label>Inter 已获分数: <input type="number" id="interobtained" class="obtained-input" data-total-id="intertotal"></label>
  <span class="error-message"></span>
</div>
<div>
  <label>Bachelor 总分: <input type="number" id="bachelortotal" class="total-input"></label>
  <label>Bachelor 已获分数: <input type="number" id="bachelorobtained" class="obtained-input" data-total-id="bachelortotal"></label>
  <span class="error-message"></span>
</div>

2. 编写通用的验证函数

这个函数可以处理所有「已获分数」输入框的验证，不用为每一组单独写逻辑：

function checkObtainedValue(e) {
  // 获取当前触发事件的输入框
  const obtainedInput = e.target;
  // 从自定义属性里拿到对应总分输入框的ID
  const totalInputId = obtainedInput.dataset.totalId;
  const totalInput = document.getElementById(totalInputId);
  // 找到对应的错误提示元素
  const errorElement = obtainedInput.parentElement.nextElementSibling;

  // 如果找不到对应总分框，直接终止函数
  if (!totalInput) return;

  // 把输入值转为数字，空值或非数字的话默认设为0
  const obtainedValue = parseFloat(obtainedInput.value) || 0;
  const totalValue = parseFloat(totalInput.value) || 0;

  // 核心对比逻辑
  if (obtainedValue > totalValue) {
    // 方式1：显示友好的错误提示（比alert体验更好）
    errorElement.textContent = `已获分数不能超过总分 ${totalValue}！`;
    errorElement.style.color = 'red';
    // 方式2：直接把输入值修正为总分（可选，根据需求选）
    // obtainedInput.value = totalValue;
  } else {
    // 验证通过，清空错误提示
    errorElement.textContent = '';
  }
}

3. 绑定事件，让验证生效

等页面加载完成后，给所有「已获分数」输入框绑定事件，这样用户输入时就能实时验证：

// 页面DOM加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  // 获取所有「已获分数」输入框
  const obtainedInputs = document.querySelectorAll('.obtained-input');
  
  // 给每个输入框绑定两个事件：实时输入验证 + 失去焦点验证
  obtainedInputs.forEach(input => {
    input.addEventListener('input', checkObtainedValue);
    input.addEventListener('change', checkObtainedValue);
  });

  // 额外优化：如果总分修改了，也要检查对应的已获分数
  const totalInputs = document.querySelectorAll('.total-input');
  totalInputs.forEach(totalInput => {
    totalInput.addEventListener('change', function() {
      // 找到对应已获分数输入框的ID（比如把total的id去掉total后缀，加obtained）
      const obtainedInputId = this.id.replace('total', 'obtained');
      const obtainedInput = document.getElementById(obtainedInputId);
      if (obtainedInput) {
        // 手动触发一次验证
        checkObtainedValue({ target: obtainedInput });
      }
    });
  });
});

额外说明 #

• 我这里用了错误提示文本代替alert，体验会更友好，你也可以根据需求换成alert或者其他提示方式。
• 处理了空值和非数字的情况，避免出现NaN导致的逻辑错误。
• 额外加了总分修改时的验证，比如用户先输入已获分数是80，后来把总分改成70，这时候也会自动提示错误。

内容的提问来源于stack exchange，提问作者Hamza Saleem