生产环境表单验证需手动控制 setCustomValidity() + reportValidity() + DOM 插入：前者设错误状态，后者触发UI反馈，再配合 invalid 事件拦截并插入下方 error 提示，同步管理 aria-invalid 和 aria-describedby 属性，避免原生气泡不可靠、不可定制、不无障碍问题。
浏览器原生验证提示（如红色气泡）不可靠、不可定制、不兼容无障碍，真正在生产环境用得上的，是手动控制 setCustomValidity() + reportValidity() + DOM 插入三者配合。只靠 required 或 type="email" 属性触发的默认提示，上线后必然被产品和测试打回来。
为什么 setCustomValidity() 设了却没反应
它只是存状态，不触发 UI。就像往冰箱里放菜但没开灯——东西在，你看不见。
-
setCustomValidity("邮箱格式错误")只改validity.customError，不弹框、不加红边、不更新:invalid样式 - 必须紧接着调
reportValidity()才会真正校验并显示气泡（含你写的文案） -
checkValidity()只返回true/false，完全不触发界面反馈 - 如果之前设过非空字符串，之后又没调
setCustomValidity("")，字段就永远卡在“自定义错误”状态，哪怕输入合法
怎么让错误提示出现在 input 下方而不是弹气泡
用 invalid 事件拦截原生行为，把文案塞进紧邻的 <span class="error"></span>，比模拟气泡更稳、更可访问。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 监听
invalid事件时必须立刻e.preventDefault()，否则气泡和你的 DOM 提示会同时出现 - 错误容器必须是
input的下一个兄弟节点（nextElementSibling），不能塞进<label>或父级末尾 - 写入文案后，记得同步设
input.setAttribute("aria-invalid", "true")和input.setAttribute("aria-describedby", "error-xxx") - 用户输对后，要主动清空：先
input.setCustomValidity("")，再清空.error文本，再设aria-invalid="false"
表单提交时批量显示所有字段错误
别等一个个 invalid 事件触发，submit 里统一扫一遍，避免气泡打架、焦点乱跳。
立即学习“前端免费学习笔记（深入）”；
- 第一行必须
e.preventDefault()，否则页面刷新，JS 逻辑全失效 - 用
form.checkValidity()先判断整体是否通过，不通过才继续 - 遍历
form.elements，对每个!el.checkValidity()的元素，取el.validationMessage（就是你setCustomValidity()设的文案） - 每个字段的错误容器 ID 要和
input[name]对齐（比如name="email"→ 错误容器id="error-email"），后端返回字段名也得一致 - 每次提交前，先清空所有旧提示：
form.querySelectorAll(".error").forEach(el => el.textContent = "")
最易被忽略的是：错误容器必须用 visibility: hidden 而不是 display: none 控制显隐——后者会导致布局抖动，用户正看输入框，它突然上移一像素，体验直接掉档。
