重量数据表单验证需求：实现Net Weight=Loaded Weight-Empty Weight校验拦截提交

要实现净重 = 载重 - 空重的验证规则，阻止不符合公式的表单提交，可以通过JavaScript监听表单提交事件，添加自定义验证逻辑。以下是修改后的完整代码：

<form id="weight-form">
  <fieldset class="form-group">
    <legend class="h5 text-center text-danger">空重</legend>
    <div class="form-group">
      <label for="empty_weight">空重</label>
      <input type="number" class="form-control form-control-lg" id="empty_weight"
             name="empty_weight" min="15000" max="35000" step="20" oncopy="return false"
             onpaste="return false">
    </div>
  </fieldset>
  <fieldset>
    <legend class="h5 text-center text-danger">载重</legend>
    <div class="form-group">
      <label for="loaded_weight">载重</label>
      <input type="number" class="form-control form-control-lg" id="loaded_weight"
             name="loaded_weight" min="35000" max="120000" maxlength="6" step="20"
             oncopy="return false" onpaste="return false">
    </div>
  </fieldset>
  <fieldset>
    <legend class="h5 text-center text-danger">净重</legend>
    <div class="form-group">
      <label for="net_weight">净重</label>
      <input type="number" class="form-control form-control-lg font-weight-bolder" id="net_weight"
             name="net_weight" maxlength="5" step="20" oncopy="return false"
             onpaste="return false">
    </div>
  </fieldset>
  <div class="modal-footer">
    <button type="submit" class="btn btn-success ui-button">确认</button>
    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
  </div>
</form>

<script>
document.getElementById('weight-form').addEventListener('submit', function(e) {
  // 获取三个输入框的数值，转为数字类型
  const emptyWeight = parseFloat(document.getElementById('empty_weight').value);
  const loadedWeight = parseFloat(document.getElementById('loaded_weight').value);
  const netWeight = parseFloat(document.getElementById('net_weight').value);

  // 检查是否有未填写的数值
  if (isNaN(emptyWeight) || isNaN(loadedWeight) || isNaN(netWeight)) {
    alert('请填写所有重量数值');
    e.preventDefault(); // 阻止表单提交
    return;
  }

  // 验证净重是否等于载重减空重
  const calculatedNet = loadedWeight - emptyWeight;
  if (netWeight !== calculatedNet) {
    alert(`净重计算错误，正确值应为：${calculatedNet}`);
    e.preventDefault(); // 阻止表单提交
  }
});
</script>

关键说明： #

• 给表单添加了id="weight-form"，方便JavaScript定位并监听提交事件
• 提交时先校验所有输入是否为有效数字，避免空值或非数值导致计算异常
• 计算理论净重值，与用户输入的净重对比，不匹配则弹出提示并阻止表单提交
• 保留了原表单的所有样式和限制规则（如输入范围、step步长、禁止复制粘贴）

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