required 属性失效的5种常见原因：1. 用在非支持元素上；2. 元素被disabled或hidden禁用；3. input type不支持required；4. 非原生submit事件触发提交；5. JS清空值后未重置validity状态。
required 属性不生效，往往不是 HTML 本身有问题，而是写法踩了坑。 它只对特定表单控件起作用，且依赖正确的元素类型、状态和上下文。下面这 5 种写法，看似合理，实则让 required 形同虚设。
1. 用在非表单可提交元素上
required 只对 （type 为 text、email、password、search、tel、url、number、date 等）、、 生效。如果加在 即使写了 required，只要元素有 disabled 属性，它就不会参与表单验证；同理，hidden="true" 或 CSS display: none 也会导致浏览器跳过校验。 HTML 标准中，type="hidden"、type="button"、type="reset"、type="image" 等类型**明确不支持 required**。浏览器会直接无视该属性。 required 是浏览器原生表单验证机制的一部分，只响应 的原生提交（比如点击 或回车）。如果用 button onclick="handleSubmit()"、form.addEventListener('click', ...) 或 JS 调用 form.submit()，验证会被绕过。 有些场景下，用户输入后 JS 清空了 input.value（比如格式化手机号时删掉非数字字符），但没调用 input.checkValidity() 或未触发 input/change 事件，导致浏览器内部 validity 状态滞后，required 错误提示不出现或不更新。
2. 元素被 disabled 或 hidden 属性禁用
—— 不校验，也不提交值 —— 视为不可交互，忽略 requiredaria-hidden="true" + position: absolute; left: -9999px 等可访问性友好的隐藏方式3. input type 设为不支持 required 的类型
—— 永远不会报错，也无需填 —— 无意义4. 表单提交未通过原生 submit 事件触发
—— 点击不触发 required 校验form.submit()（JS 主动调用）—— 跳过所有约束检查5. 值被 JS 动态清空却未重置 validity 状态
input.value = '' 后，不调用 input.reportValidity()，可能不显示错误input.value = ''; input.reportValidity();
checkValidity()，或依赖原生 change + submit 流程
