正确做法是同时监听input、change和animationend事件以覆盖自动填充场景，批量获取必填字段并用checkvalidity()与trim()统一校验，disabled按钮不跳过html5校验，服务端必须兜底。
input 事件监听是起点，但不能只靠它
按钮禁用逻辑必须响应所有可能的值变更，而 input 事件虽然覆盖键盘输入、粘贴、拖放等场景，但它对浏览器 autofill（自动填充）不敏感——Chrome 和 Edge 在 autofill 后往往只触发 change，Safari 更可能延迟数毫秒。只监听 input 会导致用户点了“自动填充”后按钮仍处于禁用状态。
正确做法是同时绑定多个事件：
-
input：捕获实时输入变化 -
change：兜底 autofill 和失焦类变更 -
animationend（可选）：监听 autofill 触发的隐藏动画，尤其在 type="email" 或 type="tel" 字段上更可靠
示例中常见错误是写成 oText.oninput = function() {...}，这会覆盖其他监听器；应统一用 addEventListener。
多个必填字段时，别手写 && 判断
当表单有多个 required 字段（比如用户名、邮箱、密码），逐个判断 field1.value && field2.value && field3.value 不仅难维护，还容易漏掉 trim() 导致空格被误判为有效输入。
推荐用 DOM API 批量提取并校验：
- 用
Array.from(form.querySelectorAll('[required]'))获取全部必填控件 - 用
.every(el => el.checkValidity() && el.value.trim())统一判断 - 对
type="email"等字段，优先调用el.checkValidity()，它比正则更准，且兼容浏览器内置规则
注意：checkValidity() 返回 false 时，字段可能已高亮红边框——这是副作用，不是 bug，而是浏览器原生反馈。
disabled 按钮 ≠ 跳过 HTML5 校验
很多人以为把提交按钮设为 disabled 就能绕过 required 校验，实际完全不是这样。浏览器的校验发生在表单级，和按钮是否可用无关：用户点不了，但 JS 调用 form.submit() 仍会触发校验；按钮即使 disabled，只要它是 type="submit"，点击行为本身（哪怕被阻止）也已进入校验流程。
真正跳过校验只有两种合法方式：
- 给
<form></form>加novalidate属性：全局禁用，适合全 JS 校验场景 - 给某个提交按钮加
formnovalidate属性：仅该按钮跳过，适合“暂存”“草稿”等非最终提交操作
二者都不影响 checkValidity() 调用，只是让浏览器不弹窗、不阻断提交流。
服务端永远要兜底，前端禁用只是体验优化
前端禁用按钮本质是 UX 改进，不是安全机制。用户可以轻易删掉 disabled 属性、绕过 JS、甚至直接 POST 请求发空数据。所以后端必须做完整校验，且返回明确错误码（如 400 + 字段名），而不是依赖前端“不会发错”。
容易被忽略的一点是：禁用逻辑如果只检查 value.length === 0，会漏掉纯空格或换行符。务必用 value.trim().length === 0，否则用户粘贴一堆空格也能绕过。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
