使用querySelector查找第一个出错表单输入项，应优先用form.querySelector(':user-invalid')，其次回退到自定义错误选择器，确保作用域限定在当前表单内并按优先级排序。
要使用 querySelector 查找第一个出错的表单输入项，关键是定义“出错”的判断标准，并利用 CSS 选择器的顺序匹配特性（它天然返回文档中**第一个匹配的元素**）。
明确“出错”的常见判定方式
浏览器原生表单验证中，可借助以下属性判断输入是否出错：
-
:invalid伪类：匹配未通过约束验证（如required为空、type="email"格式错误等）的<input>、<select>、<textarea> -
:user-invalid（更精准）：仅在用户交互后（如失去焦点或提交时）才生效，避免页面加载即报错 - 自定义错误状态：如元素有
data-error属性、或父容器含.error类、或存在相邻的.error-message元素
直接查找第一个原生验证失败的输入项
最简方式（适用于启用 HTML5 验证的表单）：
const firstInvalid = document.querySelector('form :invalid');
if (firstInvalid) {
firstInvalid.focus();
console.log('第一个验证失败项：', firstInvalid);
}
⚠️ 注意：:invalid 在页面加载时可能匹配未操作过的必填项。如需更合理的行为，改用：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
立即学习“Java免费学习笔记（深入）”；
const firstUserInvalid = document.querySelector('form :user-invalid');
查找带自定义错误标识的输入项
若你手动添加了错误提示（比如 JS 校验后加 class="error"）：
- 查本身带错误类的输入：
document.querySelector('input.error, select.error, textarea.error') - 查父级标记错误的输入：
document.querySelector('.form-group.error input, .form-group.error textarea') - 查紧邻错误消息的前一个输入：
document.querySelector('.error-message + input, .error-message + textarea')
结合表单提交做统一校验定位
在表单提交时触发，确保只检查已触发表单验证的状态：
document.querySelector('form').addEventListener('submit', function(e) {
e.preventDefault();
// 触发所有字段的验证（使 :invalid / :user-invalid 生效）
this.reportValidity();
const firstErr = this.querySelector(':user-invalid') ||
this.querySelector('.error input, .error textarea') ||
this.querySelector('[data-error]');
if (firstErr) {
firstErr.focus();
firstErr.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
});
不复杂但容易忽略：选择器顺序很重要——把更具体的规则（如 :user-invalid）放在前面，能更快命中目标；同时确保作用域限定在当前表单内（用 form.querySelector 而非 document.querySelector），避免跨表单误匹配。
