JavaScript中实现表单提交前二次确认需监听form的submit事件并调用event.preventDefault()，再用confirm()判断用户选择，为true时调用form.submit()手动提交。

在 JavaScript 中实现表单提交前的二次确认弹窗，核心是拦截默认提交行为，在用户明确确认后再手动触发提交。最常用、最直接的方式是使用原生 confirm() 弹窗，配合 event.preventDefault()。

监听表单 submit 事件并阻止默认行为

不要给提交按钮加 onclick，而是监听整个表单的 submit 事件。这样能覆盖所有触发表单提交的方式（回车、按钮点击、JS 提交等）。

• 为 <form> 添加 id（如 id="myForm"），方便获取
• 用 addEventListener('submit', ...) 绑定处理函数
• 第一行就调用 event.preventDefault()，确保不立即提交

用 confirm() 弹出确认框并判断用户选择

confirm() 会阻塞后续代码执行，返回 true（点击“确定”）或 false（点击“取消”或关闭弹窗）。

• 如果返回 true，调用表单的 submit() 方法（注意：不是 click() 或再次触发事件）
• 如果返回 false，什么也不做，表单保持未提交状态
• 提示文字建议明确说明后果，例如："确定要提交表单吗？此操作不可撤销。"

完整示例代码

HTML：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

立即学习“Java免费学习笔记（深入）”；

<form id="myForm" action="/submit" method="POST">
  <input type="text" name="username" required>
  <button type="submit">提交</button>
</form>

JavaScript：

const form = document.getElementById('myForm');
form.addEventListener('submit', function (e) {
  e.preventDefault(); // 阻止自动提交
  if (confirm('确定要提交表单吗？数据将被保存。')) {
    form.submit(); // 手动提交
  }
});

注意事项与替代方案

原生 confirm() 样式无法自定义，且在部分移动端浏览器中体验不佳。如需更好控制，可改用模态框（如 Bootstrap Modal、自定义 DOM 弹层）+ Promise 封装，但逻辑本质不变：先阻止提交 → 等待用户确认 → 再决定是否调用 form.submit() 或 fetch() 等后续操作。