需手动遍历表单控件：用form.queryselectorall('input, select, textarea')获取候选元素，过滤disabled、hidden及!input.willvalidate项，再找首个!input.validity.valid的元素。
怎么拿到第一个校验失败的 input 元素
不能靠 form.checkValidity() 直接返回错误字段，它只返回布尔值。得手动遍历所有可能参与校验的控件，并用 input.validity 判断状态。
关键逻辑是：先选中所有可交互字段，再过滤掉不参与校验的（disabled、type="hidden"、没设校验规则的），最后找第一个 !input.validity.valid && input.willValidate 的元素。
-
form.querySelectorAll('input, select, textarea')拿全部候选元素 - 跳过
input.disabled或input.type === 'hidden'的节点 - 必须检查
input.willValidate，否则input.validity可能是空对象或无意义（比如没写required也没设type="email"） - 优先判断
input.validity.valueMissing和input.validity.typeMismatch，比patternMismatch更通用也更常见
focus() 后为什么光标没亮、键盘没弹出来
尤其在 iOS Safari 和部分安卓 WebView 中，单纯调用 input.focus() 很可能静默失败——不是代码错了，是浏览器策略拦截了非用户手势触发的键盘弹出。
移动端真正有效的做法，是在用户点击/触摸事件的同步回调里聚焦，或者加一层“用户上下文兜底”：
- 给按钮或表单绑定
click或touchstart，在 handler 里立刻调input.focus() - 如果必须异步（比如 AJAX 校验后），先临时设
input.setAttribute('readonly', 'readonly')，再focus()，再立即移除readonly（iOS 15+ 有效） - 避免在
setTimeout、fetch.then或scroll回调里直接focus()，大概率被忽略 - 聚焦后顺手加
input.select()（用setTimeout(() => input.select(), 0)防竞争），能提高光标可见性
滚动不到可视区？别只 focus() 不 scrollIntoView()
很多页面错把“聚焦成功”等同于“用户看见了”，结果 input 在折叠区域、fixed 导航栏下面、或长表单底部，用户根本不知道哪错了。
input.focus() 和 input.scrollIntoView({ block: 'center' }) 必须成对出现，且顺序不能反：
- 先
focus()，再scrollIntoView()；反过来可能因失焦导致滚动失效 - 用
{ block: 'center' }而不是默认值，确保元素居中而非贴顶，避免被 header 遮挡 - 如果 input 父容器有
overflow: hidden或transform，scrollIntoView()可能不生效，得手动计算并window.scrollTo() - 某些老安卓 WebView 对
scrollIntoView支持差，可降级为input.scrollIntoViewIfNeeded?.()
IE 和旧安卓 WebView 怎么兼容 validity API
input.validity 在 IE 中完全不存在，Android 4.4 等老 WebView 可能返回空对象。硬访问会报 Cannot read property 'valid' of undefined 错误。
必须做存在性检查，不能假设 API 一定可用：
- 先判断
typeof input.checkValidity === 'function'，否则走降级逻辑（比如正则 +input.value.trim() === ''） - 再检查
input.validity && input.validity.valid !== undefined，才读取.valid或.valueMissing - 对
type="email"这类校验，降级时别只用简单正则，至少匹配@和.，否则体验落差太大 - 如果项目已用第三方校验库（如 Yup + react-hook-form），优先复用它的错误字段定位能力，而不是自己重写 validity 遍历逻辑
form.reset() 不仅清空值，还会让当前焦点消失。得监听 reset 事件，在回调里重新聚焦——而且要用 setTimeout(() => input.focus(), 0)，否则 DOM 更新还没完成。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
