required仅对text、email、number、tel、url、password、date、textarea、checkbox、radio、select、file和textarea生效；hidden、button、image、range、color等类型无效，且必须在form内通过type="submit"触发校验。
加 required 属性不一定拦得住提交，关键看类型、包裹结构和触发方式——它只在特定条件下生效，不是“写了就管用”。
哪些 input 类型真正支持 required？
浏览器只对具备「可编辑性」和「明确空值语义」的类型做校验：
-
text、email、number、tel、url、password、date、textarea都行 -
checkbox加required表示“必须勾选”，radio组里任一元素加即可（同name下至少选一个） -
select必须含<option value=""></option>，且不能设selected，否则默认选中即绕过校验 -
hidden、button、image、range、color、submit等类型加了也无效
为什么点了提交没提示？常见失效场景
不是属性写错，而是校验根本没启动：
- 表单没包在
<form></form>里 ——required必须依附于语义化表单 - 用了
<button type="button"></button>或没写type（默认是button），不是submit - 在
submit事件里写了e.preventDefault()却没调form.checkValidity() - 用 JS 直接调
form.submit()—— 这个调用完全跳过原生校验 -
input被设为disabled，哪怕有required也直接忽略 - 旧版 iOS Safari（≤15.4）对
type="file"和type="select"的required支持不稳定
怎么让 required 提示更可控？
浏览器默认提示文案不可改、样式不可控，但能有限干预：
- 用
setCustomValidity()替换提示：输入为空时调el.setCustomValidity('此项不能为空')，非空时必须立刻调el.setCustomValidity('')清空，否则后续校验失效 -
:invalid伪类一加载就生效，容易误标；推荐组合input:invalid:not(:placeholder-shown)延迟反馈 - 失焦即校验需手动触发：
input.addEventListener('blur', () => el.reportValidity())，它会弹气泡并返回布尔值 -
aria-required="true"只供读屏器识别，不触发校验，建议和required共存
最常被忽略的是：空格字符串 " " 被判为“已填”，required 不处理 trim；服务端永远要二次校验——前端拦不住禁用 JS 或直接发请求的用户。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
