reportValidity() 不会逐个点亮输入框，而是触发整体校验并显示默认错误提示；需手动遍历表单元素，用 checkValidity() 检测并添加 error-highlight 类实现逐个高亮，配合 focus() 和 aria-invalid 提升可访问性。
HTML5 表单原生校验中，reportValidity() 本身不会“逐个点亮”输入框——它只是触发一次整体校验，并让所有不通过的字段显示浏览器默认的错误提示（如红色边框、气泡提示）。但你可以结合 checkValidity() 和手动样式控制，实现“逐个高亮错误项”的效果。
原理：先检测，再聚焦并样式干预
浏览器默认只在提交或调用 reportValidity() 时批量显示错误。要“逐个点亮”，需主动遍历表单控件，对每个 validity.valid === false 的元素：
- 添加自定义 CSS 类（如
error-highlight）突出边框/背景 - 可选：调用
focus()让其获得焦点（便于用户快速定位） - 避免重复触发默认气泡干扰体验（可暂时禁用
reportValidity()，改用setCustomValidity()配合）
关键步骤：手动遍历 + 样式标记
示例代码（无第三方库）：
function highlightInvalidFields(form) {
const inputs = form.querySelectorAll('input, select, textarea');
inputs.forEach(input => {
// 清除之前可能的错误样式
input.classList.remove('error-highlight');
<pre class="brush:php;toolbar:false;">// 检查是否校验失败（注意：需先调用 checkValidity 才能确保 validity 状态更新）
if (!input.checkValidity()) {
input.classList.add('error-highlight');
// 可选：首次发现错误时自动聚焦（提升可访问性）
if (!form.querySelector('.error-highlight')) {
input.focus();
}
}}); }
// 使用示例 const myForm = document.getElementById('myForm'); myForm.addEventListener('submit', e => { e.preventDefault(); if (!myForm.checkValidity()) { highlightInvalidFields(myForm); } else { myForm.submit(); // 或走 AJAX 提交 } });
配套 CSS：让“点亮”真正可见
加一段简单样式即可让错误项明显：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
.error-highlight {
border-color: #e74c3c !important;
box-shadow: 0 0 6px rgba(231, 76, 60, 0.3);
outline: none;
}
/* 可选：增强可访问性 */
.error-highlight:focus {
box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.5);
}
进阶建议：兼容自定义验证与无障碍
若用了 setCustomValidity('xxx')，确保在每次输入后清空或重设；同时为错误项添加 aria-invalid="true" 和关联的 aria-describedby，方便屏幕阅读器识别：
- 动态设置：
input.setAttribute('aria-invalid', 'true'); - 指向错误消息容器：
input.setAttribute('aria-describedby', 'error-msg-' + input.name); - 避免仅靠颜色传达错误（补充图标或文字提示）
不复杂但容易忽略：浏览器原生校验状态是懒更新的，务必在检查前调用 input.checkValidity() 或 form.checkValidity()，否则 validity 属性可能未同步。
