表单提交前拦截确认的核心是监听submit事件并结合是否修改的状态判断。需记录初始状态、实时检测修改、submit时用confirm弹窗拦截，同时注意忽略非业务字段、处理自定义控件及监听页面卸载。

在表单提交前拦截并提示用户确认是否已修改，核心是监听表单的 submit 事件，结合「表单是否被修改」的状态判断，再用 confirm() 或更友好的自定义弹窗来提醒用户。

1. 记录初始表单状态

页面加载时保存原始值，作为比对基准。推荐用 FormData 或遍历字段手动记录：

• 对文本框、多选框、单选框、下拉框等常见控件，读取 value、checked、selectedOptions 等属性
• 避免只存字符串，注意 number 类型输入、空字符串与 null 的区别
• 示例：用一个对象缓存初始值

let initialFormState = {};
document.querySelectorAll('form input, form select, form textarea').forEach(el => {
  const name = el.name;
  if (name) {
    initialFormState[name] = getControlValue(el); // 自定义函数获取真实值
  }
});

2. 实时检测表单是否被修改

监听关键事件（input、change、click），动态更新「已修改」标志：

Alibabacloud Sdk Client Initialization For Java

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

下载

• input 适合实时捕获文本类变化（含中文输入法未上屏前也触发）
• change 更稳妥，适用于选择类、失焦类操作
• 为防遗漏，也可在 submit 时做最终比对

let isDirty = false;
const form = document.querySelector('form');
form.addEventListener('input', () => isDirty = true);
form.addEventListener('change', () => isDirty = true);

3. 在 submit 事件中拦截并确认

阻止默认提交行为，检查 isDirty，再决定是否放行：

• 如果未修改，直接提交（event.preventDefault() 不调用即可）
• 如果已修改，弹出确认框；用户点「取消」则 preventDefault()，点「确定」则继续提交
• 注意：不要在 confirm() 外提前 preventDefault()，否则无法恢复提交

form.addEventListener('submit', function(event) {
  if (isDirty && !confirm('表单已被修改，确定要提交吗？')) {
    event.preventDefault();
  }
});

4. 进阶建议：避免误判和提升体验

实际项目中要注意几个细节：

• 忽略非业务字段（如隐藏域、token、时间戳）的变更
• 处理富文本编辑器、日期选择器等自定义控件，需单独监听其变更事件
• 离开页面前也建议监听 beforeunload，防止用户直接关闭标签页丢失修改
• 用 UI 标识（如页签加星号、按钮变色）让用户直观感知「已修改」状态

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南