5种required属性错误写法解析

或自定义组件（如 Vue/React 封装的输入框）上，浏览器完全忽略。

• ❌
  姓名
• ❌ （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 是浏览器原生表单验证机制的一部分，只响应