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

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

Required 属性怎么用

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

• 请选择

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

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

浏览器如何执行校验

当用户点击提交按钮（ 或 ）时，浏览器自动检查所有带 required 的字段：

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

需要注意的细节

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

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

与自定义校验的配合建议

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

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

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！