required属性仅对text、email、number、date、file、select、textarea、checkbox、radio等有空值语义的表单控件生效，不支持hidden、button、range等类型；校验仅在点击submit按钮或回车时触发，若用preventdefault()或js调用form.submit()则绕过校验。

直接加 required 属性就行，但加了不生效？大概率是类型不支持、触发方式不对，或者被框架/JS绕过了。

哪些元素和 type 能用 required？

它只对有明确“空值语义”的控件起作用：

• <input type="text">、<input type="email">、<input type="number">、<input type="date">、<input type="file"> 都可以
• <select></select> 可以，但默认 <option value=""></option> 不能带 selected，否则用户不选也能提交
• <textarea></textarea> 可以
• <input type="checkbox"> 加了表示“必须勾选”；<input type="radio"> 同 name 下任一选项加 required，就表示该组至少选一个
• 这些不行：<input type="hidden">、<input type="range">、<input type="color">、<input type="button">、<input type="image"> —— 写了也无效

为什么点了提交却没拦住？

原生校验只在两种动作下触发：点击 type="submit" 按钮，或在可编辑字段里按回车。常见失效原因：

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

• <form></form> 标签缺失或被 JS 移除 —— required 必须依附于语义化表单
• 用了 <button></button> 但没写 type="submit"（默认是 button，不触发校验）
• 在 submit 事件里调了 event.preventDefault()，但没手动执行 form.checkValidity()
• 用 JS 直接调 form.submit() —— 这个调用完全跳过所有原生校验
• 字段设为 disabled（跳过校验），或用了某些 UI 框架的受控组件但初始 value 不是空字符串（比如初始化为 null 或 undefined）

移动端和老浏览器要注意什么？

iOS Safari ≤15.4 对 <input type="file"> 和 <select></select> 的 required 支持不稳定；IE 完全不支持。别指望它 100% 可靠：

• 关键流程必须用 JS 做降级校验，比如监听 change 或 submit 后手动检查 el.value 或 el.files.length
• 框架里（如 React）要确保受控组件的 value 初始为 ""，否则首次渲染就会触发 :invalid 样式
• 用 setCustomValidity() 自定义提示时，每次输入后必须立刻清空，否则错误状态会一直卡住

真正容易被忽略的点是：空格字符串 " "、"　"（全角空格）、"\t\n" 都算“有值”，required 不拦；服务端收到这些，得自己 trim 后判空 —— 前后端对“空”的定义必须一致，不能只信前端。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！