required属性仅对input（text/email/number/date/checkbox/radio/file）、select、textarea生效，不支持hidden、range、div等；仅原生表单提交时校验空值，空格视为已填，服务端必须二次校验。
加 required 属性本身不增强验证强度，它只做最基础的“非空”拦截；真正起作用的前提是表单用原生方式提交、控件类型支持、且服务端必须重复校验。
哪些元素加 required 才真生效
只有浏览器明确识别为“可输入/可选值”的原生表单控件才支持：input（type 为 text、email、number、date、checkbox、radio、file）、select、textarea。
以下写法完全无效：
-
<input type="hidden" required>—— 浏览器直接忽略 -
<input type="range" required>或<input type="color" required>—— 空值语义模糊，几乎不触发提示 -
<div contenteditable="true" required>或第三方封装组件（如 Ant DesignInput）—— 不透传属性就等于没写 -
<label required>——required不作用于非控件标签
required 怎么判断“空”？不同 type 差异极大
它不调用 trim()，也不关心语义合法性，只看底层值是否为空字符串或未选中状态：
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
-
<input type="text" required>：填" "（空格）或"\t\n"都算“已填写”，required不拦 -
<input type="email" required>：填"@"或"test@.com"也通过，格式校验靠type自身或pattern -
<input type="checkbox" required>：未勾选即失败；若同时写了checked，默认满足，失去必填意义 -
<select required>：首个<option value="">不能带selected，否则用户不选也能绕过 -
<input type="file" required>：iOS Safari ≤15.4 存在校验不触发问题，需降级兜底
为什么点了提交没反应？常见触发失效场景
required 只在两种时机自动校验：用户点击 <button type="submit">，或在可编辑字段按回车。其他情况一律不触发：
- 用
<button type="button">调form.submit()—— 完全绕过校验 - JS 中监听
submit事件并执行了e.preventDefault()，但没手动调form.checkValidity()或form.reportValidity()—— 没提示也没提交 - 表单按钮写了
formnovalidate—— 显式禁用所有校验 - 动态渲染的元素（如 Vue/React 中
v-if或useState控制显隐）—— 初始 DOM 不存在时，required不自动绑定，需手动设置element.required = true
后端校验为什么不能省？空格、null、缺失字段都得单独判
前端 required 可被禁用、删除属性、curl 提交或 WebView 注入 JS 绕过。后端必须独立检查：
- 字段是否存在（HTTP body / query string 中 key 缺失）
- 值是否为
null（JSON 解析后） - 是否为空字符串
""或纯空白符" \t\n"—— 不能只用if not value: - GET 表单中 URL 编码后的空值边界（如
?name=）
最容易被忽略的是：移动端 WebView 或老旧 Android 浏览器可能根本不触发 required 校验，此时前端连“基础拦截”都失效，后端就是最后一道防线。
