HTML5 中怎么在校验未通过时利用 reportValidity 逐个点亮错误输入框-H5教程-PHP中文网

reportValidity() 不会逐个点亮输入框，而是触发整体校验并显示默认错误提示；需手动遍历表单元素，用 checkValidity() 检测并添加 error-highlight 类实现逐个高亮，配合 focus() 和 aria-invalid 提升可访问性。

html5 中怎么在校验未通过时利用 reportvalidity 逐个点亮错误输入框

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 DHTML 页面生成器

生成可在 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);
}