label 不参与验证且不显示错误提示，其唯一职责是关联控件、提升可访问性；错误提示必须作为 input 的同级后续兄弟节点独立存在，并确保 label 与 input 的 for/id 正确绑定。
label 本身不参与验证，也不显示错误提示
很多人误以为给 label 加 class 或插入文字就能承载错误信息，其实 label 的唯一职责是关联控件、提升可访问性。它不响应 :invalid 伪类，也不会因 setCustomValidity() 改变状态，更不会自动显示浏览器或 JS 生成的错误文案。
常见错误现象：
- 把错误文字写进
<label>邮箱</label>里，导致语义混乱、读屏器重复播报 - 用 CSS 给
label.error上色，但用户点击后依然聚焦不到 input（因为没解决根本绑定问题） - 在 label 内动态插入
<span class="error">格式错误</span>，结果 DOM 结构断裂，for/id关联失效
错误提示必须独立于 label，且紧邻 input
正确位置只有一个：作为 <input> 的**同级后续兄弟节点**。这样既保证视觉动线连贯，又能让 aria-live="polite" 或 role="alert" 精准通知辅助技术。
实操建议：
- 结构示例：
<input id="email" name="email" required><span class="error-message" aria-live="polite"></span> - 不要放在
label内部，也不要塞进父容器末尾（如<div class="form-group">...</div>底部） - JS 更新时，只操作这个固定
span的textContent和className，避免反复创建/删除节点 - 若用
display: none隐藏错误提示，请改用visibility: hidden或clip-path，否则读屏器可能跳过
label 关联出错，错误提示就“看不见”
当 label 和 input 的绑定失败，键盘用户无法用 Tab 聚焦、屏幕阅读器读不出字段名，此时哪怕错误提示 DOM 正确、文案清晰，对这部分用户也等于不存在。
高频踩坑点：
-
for="user_email"对应id="user-email"（下划线 vs 连字符）→ 字符串不等，绑定断裂 - React/Vue 动态渲染时，
id由随机 key 生成，但for写死字符串 → 每次重绘都失配 - 同时用显式
for和隐式包裹：<label for="x"><input id="x"></label>→ 部分浏览器触发两次 focus -
input[type="hidden"]被加了label→ 辅助技术直接忽略，错误提示完全无效
select 下拉框标红必须绕过 label 做样式控制
select 元素没有原生错误视觉反馈，浏览器不会因 required 失败自动加红边框。而 label 无法继承 :invalid 状态，所以不能靠 label.error 实现标红。
可行路径：
- CSS 直接作用于
select：定义.error { border: 2px solid #e53e3e; } - JS 校验后操作
select.classList.add('error')，而非 label - 若 label 文本需同步变色（如“请选择分类 *”），必须单独写规则：
label[for="category"] .error + select { ... }不成立，得用相邻兄弟选择器或 JS 同步操作 label 元素 - 禁用
pointer-events: none或opacity: 0在 label 上做“隐藏”，这会让整个控件不可交互
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
