HTML必填项设置方法详解

HTML 的 `required` 属性看似简单，实则暗藏诸多兼容性陷阱与行为差异：它仅对特定表单控件（如 text、email、checkbox、select 等）生效，对 hidden、range、自定义封装组件等常被忽略的类型完全无效；不同 `type` 下“空值”判定逻辑迥异——比如 text 不自动 trim 空格、email 接受非法格式、radio 组需谨慎配置 name 与 required 位置；更关键的是，它无法拦截 JavaScript 主动提交，且在旧版 Safari 和 IE 中根本不可用；而最易被忽视的真相是：`required` 仅为用户体验优化，绝不能替代服务端严格的非空校验与数据清洗。想写出真正健壮的表单？必须前后端协同防御，缺一不可。

required 属性只对特定 type 有效

不是所有 类型都支持 required。它仅在可输入/可选值的控件上起作用，比如 text、email、number、date、checkbox、radio、file、select 和 textarea。以下情况会失效：

• ：浏览器直接忽略 required，不参与校验
• 或 ：非表单数据控件，不支持
• 、：空值语义模糊，实际中基本不触发校验，别依赖
• 自定义封装组件（如 Ant Design 的 Input）：若未透传原生属性，required 可能被丢弃

不同 type 下 required 的行为差异很大

required 看似简单，但每种 type 判定“是否为空”的逻辑不同，容易误判：

• ：只检查 value 是否为非空字符串（不 trim 空格，填了空格会被认为“已填写”）
• ：只要 value 不是空字符串就通过，@ 或 test@ 都算“有值”，格式校验要另加 pattern
• ：必须勾选；若同时写了 checked，默认满足，失去必填意义
• ：同一 name 下任意一个加 required，即表示该组至少选一个
• ：必须有一个 的 value 为空（如 请选择），且不能设 selected，否则用户不选也能绕过
  ：必须至少选中一个文件；但 iOS Safari ≤15.4 存在校验不触发的问题

required 不拦截 JS 主动提交

if (form.checkValidity()) {
  form.submit();
} else {
  form.reportValidity(); // 弹出原生提示
}