required属性仅对input（非hidden/button/submit/reset）、select、textarea生效；校验依赖value值而非placeholder等内容；校验失败时submit事件不触发，需用invalid事件或checkValidity()配合处理。
required 属性只对特定表单控件生效
常见误用场景： 浏览器判断是否“已填写”的依据是元素的 正确写法示例（ 立即学习“前端免费学习笔记（深入）”； 当表单含 更关键的是：校验失败时， 若需统一拦截并自定义提示，应监听 稳妥做法是：前端必填逻辑不能只依赖 真正容易被忽略的点是：表单重置（required 是 HTML5 原生必填验证机制，但它不是万能的——仅对 （非 type="hidden"、"button"、"submit"、"reset"）、、 有效。比如给 required，浏览器完全忽略。
加 required → 无效，且可能干扰表单提交逻辑 组中只给其中一个加 required → 实际无效；必须确保同名 name 的所有 radio 共享语义约束，但 required 应加在任意一个上（规范允许，但建议统一加） 加 required → 用户至少需选一项，空选项（如 ）不满足要求空值判断逻辑依赖 value 属性，不是用户感知内容
value DOM 属性（或 select 的选中项 value），而非 placeholder、label 或 innerText。这意味着：
：placeholder 不算输入，聚焦后直接失焦会触发校验失败：哪怕里面写了文字但被 JS 清空为 ""，就视为未填：因默认选项 value=""，提交时仍报错select 必填）：浏览器原生提示不可定制，且 submit 事件可能不触发
required 字段且为空时，点击 会阻断提交，并弹出浏览器默认提示（如 Chrome 显示“请填写此字段”）。这个提示无法用 CSS 修改，也不能通过 setCustomValidity() 覆盖（除非先调用该方法清空原生校验状态）。submit 事件根本不会触发。所以以下代码中的 console.log 在用户没填必填项时不会执行：invalid 事件，或改用 checkValidity() 手动控制：
invalid 事件可捕获每个字段校验失败瞬间form.checkValidity() 返回布尔值，配合 reportValidity() 主动触发提示，再全由 JS 控制移动端和旧版 Safari 的兼容性细节
required 属性在 IE10+、Edge、Chrome、Firefox、Safari 5.1+ 均支持，但存在两个易忽略问题：
+ required 的校验有 bug：即使选了日期，也可能误判为空invalid 事件，或对 textarea 的换行符处理异常（如把 \n 当空白）required，但支持 checkValidity()
required，服务端必须二次校验；若需强一致性提示，建议结合 checkValidity() 和轻量 JS 补充判断。form.reset()）后，required 字段的校验状态会被清除，但用户再次提交前不会自动重新校验——得靠交互触发（如失焦或点击提交）才重新跑一遍。
