HTML5表单可通过reportValidity()触发校验并阻止原生提示，结合invalid事件统一处理错误；用语义化文案匹配validity属性，插入带aria-live的自定义.error-message元素实现可样式化、无障碍的实时校验提示。
HTML5 表单自带的 setCustomValidity() 和 validationMessage 能实现基础自定义校验，但原生提示框（如 Chrome 的 tooltip）体验生硬、不可样式化、位置固定。要让错误提示更友好，核心是：**接管原生验证触发逻辑 + 自主控制提示内容与展示方式**。
用 reportValidity() 触发校验，但阻止默认提示
避免用户提交时弹出难看的浏览器原生气泡。监听表单 submit 事件，调用 event.preventDefault()，再手动调用 form.reportValidity() —— 它会返回布尔值，同时触发各字段的 invalid 事件，但不会显示原生提示。
- 在
invalid事件中，用setCustomValidity('')清空旧错误（防止重复叠加） - 立即收集所有验证失败的字段，统一处理，而不是依赖每个字段单独弹窗
- 这样就把“是否有效”和“怎么提示”完全解耦了
为每个字段添加语义化、上下文相关的提示文案
别只写“请输入邮箱”，而是结合场景说明原因和解决方法。比如：
- 邮箱格式错误 → “请检查邮箱地址，例如 name@domain.com”
- 密码太短 → “密码至少 8 位，建议包含字母和数字”
- 用户名已被占用 → “该用户名已存在，请尝试其他名称”
这些文案存在 JavaScript 对象里，根据 validity 对象的各个属性（valueMissing、typeMismatch、tooShort、customError 等）动态匹配，比硬编码 setCustomValidity() 更灵活可维护。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
用 CSS + 小型 DOM 元素替代原生 tooltip
在每个输入框下方或右侧插入一个 ，初始隐藏。验证失败时：
- 给对应 input 添加
class="invalid"（用于红框等视觉反馈） - 把匹配到的友好文案填入
.error-message并设为display: block - 用 CSS 控制动画（如淡入、高度过渡）、字体大小、颜色、间距，确保可读性
- 支持屏幕阅读器：添加
aria-live="polite"和role="alert"到提示元素
实时校验 + 智能提示时机，减少干扰
不是等用户点提交才校验。对关键字段（如邮箱、手机号），监听 blur（失焦）和 input（输入中，节流后）事件：
-
blur时做完整校验并显示错误（用户明确离开该字段） -
input时只做轻量判断（如邮箱含 @ 符号），并在输入正确后自动清除错误提示 - 避免用户刚敲第一个字母就报错，也避免一直不提示导致最后集中爆发
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
