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