required属性失效的根本原因是校验链断裂：必须同时满足form包裹、原生submit事件触发、select含disabled selected空选项等条件，缺一不可；否则浏览器不启动校验。
required属性为什么加了却没拦住提交
根本原因不是属性写错了，而是校验链断在了某个环节。浏览器只在特定条件下才启动 required 校验，缺一不可：
-
form标签必须完整包裹所有带required的控件；单独写input不会触发任何校验 - 提交动作必须是原生
submit事件：按钮得是<button type="submit"></button>或<input type="submit">；type="button"或onclick="submitForm()"都绕过校验 -
select必须有初始空选项且设disabled selected，例如<option value="" disabled selected>请选择</option>；否则浏览器认为“已有值”，跳过必填检查 - 移动端某些 WebView（如旧版微信）会直接忽略
required，checkValidity()也返回true，必须额外用 JS 做空值检测降级
label绑定必填字段后点击无反应？查ID匹配
label 点击不聚焦，90% 是 for 和 id 没对上。这不是样式问题，是 DOM 关联失败：
-
id值含空格或特殊字符（如id="user name"）会导致浏览器截断或解析失败，改用id="user_name" - 多个元素用了相同
id—— HTML 不合法，浏览器只认第一个，后续所有for绑定都失效 -
input缺少id（仅靠name不行），for就找不到目标 - JS 动态生成表单时，
label渲染早于input插入 DOM，需确保顺序，或用document.getElementById("xxx")在控制台手动验证是否存在
:required 和 :invalid 伪类样式怎么避免一打开就红
直接写 input:invalid { border: 1px solid red; } 会导致页面加载完所有必填框立刻变红——用户还没动过，就误判为错误。关键在于区分“初始状态”和“用户交互后状态”：
- 用
input:required:invalid:not(:placeholder-shown)替代单纯:invalid；前提是每个必填input都有placeholder属性 - 不要依赖
:placeholder-shown判断select，它对select无效；改用 JS 监听change后再加错误 class -
:required伪类本身只做“视觉标识”，不参与校验逻辑，可安全用于加星号：label:has(input:required)::after { content: " *"; color: #d32f2f; }（注意兼容性，Edge 115+ 支持:has） - 若需全兼容，老老实实把星号写进 label 文本：
<label>邮箱地址 *</label>，别用 CSS 伪元素生成
自定义提示文案必须绕过原生弹窗吗
不是必须，但原生弹窗无法定制样式、位置、文案或监听触发时机。如果业务要求统一提示风格或多语言，就得接管校验流程：
- 调用
input.setCustomValidity("此项为必填项")设置文案，再调form.reportValidity()，此时弹出的就是你写的字符串 - 清空错误必须显式调
input.setCustomValidity("")；只改 value 或 focus/blur 不会自动恢复 validity 状态 - 别在
input事件里反复调setCustomValidity()，容易让浏览器内部 validity 缓存混乱；建议只在blur或submit时校验 - 真实项目中最容易被忽略的是：表单重置（
form.reset()）后，setCustomValidity设的错误文案不会自动清除，必须手动重置
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
