submit事件监听不到，先检查按钮type属性是否显式设为submit、表单是否存在嵌套或游离结构，再确认监听对象是form元素且preventdefault()写在回调首行。
submit 事件监听不到，先看按钮 type 和表单结构
点了按钮没进 submit 回调，不是 JS 写错了，而是浏览器压根没发出 submit 事件。常见原因有三个：
-
<button></button>没写type属性：部分浏览器当type="submit"处理，但 Safari 或旧版 Edge 可能忽略，务必显式写type="submit" - 表单里嵌了另一个
<form></form>：HTML 不允许嵌套，内层<form></form>会提前截断外层范围，导致按钮实际在表单外部——DevTools 里看缩进就能确认 - 模态框里写了空
<form></form>：这个标签不是占位符，它会触发解析器收束，让后续所有字段游离于表单之外，form.elements.length为 0 就是典型表现
event.preventDefault() 没生效，检查执行时机和绑定目标
页面闪一下就跳走，说明默认提交没拦住。关键点很具体：
- 监听对象必须是
<form></form>元素，不是按钮：form.addEventListener('submit', handler)，不是button.addEventListener('click', ) -
event.preventDefault()必须写在回调函数第一行，否则浏览器已开始导航，再拦无效 - 动态渲染的表单（如 React useEffect 插入），监听器得等 DOM 真实挂载后再绑定，不能只在页面加载时执行一次
Network 里看不到请求，优先查 action 和 method 配置
表单失败八成不是后端没收到，而是浏览器根本没发出去。两个属性决定请求是否生成：
-
action必须是有效 URL："./api/submit"（相对当前 HTML 目录）、"/api/submit"（绝对路径，从域名根起）、或完整跨域地址如"https://api.example.com/v1/submit"；留空或写"handler.php"这类裸文件名，大概率 404 -
method必须显式声明：method="post"才支持文件上传、不暴露参数；method="get"仅适合搜索类只读操作；不写 method 默认用 GET，但后端接口往往只监听 POST，结果直接 405 - 含
<input type="file">的表单，除了method="post"，还必须加enctype="multipart/form-data"，否则文件字段被静默丢弃
fetch 提交后拿不到响应数据，注意 FormData 和 credentials
想不跳转、读 JSON、加 loading，就得放弃原生提交，改用 fetch + FormData。但容易漏三件事：
-
new FormData(formElement)能自动收集所有name字段，包括文件，但前提是每个<input>都有name属性——没name的字段不会进 FormData -
fetch默认不带 cookie，跨域请求需显式加credentials: 'include'，否则后端鉴权失败 - 中文或特殊字符没问题，但若后端返回空
req.body，大概率是服务端没配对解析中间件（如 Express 没装multer处理multipart/form-data）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
