required 属性失效的5种常见原因：1. 用在非支持元素上；2. 元素被disabled或hidden禁用；3. input type不支持required；4. 非原生submit事件触发提交；5. JS清空值后未重置validity状态。
required 属性不生效，往往不是 HTML 本身有问题，而是写法踩了坑。 它只对特定表单控件起作用，且依赖正确的元素类型、状态和上下文。下面这 5 种写法，看似合理，实则让 required 形同虚设。
1. 用在非表单可提交元素上
required 只对 <input>（type 为 text、email、password、search、tel、url、number、date 等）、<select>、<textarea> 生效。如果加在 <div>、<span>、<p> 或自定义组件（如 Vue/React 封装的输入框）上，浏览器完全忽略。
- ❌
<div required>姓名</div> - ❌
<MyInput required />（JSX 中不会透传到原生 input） - ✅ 正确做法：确保是原生支持 required 的表单元素，且未被禁用或隐藏（见下条）
2. 元素被 disabled 或 hidden 属性禁用
即使写了 required，只要元素有 disabled 属性，它就不会参与表单验证；同理，hidden="true" 或 CSS display: none 也会导致浏览器跳过校验。
- ❌
<input type="text" required disabled>—— 不校验，也不提交值 - ❌
<input type="text" required style="display:none">—— 视为不可交互，忽略 required - ✅ 若需“视觉隐藏但保留校验”，用
aria-hidden="true"+position: absolute; left: -9999px等可访问性友好的隐藏方式
3. input type 设为不支持 required 的类型
HTML 标准中，type="hidden"、type="button"、type="reset"、type="image" 等类型**明确不支持 required**。浏览器会直接无视该属性。
- ❌
<input type="hidden" name="token" required>—— 永远不会报错，也无需填 - ❌
<input type="button" value="提交" required>—— 无意义 - ✅ 需校验的隐藏字段？改用 JavaScript 控制逻辑，或换为 type="text" + visibility: hidden（并设 readonly 防用户修改）
4. 表单提交未通过原生 submit 事件触发
required 是浏览器原生表单验证机制的一部分，只响应 <form> 的原生提交（比如点击 <button type="submit"> 或回车）。如果用 button onclick="handleSubmit()"、form.addEventListener('click', ...) 或 JS 调用 form.submit()，验证会被绕过。
- ❌
<button onclick="saveData()">保存</button>—— 点击不触发 required 校验 - ❌
form.submit()（JS 主动调用）—— 跳过所有约束检查 - ✅ 正确做法：监听 form.onsubmit，或确保按钮是 type="submit"，并在 handler 中 return false 或 event.preventDefault() 来控制后续流程
5. 值被 JS 动态清空却未重置 validity 状态
有些场景下，用户输入后 JS 清空了 input.value（比如格式化手机号时删掉非数字字符），但没调用 input.checkValidity() 或未触发 input/change 事件，导致浏览器内部 validity 状态滞后，required 错误提示不出现或不更新。
- ❌ 直接赋值
input.value = ''后，不调用input.reportValidity()，可能不显示错误 - ✅ 清空后主动触发校验：
input.value = ''; input.reportValidity(); - ✅ 更稳妥：监听 input 事件，在值变更后调用
checkValidity()，或依赖原生 change + submit 流程
