required 属性对 无效，因 html 规范限定其仅作用于可输入值的控件，file 的 filelist 值只读且无法被检测；必须通过 javascript 校验 files.length 并配合后端二次验证。
required 属性对 <input type="file"> 无效——这是最常被误用的点。浏览器不支持原生校验文件是否被选中，required 在这里会被忽略，表单仍能提交，且后端收到的是空文件或空字段。
为什么 required 在 file 输入上不生效
HTML 规范明确将 required 的校验逻辑限定在可“输入值”的控件上（如 text、email、select），而 type="file" 的值是只读的 FileList 对象，无法被 required 检测。即使你加上了 required，Chrome/Firefox/Safari 都不会阻止提交，也不会弹出提示。
- 现象：
<input type="file" name="avatar" required>→ 用户不选文件、直接点提交，表单通过，后端request.files.get("avatar")是None或空 - Network 面板里请求体中该字段完全缺失，或只带一个空
Content-Disposition: form-data; name="avatar"分块 - 这不是 bug，是规范行为；W3C 和 WHATWG 文档均未定义
required对 file 输入的语义
真正有效的必选控制方式
必须靠 JavaScript 主动拦截并校验 input.files.length，再配合 UI 提示。后端也必须二次校验，不能信任前端。
- 监听
submit事件，在event.preventDefault()后检查input.files.length === 0 - 用
setCustomValidity()触发原生气泡提示（仅限部分浏览器支持 file 类型）：input.setCustomValidity("请上传文件")，再调用input.reportValidity() - 更可靠的做法：禁用提交按钮，直到
input.files.length > 0才启用；同时加视觉反馈（如红边框 + 错误文字） - 示例片段：
const fileInput = document.querySelector('input[type="file"][name="logo"]');<br>const submitBtn = document.querySelector('button[type="submit"]');<br>fileInput.addEventListener('change', () => {<br> submitBtn.disabled = fileInput.files.length === 0;<br>});
后端必须做等价校验，否则形同虚设
前端 JS 校验可以绕过（禁用 JS、手动发请求），所以后端收到请求后第一件事就是确认文件字段是否存在且非空。
- Flask：
if 'logo' not in request.files or not request.files['logo'].filename: - Express + Multer：
if (!req.file || !req.file.originalname)（注意：单文件用req.file，多文件用req.files） - PHP：
empty($_FILES['logo']['name'])或$_FILES['logo']['error'] === UPLOAD_ERR_NO_FILE - 别只查
$_FILES['logo']['size'] > 0—— 有些客户端会传空文件但 size=0，仍需结合name和error
真正起作用的“必选”，是前后端两次独立校验的组合：前端用 JS 拦住明显遗漏，后端用逻辑拒绝所有非法请求。漏掉任一端，用户都能跳过检查。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
