form.checkValidity()是最直接可靠的表单整体校验方法，返回布尔值；需监听input/change事件、提交前再校验、初始同步状态、动态字段后手动更新、用disabled属性禁用按钮、多条件拆解为具名变量确保可读性与准确性。
用 form.checkValidity() 判断整体表单是否合法
原生 HTML 表单的 checkValidity() 方法会遍历所有带 required、pattern、min/max 等约束的字段，返回布尔值。这是最直接、最可靠的方式，不需要手动逐个检查每个输入。
注意：该方法在表单为空时也返回 false（因为 required 字段未填），这正是我们想要的行为——按钮初始禁用，用户填完才启用。
- 必须监听
input和change事件，仅监听input无法捕获select或radio的切换 - 提交前再调一次
checkValidity()，防止用户绕过输入直接点按钮（比如回车触发） - 不要用
form.reportValidity()替代——它会弹出浏览器默认提示框，干扰体验
监听 input 事件时别漏掉初始状态同步
页面加载后，按钮状态必须和当前表单校验结果一致。如果 JS 执行晚于 DOM 渲染，或用户快速输入，很容易出现“按钮已启用但某字段仍为空”的错位。
解决办法很简单：绑定事件后立刻调用一次更新函数。
立即学习“前端免费学习笔记（深入）”；
- 写法示例：
updateButtonState();放在所有addEventListener之后 - 如果表单字段是动态插入的（如 JS 加载的下拉选项），需在插入完成后手动触发一次
updateButtonState() - 避免在多个地方重复调用，封装成单一函数并在所有可能影响状态的地方统一调用
禁用按钮必须用 btn.disabled = true，不是样式伪装
仅设置 btn.style.opacity = "0.4" 或 btn.style.pointerEvents = "none" 是无效的。键盘用户仍能 Tab 进去，回车照样触发，屏幕阅读器照读，且表单提交时若按钮有 name 属性，它的值仍会被发出去。
btn.disabled 是唯一合法、无障碍、语义正确的禁用方式。
- 初始禁用建议写在 HTML 里：
<button type="submit" disabled>提交</button> - JS 启用时写
btn.disabled = false，不是btn.removeAttribute('disabled') - 务必补全
button:disabled的 CSS 样式，否则自定义样式下视觉无变化
多条件组合时别依赖隐式布尔转换
当按钮启用逻辑不止于表单校验（比如还要判断余额 ≥ 100、表格至少有一行数据），直接拼接表达式容易出错。
例如：btn.disabled = !form.checkValidity() || balance < 100 || rows.length === 0 看似简洁，但可读性差、调试困难、后续加条件易漏括号。
- 推荐拆解为具名变量：
const isValidForm = form.checkValidity(); const hasBalance = (+balanceEl.textContent || 0) >= 100; const hasRows = table.querySelectorAll("tbody tr").length > 0; - 最终赋值写成：
btn.disabled = !(isValidForm && hasBalance && hasRows) - 特别注意：
table.rows.length包含<thead>行，要用querySelectorAll("tbody tr")或过滤row.sectionRowIndex !== -1
disabled 不会自动重算，而多个条件之间又容易互相覆盖。这些都不是“写个监听就能跑”的事，得一个个对齐。 
