required 是 HTML5 实现必填校验的原生属性，配合 :invalid 伪类、checkValidity() 和 invalid 事件可完成校验逻辑与自定义反馈。
HTML5 中的 required 属性是实现必填校验最简单、最原生的方式，而 invalid 并不是 HTML 属性，而是浏览器在表单验证失败时**自动添加到元素上的伪类（:invalid）或 DOM 元素的 validity.valid 属性为 false 时对应的状态**。真正起作用的是 required 配合浏览器内置的约束验证 API 和 CSS 伪类，而非一个叫 “invalid” 的属性。
用 required 实现必填标记
只需在 input、select、textarea 等可交互表单控件上添加 required 布尔属性，浏览器就会在提交时自动检查该字段是否为空（或未选中/未输入有效值）：
- 不写值或值为空字符串（如
<input required>未输入）→ 视为无效 - type="checkbox" 或 "radio"：未勾选/未选择 → 视为无效
- select：若首个 option 无 value 或 value="" 且被选中，且设置了 required → 无效（建议首项设
<option value="" disabled selected>请选择</option>）
用 :invalid 伪类做实时视觉反馈
浏览器会在元素违反约束（如 required 未填、email 格式错误等）时，自动为其添加 :invalid CSS 伪类（即使表单还没提交）。你可以用它来样式化出错状态：
- 给必填项加红边：
input:invalid { border: 2px solid #e53e3e; } - 仅对已失去焦点且无效的才高亮（避免初始误提示）：
input:focus:invalid, input:not(:placeholder-shown):invalid（需配合 placeholder） - 注意：:invalid 在用户尚未交互时也生效（如页面加载后空 input 就是 invalid），可用
:user-invalid（较新，[Chrome 107+/Firefox 119+ 支持](https://caniuse.com/css-user-invalid)）更精准控制
用 checkValidity() 和 addEventListener('invalid') 做自定义交互
如果需要拦截默认提示、显示自定义错误消息或阻止提交前的默认行为，可结合 JavaScript：
立即学习“前端免费学习笔记（深入）”；
- 手动触发验证：
input.checkValidity()返回 true/false - 监听 invalid 事件（在浏览器判定为无效但尚未提交时触发）：
input.addEventListener('invalid', e => { e.preventDefault(); showCustomError(input); }) - 提交时统一校验：
form.addEventListener('submit', e => { if (!form.checkValidity()) e.preventDefault(); })
注意事项与常见误区
- required 不校验内容格式（如邮箱、数字范围），只校验“是否提供值”。要格式校验，需配合 type（如 type="email"）、pattern、min/max 等
- disabled 的表单控件会被跳过验证，即使有 required；readonly 的仍参与验证
- 提交按钮点击后，浏览器会先触发所有 invalid 事件，再弹系统提示（除非 e.preventDefault()）；但不同浏览器提示时机和样式不一致
- 不要试图写
invalid="true"—— 这不是标准属性，无效
