如何实现表单百分比输入总和不超过100%的校验功能

我们可以拆成实时输入限制和提交最终校验两部分完成需求，具体修改如下：

1. HTML小调整 #

修改form标签的onsubmit属性，支持阻止默认提交行为：

<form id="myForm" action="#" onsubmit="return validateForm(event)">

2. 完整JS逻辑（main.js） #

// 页面加载完成后绑定实时输入监听
window.onload = function() {
  // 获取所有资产类输入框
  const assetInputs = document.querySelectorAll('#myForm input[type="number"]');
  assetInputs.forEach(input => {
    input.addEventListener('input', () => updateMaxLimits(assetInputs));
  });
  // 初始化一次限制规则
  updateMaxLimits(assetInputs);
}

// 动态更新所有输入框的最大可填值
function updateMaxLimits(inputs) {
  // 计算已填写的总和，空值按0计算
  const filledSum = Array.from(inputs).reduce((sum, input) => {
    const val = Number(input.value) || 0;
    return sum + val;
  }, 0);
  const remaining = 100 - filledSum;
  // 遍历每个输入框设置max
  inputs.forEach(input => {
    const currentVal = Number(input.value) || 0;
    // 当前输入框的最大值 = 自身已填值 + 剩余可分配额度
    input.max = currentVal + remaining;
    // 如果剩余额度为负，高亮提示当前输入超标
    input.style.border = remaining < 0 ? '2px solid red' : '';
  });
}

// 提交校验函数
function validateForm(e) {
  e.preventDefault();
  const Stocks = Number(document.forms["myForm"]["Stocks"].value) || 0;
  const Forex = Number(document.forms["myForm"]["Forex"].value) || 0;
  const Commodities = Number(document.forms["myForm"]["Commodities"].value) || 0;
  const Crypto = Number(document.forms["myForm"]["Crypto"].value) || 0;
  
  const total = Stocks + Forex + Commodities + Crypto;
  // 总和超过100%校验不通过
  if (total > 100) {
    alert(`所有资产百分比总和为${total}%，不能超过100%`);
    return false;
  }
  // 校验通过可执行后续提交逻辑
  alert('提交成功');
  // 如需真实提交表单放开下面注释
  // document.getElementById('myForm').submit();
  return true;
}

功能说明 #

• 实时动态限制：用户每输入一个值，会自动计算剩余可分配额度，后续输入框的max值会自动更新，比如输入Stocks40%，其他输入框的max会自动变成60，再输入Forex20%，剩下两个输入框的max会变成40
• 提交双重校验：哪怕用户绕过前端input的max限制（比如修改浏览器控制台代码），提交时也会做二次校验，确保总和不超过100%
• 超标提示：如果总和已经超过100%，输入框会自动标红提醒用户

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