浏览器原生验证需显式调用 checkValidity() 或 reportValidity() 才触发 UI 变化；setCustomValidity() 仅管理状态，不渲染提示；input 事件中调用 checkValidity() 可实时更新 :invalid 样式并显示红框。
浏览器原生验证提示不能直接用于实时反馈，必须配合 checkValidity() 或 reportValidity() 才能触发 UI 变化；纯靠 setCustomValidity() 不会显示任何东西。
为什么 input 事件里调用 checkValidity() 才能看到红框
HTML5 的 required、type="email" 等约束是“惰性验证”——浏览器不会主动渲染错误样式，除非你显式调用校验方法。
-
checkValidity()返回布尔值，同时强制更新元素的:invalid状态和边框/背景等伪类样式 - 只监听
input事件但不调用它，用户永远看不到红框，也收不到validationMessage - 别在
input里调用reportValidity()：它会弹出打断式气泡，体验极差 - 移动端中文输入法下，
input事件可能触发多次（拼音、候选、上屏），建议加 300ms 防抖
blur 失焦时怎么清掉旧错误并正确设 aria-invalid
失焦校验的关键不是“显示错误”，而是“状态干净、可访问、不残留”。
- 每次
blur开始前，先移除error类、清空提示文字、重置aria-invalid="false" - 校验后只对失败项设
aria-invalid="true"，否则读屏器会误报 - 反馈容器必须预置在 HTML 中（比如紧贴
input后面的<span class="error"></span>），不要用appendChild动态插入，否则布局跳动 - 隐藏反馈区推荐用
visibility: hidden; height: 0; overflow: hidden，不用display: none
setCustomValidity() 为什么总不生效
这个 API 行为非常严格：它只管理校验状态，不控制 UI 渲染时机。
立即学习“前端免费学习笔记（深入）”；
- 设非空字符串（如
input.setCustomValidity("密码太短")）→ 字段进入无效状态，checkValidity()返回false - 必须设空字符串（
input.setCustomValidity("")）才能清除状态，漏掉这步就永远卡在错误态 -
setCustomValidity()+checkValidity()是黄金组合：前者定义文案，后者触发样式和validationMessage - pattern 正则默认无 ^$ 锚点，
pattern="\d+"会放过"abc123def"，得写成pattern="^\d+$"
提交按钮禁用后键盘用户还能按空格？
禁用按钮不只是视觉问题，更是可访问性断点。
-
button.disabled = true会禁用鼠标点击，但 Firefox 和部分屏幕阅读器仍允许键盘聚焦 + 空格触发 - 必须同步设置
button.setAttribute('aria-disabled', 'true')和button.setAttribute('tabindex', '-1') - 校验恢复时，不仅要设
disabled = false，还得把aria-disabled改回"false"，并恢复tabindex - submit 事件中务必
event.preventDefault()，否则页面刷新会丢掉所有 JS 校验状态
最常被忽略的是：错误提示区域必须始终存在、setCustomValidity("") 必须手动调用、aria-invalid 必须随状态翻转。这三个点没做全，所谓“实时反馈”就只是看起来动了一下而已。
