用 javascript 找表单首个报错 input：遍历所有可交互控件，过滤 disabled/hidden 元素，检查 input.willvalidate && !input.validity.valid，对首个匹配项调用 focus() 和 scrollintoview()。
怎么用 JavaScript 找到表单里第一个报错的 <input>
直接调用 form.checkValidity() 不会告诉你哪个字段错了，得自己遍历。最稳的方式是查所有带 required、type="email" 等原生校验属性的字段，再逐个调用 input.validity.valid 判断。
- 先用
form.querySelectorAll('input, select, textarea')拿到所有可交互控件 - 跳过
disabled或type="hidden"的元素，它们不参与校验 - 对每个元素检查
!input.validity.valid && input.willValidate—— 后者排除掉没设校验规则的字段 - 找到第一个就
input.focus()，并滚动到可视区：input.scrollIntoView({ block: 'center' })
为什么 input.reportValidity() 不能代替手动定位
它只触发浏览器默认错误提示（气泡+红框），但不返回具体哪个字段失败，也没法定制聚焦或滚动行为。在需要统一错误样式、埋点上报、或集成第三方校验库时，这招完全不够用。
- 调用
reportValidity()后，input.validity.valid仍是false，但你没法知道是哪个 input 触发的 - 某些浏览器（如旧版 Safari）对
reportValidity()支持不稳定，可能静默失败 - 如果表单用了自定义校验（比如后端返回的邮箱已被注册），
reportValidity()根本不生效
遇到 ValidityState 一堆布尔值怎么选判断条件
别全看，只盯最关键的三个： valid、valueMissing、typeMismatch。其它像 tooLong 或 patternMismatch 属于补充校验，多数场景下优先处理必填和类型错误。
-
valid === false是总开关，但单独用它会把「用户还没输」和「输错格式」混在一起 -
valueMissing表示该填没填（required字段为空），这是最常要聚焦的错误 -
typeMismatch对应邮箱、URL、数字等类型校验失败，比patternMismatch更通用 - 注意：
input.validity是只读对象，改不了，只能读
兼容性坑：IE 和部分安卓 WebView 不支持 validity API
IE 完全没 validity，老安卓 WebView（比如 Android 4.4）可能返回空对象。必须加降级逻辑，不能无脑访问 input.validity。
立即学习“前端免费学习笔记（深入）”；
- 先判断
typeof input.checkValidity === 'function'，否则走传统input.value.trim() === ''+ 正则 - 对
input.validity做存在性检查：input.validity && input.validity.valid !== undefined - 移动端键盘弹起后自动聚焦可能被系统拦截，
focus()后加setTimeout(() => input.select(), 0)提高成功率
willValidate 判断——很多字段明明写了 required，却因为父容器 display: none 或自身 name 属性缺失，导致 willValidate 为 false，直接被过滤掉。 
