必须在form的submit事件中第一行调用event.preventdefault()以阻止跳转并获取完整表单数据；用formdata取值更可靠，支持文件和多选；alert仅适合调试，真实项目需非阻塞modal与错误处理。
用 event.preventDefault() 阻止默认提交行为
表单默认提交会跳转页面或刷新，根本看不到弹窗。必须在提交时阻止它，才能执行自己的逻辑。关键是在 submit 事件监听中调用 event.preventDefault()。
常见错误是绑定在按钮的 click 事件上——这样拿不到完整的表单数据（比如回车触发提交就漏了），也绕不开浏览器原生校验逻辑。
- 监听对象必须是
<form></form>元素，不是按钮 - 务必在回调函数第一行加
event.preventDefault() - 如果用了
required等属性，浏览器会在调用preventDefault()前自动校验并提示，这是好事，不用额外写校验
用 FormData 获取所有字段值（含文件）
手动遍历 form.elements 容易漏掉禁用字段、重复名（如多选 checkbox）、或类型判断出错。用 FormData 更可靠，它天然适配各种控件，包括 <input type="file">。
注意：如果字段被设置为 disabled，FormData 会自动忽略它；若需包含，改用 readonly + CSS 视觉禁用。
-
new FormData(formElement)构造后，可用get()取单值，getAll()取多值（如多个 checkbox） - 对文本字段，
get('username')返回字符串；对未勾选的 checkbox，返回null - 避免直接用
formElement.username.value——name 带点、中括号或特殊字符时会报错
拼接内容并用 alert() 或 confirm() 显示
原始需求是“弹窗显示”，最轻量就是 alert()。但它的样式不可定制、无法换行渲染、不能选中文本。如果只是调试或内部工具，够用；对外交付建议换 modal。
用 alert() 时别直接传对象，会显示 [object Object]。要格式化成字符串：
const data = Object.fromEntries(new FormData(form));
alert(`用户名：${data.username}\n邮箱：${data.email}`);
- 换行用
\n，alert()支持基础转义，但不支持 HTML 标签 - 如果字段可能为空，先做
?? ''或|| ''处理，避免显示undefined -
confirm()适合需要用户二次确认的场景（如删除操作），返回布尔值可决定是否继续提交
提交后还想发请求？别混用 alert() 和异步逻辑
如果弹窗只是中间反馈，后续还要用 fetch 发送数据，就不能卡在 alert() 上——它会阻塞 JS 执行，导致网络请求延迟或失败。
正确做法是：弹窗（推荐用非阻塞 modal）、然后立即发请求、最后在 then() 或 await 后再更新 UI 或关闭弹窗。
- 不要写
alert(...); await fetch(...);——alert()不是 Promise，不会等它关掉才往下走 - 更隐蔽的坑：在
fetch().then(() => alert('成功'))里弹窗，但没处理catch，失败时用户完全不知情 - 真实项目中，表单提交后的反馈应区分成功/失败，并给出可操作提示（如“重试”按钮），而非仅靠弹窗
disabled 字段和空值处理，这两处现场调试时最常被忽略。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
