required属性仅对text、email、number、date、checkbox、radio、file、select和textarea等可输入/可选值控件有效，对hidden、button、image、range、color及自定义封装组件可能失效；其空值判定逻辑因type而异，且不拦截js主动提交，不能替代后端验证。
required 属性只对特定 type 有效
不是所有 <input> 类型都支持 required。它仅在可输入/可选值的控件上起作用，比如 text、email、number、date、checkbox、radio、file、select 和 textarea。以下情况会失效：
-
<input type="hidden">：浏览器直接忽略required，不参与校验 -
<input type="button">或<input type="image">：非表单数据控件，不支持 -
<input type="range">、<input type="color">：空值语义模糊，实际中基本不触发校验，别依赖 - 自定义封装组件（如 Ant Design 的
Input）：若未透传原生属性，required可能被丢弃
不同 type 下 required 的行为差异很大
required 看似简单，但每种 type 判定“是否为空”的逻辑不同，容易误判：
-
<input type="text" required>：只检查value是否为非空字符串（不 trim 空格，填了空格会被认为“已填写”） -
<input type="email" required>：只要value不是空字符串就通过，@或test@都算“有值”，格式校验要另加pattern -
<input type="checkbox" required>：必须勾选；若同时写了checked，默认满足，失去必填意义 -
<input type="radio" name="gender" required>：同一name下任意一个加required，即表示该组至少选一个 -
<select required></select>：必须有一个<option></option>的value为空（如<option value="">请选择</option>），且不能设selected，否则用户不选也能绕过 -
<input type="file" required>：必须至少选中一个文件；但 iOS Safari ≤15.4 存在校验不触发的问题
required 不拦截 JS 主动提交
浏览器原生校验只响应两种动作：type="submit" 按钮点击，或在可编辑字段中按回车。以下操作会完全绕过 required：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 用
<button type="button"></button>触发form.submit() - 用 JavaScript 直接调用
form.submit()（不经过 submit 事件） - 表单监听了
submit事件并执行了event.preventDefault()，但没手动调用form.checkValidity()或form.reportValidity()
如果要用 JS 控制提交流程，必须显式校验：
if (form.checkValidity()) {
form.submit();
} else {
form.reportValidity(); // 弹出原生提示
}
前端校验不能替代后端验证
required 是纯前端体验优化，删掉 HTML 属性、禁用 JS、用 curl 提交，服务端照样收得到空值。真实项目中必须做到：
- 服务端对每个标为“必填”的字段做非空判断（注意：数据库字段也应设为
NOT NULL） - 不要信任
value长度或是否含空格——用户可能粘贴全角空格、零宽字符等 - 前后端空值定义需一致：例如
""、" "、null、undefined都应归为非法
最常被忽略的一点：required 在旧版 Safari 和 IE9 及更早版本中完全不支持，如果目标用户覆盖这些环境，必须搭配 JS 补充校验逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
