重置/重新初始化动态AJAX表单的jQuery无干扰验证以清除旧验证规则

你的推测完全正确——jQuery Validate（包括MVC自带的非侵入式验证）会为每个表单维护独立的验证实例，要是你只隐藏旧表单却不清理它的验证规则，再加上重复绑定事件、DOM里堆积同ID表单这些问题，就会导致每次提交时要遍历越来越多的验证逻辑，甚至触发多次提交操作，速度自然越来越慢。下面是具体的解决步骤：

1. 销毁旧表单验证实例并移除DOM元素 #

每次关闭模态框时，别只隐藏表单，要主动销毁它的验证实例并从DOM中彻底移除，避免残留：

function closeOverlay() {
    // 获取当前表单（注意DOM里不要有多个同ID元素）
    var $form = $('#MyForm');
    if ($form.length > 0) {
        // 销毁验证实例，清除缓存的规则
        var validator = $form.data('validator');
        if (validator) {
            validator.destroy();
        }
        // 从DOM中移除表单，避免元素堆积
        $form.remove();
    }
    // 你的其他关闭逻辑...
}

2. 避免重复绑定提交事件 #

你原来的代码在每个表单的$(document).ready()里绑定submit事件，这会导致每次加载新表单就多绑定一次，点击一次提交会执行N次逻辑（N等于表单加载次数）。改成事件委托，只在页面初始化时绑定一次：

// 把这段代码放在页面的全局脚本中，不要放在模态表单的局部脚本里
$(document).ready(function() {
    // 用事件委托处理动态加载的表单
    $(document).on('submit', '#MyForm', function(e) {
        e.preventDefault();
        var $form = $(this);
        if ($form.valid()) {
            var formValues = $form.serialize();
            $.post("@Url.Action("MyAction", "MyController")", formValues, function (result) {
                if (result.startsWith("OK")) {
                    formValueHasChanged = false;
                    // 提交成功后直接销毁并移除当前表单
                    var validator = $form.data('validator');
                    if (validator) {
                        validator.destroy();
                    }
                    $form.remove();
                    closeOverlay();
                } else {
                    alert(result);
                }
            });
        }
    });
});

3. 不要使用固定ID（可选但强烈推荐） #

如果每次加载的模态表单都用同一个ID（MyForm），DOM中会存在多个同ID元素，这会导致jQuery选择器行为异常，也容易引发验证规则混乱。建议改用类选择器：

// 修改表单生成代码，用类代替固定ID
@using (Html.BeginForm("MyAction", "MyController", FormMethod.Post, new { @class = "modal-edit-form", enctype = "multipart/form-data" }))

然后修改事件委托的选择器：

$(document).on('submit', '.modal-edit-form', function(e) {
    // 逻辑和上面一致，用$(this)获取当前提交的表单即可
});

4. 加载新表单后重新解析验证规则 #

如果你是通过AJAX加载表单HTML，在插入DOM后需要重新解析非侵入式验证规则（确保新表单的验证生效），同时要先清理旧表单：

// 示例：加载模态表单的AJAX逻辑
$.get('@Url.Action("GetEditForm", "MyController")', { id: itemId }, function(formHtml) {
    // 先清理旧表单
    var $oldForm = $('.modal-edit-form');
    if ($oldForm.length) {
        var validator = $oldForm.data('validator');
        if (validator) validator.destroy();
        $oldForm.remove();
    }
    // 插入新表单到模态框容器
    $('#modal-container').html(formHtml);
    // 解析新表单的非侵入式验证规则
    $.validator.unobtrusive.parse('.modal-edit-form');
});

按照这些步骤处理后，每次打开新表单时旧表单的验证规则会被彻底清理，不会堆积，提交速度就不会随着次数增加而变慢了。

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