required 属性仅在原生表单提交（submit 事件）时触发校验，不介入 js 主动提交、fetch 请求或非 submit 按钮逻辑；需配合 checkvalidity() 和 reportvalidity() 在自定义提交中复用校验。
required 属性不会在“代码提交运行前”执行校验——它只在浏览器原生表单提交（submit 事件）时触发，且完全不介入后端代码执行流程。 想靠它拦住空值提交到服务端？可以。想让它在你点击“运行”按钮（比如 CodePen、JSFiddle 或自定义提交逻辑）前自动报错？不行，除非那个按钮是 <button type="submit"></button> 并包裹在 <form></form> 中。
required 校验只响应原生 submit 行为
浏览器对 required 的检查是硬编码在 UA 层的，仅响应两个动作：
- 用户点击
<button type="submit"></button>或<input type="submit"> - 用户在表单内按回车（且焦点不在
<textarea></textarea>等多行控件上）
以下情况 完全不触发 校验：
- 调用
form.submit()（JavaScript 主动提交，跳过所有约束验证） - 用
fetch()或axios手动发请求 - 点击
<button type="button"></button>后再 JS 收集数据 - 表单没包在
<form></form>标签里（即使加了required，浏览器直接忽略）
select 和 input 的空值判断逻辑差异大
同一个“没填”，不同元素判定方式完全不同，容易误判：
-
<input required>：只看input.value.trim() === ""；" "（纯空格）算已填，""才报错 -
<select required></select>：必须有<option value="" disabled selected></option>作为占位；若首个<option></option>是value=""但没设disabled，部分浏览器认为“已选中”，跳过校验 -
<input type="checkbox" required>：只检查是否勾选，不关心 value；未勾选即失败 -
<input type="radio" name="x" required>：同名 radio 组中任一被勾选即通过，不强制指定某一个
想在非 submit 场景下用 required 逻辑？得手动调 API
如果你的“提交运行”按钮是 JS 驱动的（比如跑沙盒环境、调 API），required 自身不会生效，但你可以复用它的判定规则：
- 用
form.checkValidity()主动检查整个表单是否满足所有required、type、pattern等约束（返回true/false） - 用
form.reportValidity()主动触发浏览器默认提示气泡（和用户点 submit 失败时一模一样） - 注意：这两个方法必须在
<form></form>元素上调用，不能对单个 input 调用reportValidity()来显示提示（它只对 form 有效）
示例：
document.getElementById('runBtn').addEventListener('click', () => {
if (!document.getElementById('myForm').checkValidity()) {
document.getElementById('myForm').reportValidity();
return;
}
// 此处才执行你的“代码提交运行”逻辑
});
真正容易被忽略的点
很多人以为加了 required 就万事大吉，结果线上出问题——最常漏掉的是：
-
<input type="hidden">上加required：浏览器直接无视，别试 - 移动端 WebView（尤其旧版微信内置浏览器）：可能完全不支持
required，需 fallback 到checkValidity()+ JS 提示 - 服务端从不信任前端：哪怕
required拦住了 99% 的空提交，后端仍必须对每个字段做trim().length === 0判断——因为 DOM 可被任意修改
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
