通过监听 HTML5 表单的 invalid 事件并结合 CSS 伪类 :has()，可实现提交失败时自动高亮必填字段及其标签为红色，无需手动检查值为空——浏览器原生验证机制即可触发样式响应。
通过监听 html5 表单的 `invalid` 事件并结合 css 伪类 `:has()`，可实现提交失败时自动高亮必填字段及其标签为红色，无需手动检查值为空——浏览器原生验证机制即可触发样式响应。
现代浏览器提供了强大的原生表单验证 API，无需依赖 JavaScript 手动判断空值或调用 alert()。核心思路是：让浏览器负责验证逻辑，我们只负责响应验证失败的事件并应用样式。
✅ 正确做法：利用 invalid 事件 + :has() 选择器
首先，确保输入元素带有 required 属性（或其他验证属性，如 minlength、pattern）：
<form id="f1"> <label>出生日期（日）* <input type="text" id="day" name="day" required></label> <label>出生日期（月）* <input type="text" id="month" name="month" required></label> <label>出生日期（年）* <input type="text" id="year" name="year" required></label> <input type="submit" value="提交"> </form>
然后，为所有需验证的输入绑定 invalid 事件——该事件在浏览器判定字段无效（如为空且 required）时自动触发（包括点击提交按钮或调用 checkValidity() 时）：
// 为每个文本输入添加 invalid 监听器，添加 .invalid 类
document.querySelectorAll('input[type="text"][required]').forEach(input => {
input.addEventListener('invalid', function (e) {
e.preventDefault(); // 可选：阻止默认气泡提示（保留则仍显示原生提示）
this.classList.add('invalid');
});
});
// 可选：支持「失焦即校验」——提升用户体验
document.getElementById('f1').addEventListener('focusout', function (e) {
if (e.target.matches('input[type="text"][required]')) {
if (e.target.checkValidity()) {
e.target.classList.remove('invalid');
}
}
});? 样式层：精准控制错误状态外观
使用纯 CSS 即可完成视觉反馈，关键在于 :has() 伪类（现代浏览器已广泛支持，Chrome 105+、Firefox 121+、Safari 15.4+）：
input {
padding: 3px 8px;
border: 1px solid #ddd;
border-radius: 4px;
transition: border-color 0.2s;
}
input.invalid {
border-color: #d32f2f;
}
/* 当 label 内部包含 .invalid 输入时，label 文字变红 */
label:has(input.invalid) {
color: #d32f2f;
font-weight: 600;
}
/* 可选：增强输入框内文字颜色一致性 */
input.invalid::placeholder {
color: #f44336;
}⚠️ 注意事项：
- ❌ 不要使用
form.submit()触发验证：form.submit()是绕过验证的强制提交，不会触发invalid事件；应使用<button type="submit"></button>或监听submit事件后调用event.preventDefault()并手动校验。- ✅ 推荐监听
form的submit事件进行最终拦截与统一处理（例如收集所有错误字段）：document.getElementById('f1').addEventListener('submit', function (e) { if (!this.checkValidity()) { e.preventDefault(); // 阻止提交 // 此时所有 invalid 字段已被标记，样式已生效 } });- ? 若需兼容不支持
:has()的旧浏览器（如 Safari invalid 事件中同时给父label添加类，再用.label-invalid控制样式。
✅ 总结
- ✅ 使用
required等原生属性声明验证规则； - ✅ 用
invalid事件自动捕获验证失败，添加.invalid类； - ✅ 用
label:has(input.invalid)实现标签联动变色，语义清晰、代码简洁； - ✅ 配合
focusout+checkValidity()实现即时反馈，提升交互体验； - ✅ 避免手动取
.value判断空值——既冗余又易漏掉其他验证场景（如邮箱格式、数字范围等）。
这套方案轻量、标准、可维护，是构建专业级表单错误样式的推荐实践。
