表单必须设enctype="multipart/form-data"才能上传文件；input[type="file"]需加accept=".pdf,.doc,.docx"并禁用multiple；提交前js校验文件类型与字段格式，点击按钮后禁用并显示加载态，后端须幂等防重提。

表单必须包含 enctype="multipart/form-data" 才能上传简历文件

浏览器默认用 application/x-www-form-urlencoded 编码，这种编码会把文件变成空字符串或乱码——你收到的简历 PDF 就是 0 字节。只要表单带文件上传字段（<input type="file">），enctype 就不能省。

常见错误：只写了 method="POST" 却漏掉 enctype，后端收不到文件，但表单其他字段（姓名、邮箱）看起来还能提交成功，容易误判为“前端没问题”。

• <form method="POST" enctype="multipart/form-data"></form> 是硬性要求
• 如果用 fetch 或 axios 提交，别手动设 Content-Type；让浏览器自动设置 multipart boundary，否则文件会被当纯文本丢弃
• Node.js + Express 需配合 multer，PHP 用 $_FILES，Python Flask 用 request.files —— 后端不处理 multipart 就等于没接住文件

input[type="file"] 要加 accept 且限制单文件

招聘方真正需要的是 PDF 或 DOCX，但用户可能随手选个截图 PNG、压缩包 ZIP，甚至拖进整个文件夹。不加约束，后端解析失败率飙升，日志里全是 Unsupported file type。

accept 不是装饰，它影响原生文件选择器的过滤行为（尤其在移动端），也方便后续 JS 校验。

超级简历WonderCV

一款AI办公效率工具，主要用于免费求职简历模版下载制作，应届生职场人必备简历制作神器，适合需要提升相关任务效率的用户。

下载

• 写成 accept=".pdf,.doc,.docx"，不要写 application/pdf —— iOS Safari 对 MIME 类型支持差，常失效
• 加 multiple 会导致用户一次传 5 份附件，HR 系统很难区分哪份是主简历；明确写 multiple="false" 或直接不写（默认单文件）
• 提交前用 JS 检查 file.type 和 file.name 扩展名双校验，防止绕过 HTML 属性

姓名、手机号、邮箱字段必须做基础格式校验，但别过度拦截

招聘页面不是银行登录页，校验目标是筛掉明显无效输入（如邮箱缺 @、手机号位数不对），而不是卡住真实用户。太严的正则会让用户反复修改、放弃投递。

• 邮箱用 type="email" + 浏览器原生提示即可，别上复杂正则（比如验证 MX 记录）
• 手机号统一用 type="tel"，中国用户建议加 pattern="[1-9]\d{10}"，但允许用户粘贴带空格/括号的号码（JS 剥离后再提交）
• 姓名字段禁用 required 但留空时给提示：“请填写真实姓名（用于面试邀约）”，比红色星号更降低抵触感

提交按钮点击后必须禁用 + 显示加载态

网络稍慢时，用户看到按钮没反应，习惯性连点三次——结果同一份简历发了三遍，HR 收到重复通知，后台还可能触发三次解析任务（PDF 解析很耗 CPU）。

• 点击后立刻 button.disabled = true，同时改文案为 "提交中…" 或加 <span class="loading"></span>
• 成功后跳转到静态成功页（/apply-success），别留在原页清空表单——用户刷新会重复提交
• 失败时恢复按钮状态，并把后端返回的具体错误（如 "邮箱已被投递过该职位"）直接显示在按钮下方，不弹 alert

最易被忽略的点：表单没做防重复提交，靠前端按钮禁用只是第一层防护；后端必须有幂等设计（比如用 email+job_id 做唯一索引），否则缓存失效或用户绕过 JS，照样重复入库。

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