首页 > 文章 > 前端

5种required属性错误写法解析

时间：2026-05-08 09:25:42 472浏览收藏

你是否曾为表单中明明写了 `required` 却毫无校验反应而困惑？其实问题往往不在 HTML 本身，而是五个隐蔽却高频的写法陷阱：用在不支持的元素或自定义组件上、被 `disabled` 或 `hidden` 意外禁用、`input type` 类型不兼容（如 `hidden` 或 `button`）、绕过原生 `submit` 事件的手动提交，以及 JS 清空值后未同步更新验证状态。这些看似合理的小细节，正悄悄让 `required` 形同虚设——掌握它们，才能真正释放浏览器原生表单验证的可靠力量。

required 属性不生效的 5 种常见写法错误

required 属性不生效，往往不是 HTML 本身有问题，而是写法踩了坑。 它只对特定表单控件起作用，且依赖正确的元素类型、状态和上下文。下面这 5 种写法，看似合理，实则让 required 形同虚设。

1. 用在非表单可提交元素上

required 只对 <input>（type 为 text、email、password、search、tel、url、number、date 等）、<select>、<textarea> 生效。如果加在

、、

或自定义组件（如 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 防用户修改）