合并两段JavaScript代码并创建可复用函数解决表单提交未阻止问题

我帮你重构了代码，既解决了表单无法阻止提交的核心问题，又把重复的数值校验逻辑抽成了可复用函数，同时合并了分散的脚本代码。

核心问题说明 #

你的原代码无法阻止表单提交，是因为没有调用e.preventDefault()来终止表单的默认提交行为——这是阻止表单提交的关键步骤。

重构后的完整代码 #

// 可复用的数值校验函数：判断输入框A的数值是否小于输入框B的数值
function isValueLessThan(inputIdA, inputIdB) {
  const valueA = Number(document.getElementById(inputIdA).value);
  const valueB = Number(document.getElementById(inputIdB).value);
  // 额外处理非数值的情况（比如用户输入非数字）
  return !isNaN(valueA) && !isNaN(valueB) && valueA < valueB;
}

// 简化的隐藏元素函数
function hideElement(elementId) {
  const el = document.getElementById(elementId);
  if (el) el.style.display = 'none';
}

// DOM加载完成后绑定事件
$(function() {
  // 绑定表单提交事件
  $('form#vendiendo').submit(function(e) {
    // 重置警告状态（避免上次警告残留）
    hideElement('warnings');
    
    // 校验核心条件：venta < costo
    const isVentaLessThanCosto = isValueLessThan('venta', 'costo');
    // 原代码中未完成的cantidad相关校验，这里用可复用函数统一处理
    const isCantidadExceeded = isValueLessThan('参考值ID', 'cantidad'); // 替换成你的实际参考输入框ID
    
    // 如果任一条件满足，阻止提交并显示警告
    if (isVentaLessThanCosto || isCantidadExceeded) {
      e.preventDefault(); // 关键：阻止表单默认提交行为
      $('#warnings').show();
    }
  });
});

代码亮点说明 #

• 可复用函数：isValueLessThan可以在任何需要比较两个输入框数值的场景重复调用，避免重复写Number转换和判断逻辑
• 健壮性优化：增加了非数值输入的判断（!isNaN），避免因用户输入无效内容导致逻辑出错
• 修复提交阻止：明确调用e.preventDefault()，确保条件满足时表单不会提交
• 代码合并：将分散的hide函数和DOM事件绑定代码整合到同一脚本中，结构更清晰

额外提示 #

如果你的#warnings元素初始状态是隐藏的，记得在CSS里设置display: none;，这样页面加载时不会显示警告框。

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