Required 属性是 HTML5 原生必填校验方式，添加于 input、select、textarea 等元素上即生效，提交时浏览器自动阻止空值提交并提示，但提示不可自定义且仅触发于 submit 行为。

Required 属性是 HTML5 原生提供的最简明的必填校验方式，无需 JavaScript 就能触发浏览器默认的提示和阻止表单提交。

Required 属性怎么用

在 <input>、<select>、<textarea> 等可输入元素上添加 required 属性（布尔属性），即表示该字段为必填项：

• <input type="text" name="username" required>
• <select name="category" required><option value="">请选择</option></select>
• <textarea name="content" required></textarea>

注意：required 不需要赋值，写上即生效；空字符串、未选中选项、未输入内容都会被判定为“未填写”。

浏览器如何执行校验

当用户点击提交按钮（<button type="submit"> 或 <input type="submit">）时，浏览器自动检查所有带 required 的字段：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

立即学习“前端免费学习笔记（深入）”；

• 若任一必填项为空，表单不会提交，焦点跳转到第一个未填写的字段
• 同时显示浏览器内置的提示气泡（如 Chrome 显示“请填写此字段”，Firefox 显示“该字段为必填项”）
• 提示文字不可自定义，但可通过 CSS 的 :valid / :invalid 伪类控制样式

需要注意的细节

Required 校验有明确的触发时机和限制，容易被忽略：

• 仅对用户交互后的提交行为生效（如点击 submit），不监听实时输入或离开焦点
• 对 <input type="hidden"> 无效（隐藏域不参与 required 校验）
• 若 <select> 的首个 <option> 的 value 为空（value=""），且该 option 未设 selected，则视为未选择，触发校验
• 支持通过 JavaScript 动态设置：element.required = true，也可用 removeAttribute('required') 移除

与自定义校验的配合建议

Required 适合基础必填场景，但无法替代业务逻辑校验：

• 邮箱格式、手机号长度、密码强度等需结合 type 属性（如 type="email"）或 pattern 属性补充
• 涉及前后端一致性时，仍需服务端二次校验 —— 前端校验可被绕过
• 如需定制提示文案或交互逻辑，可监听 invalid 事件并调用 setCustomValidity()，但会覆盖原生提示