表单脏检查问题：beforeunload确认功能失效

问题描述 #

需要实现表单脏状态检测（即内容已修改但未保存），当用户未保存就离开页面时弹出提醒。但现有添加脏检查逻辑的代码完全失效，单独使用beforeunload方法是正常的。现有代码如下：

<script>
    var form = $('#MyForm'),
    originalForm = form.serialize()
    
    $(window).bind('beforeunload', function () {   
        if (form.serialize() != originalForm) {
            return 'You have unsaved changes';
        }          
    });
</script>

问题原因及解决办法 #

1. 初始序列化时机错误 #

代码执行时DOM可能还未完全加载，导致form.serialize()获取的初始值为空或不完整，后续对比永远相等。

解决： 将代码包裹在$(document).ready()中，确保表单元素全部渲染完成后再获取初始值：

$(document).ready(function() {
    var form = $('#MyForm'),
        originalForm = form.serialize();
    
    $(window).on('beforeunload', function () {   
        if (form.serialize() !== originalForm) {
            return '您有未保存的更改，确定要离开吗？';
        }          
    });
});

2. 表单控件缺失name属性 #

serialize()方法仅会序列化带有name属性的表单元素，缺失name的控件不会被纳入对比，导致脏状态检测失效。

解决： 给所有需要检测的表单控件添加name属性，示例：

<input type="text" name="username" id="username" placeholder="用户名">
<textarea name="description" id="description"></textarea>
<select name="userRole" id="userRole">
    <option value="1">管理员</option>
    <option value="2">普通用户</option>
</select>

3. 绑定方法兼容性问题 #

旧版jQuery的bind()方法存在兼容性问题，推荐使用官方推荐的on()方法替代，提升稳定性。

解决： 替换$(window).bind(...)为$(window).on(...)，上述代码已包含该修改。

额外优化：保存后更新初始状态 #

如果页面有保存按钮，点击保存后需要更新originalForm的值，避免保存后仍弹出未更改提醒：

// 假设保存按钮ID为saveBtn
$('#saveBtn').on('click', function() {
    originalForm = form.serialize();
    // 执行表单提交或保存逻辑
});

内容的提问来源于stack exchange，提问作者Eli