required 属性仅对原生可提交的表单控件生效，如 text、email、select、textarea 等；加在非控件元素或错误类型上无效，且仅校验是否为空值，不处理空格、格式等，服务端必须重复校验。
required 属性加对了，浏览器才会在提交时拦住空值；加错位置、选错元素类型，或者指望它校验空格或格式，都会失效。
哪些 HTML 元素加 required 才真正生效
它只认原生可提交的表单控件，不是所有带“输入感”的标签都能用：
-
<input type="text">、<input type="email">、<input type="number">、<input type="checkbox">、<input type="radio">、<input type="file">—— ✅ 支持 -
<select>和<textarea>—— ✅ 支持 -
<input type="hidden">、<input type="range">、<input type="color">、<div contenteditable="true">—— ❌ 浏览器直接忽略 -
<label required>或<form required>—— ❌ 属性不作用于容器或非控件
特别注意：<select> 必须至少有一个 <option value="">（且不能带 selected），否则用户一打开就“已选中”，required 形同虚设。
required 怎么写才不白加
它是布尔属性，语义是“存在即生效”，不是开关变量：
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确写法：
<input type="text" required>（最简、推荐） - ✅ 也可接受：
<input type="text" required="">或<input type="text" required="required"> - ❌ 常见错误：
<input type="text" required="true">（虽部分浏览器兼容，但不符合规范，不建议）
另外，别在框架组件上硬塞——比如 <AntdInput required />，除非组件明确透传 required 到底层 <input>，否则等于没写。
为什么点了提交却没提示？常见触发失败场景
required 只在原生表单提交流程中激活，以下情况会绕过它：
- 用
button type="button"+form.submit()调用 —— ❌ 不触发校验（submit()方法本身不触发约束验证） - 用
event.preventDefault()阻止了submit事件，又没手动调用form.reportValidity()—— ❌ 看不到提示 - 表单里混入
<input type="button">或自定义提交逻辑（如 axios 发请求）—— ❌ 完全不走浏览器校验链 - iOS Safari ≤15.4 中
<input type="file" required>—— ❌ 校验不触发，需 JS 补充判断
验证是否真起效：直接点 <button type="submit"> 或在文本框按回车，这是唯一可靠触发路径。
空格、零、邮箱乱填也能过？required 的校验边界在哪
它只做一件事：检查值是否为空字符串（""）、未选中、或未选择。其余全是“睁一只眼”：
-
<input type="text" required>填" "（空格）、"\t\n"—— ✅ 通过（value.trim() === ""但value === " "） -
<input type="email" required>填"@"或"test@.com"—— ✅ 通过（格式校验归type="email"自己管，required不插手） -
<input type="number" required>填"0"—— ✅ 通过；清空后值为""—— ❌ 拦截 -
<input type="checkbox" required>同时写了checked—— ✅ 默认满足，失去必填意义
真正容易被忽略的一点：服务端永远要重复校验。前端 required 只是用户体验层的轻量拦截，HTTP 请求可以删掉字段、伪造值、绕过所有 HTML 层逻辑——它不提供任何安全保证。
