JavaScript表单验证与数学函数：库存管理中的常见陷阱与优化实践

function findTotal() {
  var stock = document.getElementsByName('stock'); // 问题点1：获取方式不当
  var arr = document.querySelectorAll('[name="vala"], [name="valb"], [name="valc"]');
  var tot = 0;

  for (var i = 0; i < arr.length; i++) {
    if (parseInt(arr[i].value))
      tot += parseInt(arr[i].value);
  }
  document.getElementById('total').value = tot;

  if ((tot % 50) == 0) {
    document.getElementById('new').value = "correct";
  } else {
    document.getElementById('new').value = "incorrect";
  }
  return tot; // 问题点2：过早的return语句
  var bal = number(stock - tot); // 问题点3：非标准函数调用
  document.getElementById('balance').value = bal;
  return bal;
}

var stock = document.getElementById('stock').value; // 直接通过ID获取元素值

// ... (之前的总和计算和验证逻辑)

// 确保在返回任何值之前，余额计算和更新UI的代码被执行
var bal = stock - tot; // stock和tot都应为数字类型
document.getElementById('balance').value = bal;

return bal; // 可以选择返回余额或总和，根据业务逻辑决定
// 如果函数主要目的是计算总和，可以继续返回tot
// 但为了ValidateTotal能获取到最终的tot进行验证，我们暂时保留tot的逻辑

function findTotal() {
  // 1. 获取总库存值，并转换为数字
  // 使用getElementById更精确，并确保转换为数字
  var stockElement = document.getElementById('stock');
  var stock = stockElement ? parseInt(stockElement.value) : 0; // 检查元素是否存在并转换

  // 2. 获取需要累加的项目，并计算总和
  var arr = document.querySelectorAll('[name="vala"], [name="valb"], [name="valc"]');
  var tot = 0;
  for (var i = 0; i < arr.length; i++) {
    // 确保输入值有效且转换为数字
    if (arr[i].value && !isNaN(parseInt(arr[i].value))) {
      tot += parseInt(arr[i].value);
    }
  }
  document.getElementById('total').value = tot;

  // 3. 验证总和是否为50的倍数
  if ((tot % 50) == 0) {
    document.getElementById('new').value = "correct";
  } else {
    document.getElementById('new').value = "incorrect";
  }

  // 4. 计算余额并更新UI
  // 确保stock和tot都是数字，直接进行减法运算
  var bal = stock - tot;
  document.getElementById('balance').value = bal;

  // 5. 返回总和，供ValidateTotal函数使用
  // 注意：此处如果返回bal，ValidateTotal的逻辑可能需要调整
  // 为了不改变ValidateTotal的现有逻辑，我们仍然返回tot
  return tot;
}

function ValidateTotal() {
  var y = findTotal(); // findTotal现在会正确计算并显示余额，并返回tot
  if ((y % 50) == 0) {
    return true;
  } else {
    alert("Total Must be in multiples of 50");
    return false;
  }
}

<form class="contact100-form validate-form" onsubmit="return ValidateTotal(this)" method="post" action="portal.php" class="simple-form">
  <!-- 其他表单元素 -->

  <div class="wrap-input100 validate-input" data-validate="Value 1">
    <input class="input100" onblur="findTotal()" type="number" step="1" name="vala" id="vala" placeholder="Value A">
  </div>
  <div class="wrap-input100 validate-input" data-validate="Value 2">
    <input class="input100" onblur="findTotal()" type="number" step="1" name="valb" id="valb" placeholder="Value B">
  </div>
  <div class="wrap-input100 validate-input" data-validate="Value 3">
    <input class="input100" onblur="findTotal()" type="number" step="1" name="valc" id="valc" placeholder="Value C">
  </div>

  <div class="wrap-input100 validate-input" data-validate="Total">
    <input class="input100" type="number" step="1" name="total_display" id="total" placeholder="Total ABC" readonly>
  </div>
  <div class="wrap-input100 validate-input" data-validate="stock">
    <input class="input100" onblur="findTotal()" type="number" step="1" name="stock" id="stock" placeholder="Total Stock">
  </div>
  <div class="wrap-input100 validate-input" data-validate="balance">
    <input class="input100" onblur="findTotal()" type="number" step="1" name="balance_display" id="balance" placeholder="balance" readonly>
  </div>

  <!-- 注意：这里有两个id为'total'的元素，这是HTML规范不允许的，可能会导致问题。
       建议将其中一个的id更改，例如：
       <input type="text" name="total_readonly" id="total_summary" size="2" readonly="readonly">
       <input type="text" name="new" id="new" size="5" readonly="readonly">
       为了本教程的示例，我们假设id="total"是上面那个input，而下面的可以改名为id="total_summary"
       或者直接移除冗余的显示元素，只保留一个。
  -->
  <span style="color:red;">Total : 
    <input type="text" name="total_summary" id="total_summary" size="2" readonly="readonly">
    Validations : 
    <input type="text" name="new" id="new" size="5" readonly="readonly">
  </span>

  <div class="container-contact100-form-btn">
    <button class="contact100-form-btn">Submit</button>
  </div>
</form>