required属性可原生实现表单必填校验，需配合form包裹、submit触发、非disabled/hidden状态及select首项value为空；css可用:required伪类提示，但须兼顾无障碍与服务端重复校验。
用 required 属性最直接
HTML 原生就支持表单必填校验，只需在 <input>、<select></select> 或 <textarea></textarea> 标签上加 required 属性即可。浏览器会在提交时自动拦截空值，并聚焦到第一个未填写的必填项，同时显示默认提示（如“请填写此字段”）。
常见写法示例：
<input type="text" name="username" required><select name="country" required><option value="">请选择国家</option> <option value="cn">中国</option></select>
-
required是布尔属性，写上即生效，无需赋值（required="true"或required=""都不必要） - 对于
<select></select>，必须确保第一个<option></option>的value为空字符串，否则选中它也会通过校验 - 空格、制表符、换行符会被
required当作有效输入——如果要禁止纯空白，得靠 JavaScript 补充校验
required 不触发的几个典型场景
加了 required 却没反应？大概率掉进了这几个坑里：
- 表单没有
<form></form>包裹，或提交行为不是通过<button type="submit"></button>/<input type="submit">触发（比如用onclick调用 JS 提交） - 输入框被设置了
disabled或hidden—— 浏览器会跳过对它们的required检查 - 用了
type="hidden"：即使加了required，浏览器也忽略（隐藏域本就不参与用户输入） - 自定义组件（如 Vue/React 封装的输入框）没把
required透传到底层<input>
怎么配合 CSS 获取必填状态样式
可以利用 :required 伪类给必填项加视觉提示，比如星号或边框色：
input:required {
border-color: #e00;
}
input:required::after {
content: " *";
color: #e00;
}
-
::after在<input>上无效（它不支持伪元素），上面的写法仅适用于<label></label>或手动加<span></span>；更稳妥的是在 label 后加<span class="required">*</span> -
:valid和:invalid也能响应required状态，但要注意：刚加载时未输入的必填项是:invalid，输入内容后变:valid，清空又变回:invalid - 不要只依赖样式提示——屏幕阅读器用户可能看不到 * 号，语义上仍需靠
required属性和aria-required="true"（后者仅用于非原生表单控件）
服务端必须重复校验
前端 required 完全可被绕过：禁用 JS、修改 DOM、用 curl 提交……所以后端收到数据后，必须独立检查字段是否为空。
- 尤其注意 trim 后为空的字符串（如用户只打了空格）——多数后端框架的「非空校验」默认不自动 trim
- 如果用了前后端同构校验（如 JSON Schema），确保 required 规则与 HTML 的
required语义一致 - 错误提示应明确指出哪个字段缺失，而不是笼统返回「参数错误」
必填逻辑看似简单，但跨端一致性、无障碍支持、前后端协同这三块最容易漏掉。别让一个 required 成为线上报错的第一跳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
