JS表单校验：仅无输入错误时启用提交按钮的逻辑排查

• 开发简易小费计算器应用，计算按钮启用规则：仅当所有输入不存在任何校验错误时才启用
• 输入错误判定规则：输入值非数字、或数值小于0即判定为存在错误
• 实际运行异常：仅单个输入项填写正确无错误时，按钮就会被启用；只有当输入明确为错误值时，按钮才会变回禁用状态
• 原有判断逻辑代码：

if (!peopleError && !billError) {       
  submit.removeAttribute("disabled");
}
if (billError || peopleError) submit.setAttribute("disabled", "")

核心问题是错误状态变量的赋值逻辑和初始值存在漏洞：

1. 现有逻辑仅在输入被判定为错误时，才会将对应错误变量设为true，页面初始加载、输入框未被操作时，billError和peopleError默认是undefined这类falsy值，会被!运算符判定为「无错误」。此时!peopleError && !billError条件直接成立，按钮会被错误启用。
2. 当用户仅填写完一个合法输入、另一个输入框未操作时，未操作输入框对应的错误变量仍为初始falsy值，同样会被判定为无错误，触发按钮启用，和预期规则不符。
3. 原有校验逻辑未覆盖空输入场景：空字符串转数字后结果为0，会被判定为合法值，但空输入本身属于无效输入，不满足计算条件。

1. 初始化错误状态变量时，默认值设为true，代表初始状态下输入未完成、校验不通过，避免初始状态误判。
2. 给所有输入框绑定输入事件，每次输入时全量执行校验，不仅要判断错误场景，输入合法时也要同步将对应错误变量设为false，校验范围需覆盖空值、非数字、数值小于0三类无效场景。
3. 抽离统一的按钮状态更新方法，每次校验完成后调用，避免分散的条件判断出现逻辑遗漏。

参考实现代码：

// 初始化：默认所有输入未通过校验
let billError = true;
let peopleError = true;
const submit = document.querySelector('#submit-btn');
const billInput = document.querySelector('#bill-input');
const peopleInput = document.querySelector('#people-input');

// 账单输入校验
billInput.addEventListener('input', (e) => {
  const inputVal = e.target.value.trim();
  const numVal = Number(inputVal);
  // 三类场景判定为错误：空值、非数字、数值小于0
  billError = inputVal === '' || isNaN(numVal) || numVal < 0;
  updateBtnStatus();
})

// 人数输入校验
peopleInput.addEventListener('input', (e) => {
  const inputVal = e.target.value.trim();
  const numVal = Number(inputVal);
  peopleError = inputVal === '' || isNaN(numVal) || numVal < 0;
  updateBtnStatus();
})

// 统一更新按钮状态
function updateBtnStatus() {
  const canSubmit = !billError && !peopleError;
  if (canSubmit) {
    submit.removeAttribute("disabled");
  } else {
    submit.setAttribute("disabled", "");
  }
}

// 页面加载完成后先执行一次状态更新，避免初始按钮可点击
updateBtnStatus();

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