如何在网页中用JS实现算术计算校验拦截非法表单提交？

你可以按照「监听提交事件→取值转数字→规则校验→拦截/放行」的逻辑实现，全程用原生JS就可以完成，不需要额外框架，适合新手快速上手。

第一步：编写基础HTML结构 #

先把三个输入框、表单、错误提示容器搭好，输入框直接用number类型从源头减少非法输入：

<form id="paymentForm">
  <div style="margin: 10px 0;">
    <label>总价（输入框A）：</label>
    <input type="number" id="totalA" step="0.01" min="0" required>
  </div>
  <div style="margin: 10px 0;">
    <label>刷卡支付金额（输入框B）：</label>
    <input type="number" id="cardB" step="0.01" min="0" required>
  </div>
  <div style="margin: 10px 0;">
    <label>现金支付金额（输入框C）：</label>
    <input type="number" id="cashC" step="0.01" min="0" required>
  </div>
  <!-- 错误提示默认隐藏 -->
  <div id="errorMsg" style="color: red; display: none; margin: 8px 0;"></div>
  <button type="submit">提交</button>
</form>

第二步：编写JS校验逻辑 #

核心要注意两个新手容易踩的坑：一是输入框取到的值默认是字符串，直接相加会变成文本拼接；二是JS浮点数计算有精度问题，要做转译处理避免误判。

// 获取页面上的对应元素
const form = document.getElementById('paymentForm');
const totalInput = document.getElementById('totalA');
const cardInput = document.getElementById('cardB');
const cashInput = document.getElementById('cashC');
const errorBox = document.getElementById('errorMsg');

// 绑定表单提交事件
form.addEventListener('submit', function(e) {
  // 每次提交先重置错误提示状态
  errorBox.style.display = 'none';

  // 把输入值转成浮点数，空值默认按0计算
  const total = parseFloat(totalInput.value) || 0;
  const cardPay = parseFloat(cardInput.value) || 0;
  const cashPay = parseFloat(cashInput.value) || 0;

  // 计算总收款额，保留2位小数解决浮点数精度问题
  const receiveTotal = Number((cardPay + cashPay).toFixed(2));

  // 校验规则判断
  if (receiveTotal > total) {
    // 阻止表单默认提交行为
    e.preventDefault();
    // 展示错误提示
    errorBox.textContent = 'Receiving value is more than Total Value';
    errorBox.style.display = 'block';
    return;
  }
  // 走到此处说明校验通过，表单会正常提交到后端
});

新手注意事项 #

• 输入框加type="number"、step="0.01"、min="0"属性，可以直接在输入层面限制用户只能输入非负的两位小数，减少后续校验工作量。
• 不要直接用输入框的原始value做计算，字符串类型的"10"+"20"会得到"1020"，必须先用parseFloat()转成数字类型再做运算。
• 如果需要用户输入时就实时提示错误，不用等点提交才出提示，可以给三个输入框都绑定input事件，触发和提交时一样的校验逻辑即可。

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