最可靠方案是fetch+formdata+form.requestsubmit()组合：requestsubmit()触发原生html5校验（如required、pattern），失败时聚焦提示，成功后才触发submit事件，须配合event.preventdefault()阻止跳转；含文件时直接传formdata给fetch且不设content-type，浏览器自动添加boundary。
直接用 fetch + FormData + form.requestSubmit() 组合，是最可靠、语义清晰且兼容性够用的方案。不推荐 iframe 或纯 preventDefault() 后手动取值——前者难调试、跨域受限；后者容易漏字段或忽略验证状态。
怎么触发原生校验又不跳转
关键不是阻止 submit，而是让浏览器先跑完 HTML5 验证逻辑，再由你接管提交行为。form.requestSubmit() 就是为此设计的：它会触发 required、pattern、minlength 等原生校验，失败时聚焦错误字段并显示提示，成功后才触发你绑定的 submit 事件。
- 必须配合
event.preventDefault()使用，否则校验通过后仍会走传统提交流程 - 不能在非
<form></form>元素上调用，比如input.requestSubmit()会报错 - 旧版 Android WebView 不支持，可降级为
form.reportValidity()+ 手动判断返回值 - 移动端 Safari 支持良好，但要注意某些 PWA 场景下可能被拦截（需检查 manifest 配置）
fetch 提交时 FormData 怎么用才不出错
FormData 是唯一能自动处理文件 + 普通字段混合上传的机制，但它对请求头和数据格式很敏感。
- 含文件时，直接传
new FormData(form)给fetch，**不要设Content-Type** —— 浏览器会自动加multipart/form-data; boundary=... - 后端要 JSON，得先转对象：
Object.fromEntries(new FormData(form))，再JSON.stringify()，同时设headers: {'Content-Type': 'application/json'} - 禁用字段（
disabled）、空type="file"会被自动忽略，这是预期行为，不是 bug - IE11 不支持
new FormData(form)，需逐个append()字段
为什么校验通过了但后端收不到数据
常见原因不是代码写错，而是前后端对数据形态的理解错位。
- 前端发
FormData，后端却按application/json解析 → 收到空体 - 前端发 JSON，但没设
Content-Type→ 后端当成application/x-www-form-urlencoded处理 - 表单里用了
name="user[email]"这类带方括号的命名，后端框架（如 Express）默认不解析嵌套键 → 需额外中间件或改名 -
fetch报TypeError: Failed to fetch，大概率是 CORS 或网络中断，不是数据问题；此时catch块里拿不到response.status
真正容易被忽略的是：校验通过 ≠ 数据合法。比如邮箱格式正确，但后端要求该邮箱未注册——这种异步业务校验必须单独用 fetch 在 blur 或 submit 前做，不能依赖原生 pattern。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
