替代已弃用async:false实现表单提交前PHP验证的方案咨询

核心思路 #

async:false会阻塞浏览器主线程且已被弃用，正确做法是先阻止表单默认提交行为，通过异步请求完成验证后，再根据结果决定是否手动提交表单。

方案一：使用async/await（推荐，代码更易读） #

$("form").on("submit", async function(event) {
    // 先阻止表单默认提交
    event.preventDefault();
    const idForm = $(this).attr("id");
    
    // 无对应验证规则时直接提交表单（可按需调整）
    if (!correspFormCtrl[idForm]) {
        this.submit();
        return;
    }

    // 序列化表单数据为对象
    const dataFormArray = $(this).serializeArray();
    const dataForm = dataFormArray.reduce((acc, item) => {
        acc[item.name] = item.value;
        return acc;
    }, {});
    const cible = $(this);

    try {
        // 异步请求验证接口
        const data = await $.ajax({
            url: "php/verifHtmlForm.php",
            type: "POST",
            data: { 
                listeChamps: correspFormCtrl[idForm].champs, 
                valeursForm: dataForm 
            }
        });

        if (data) {
            // 验证失败：显示错误并滚动到错误区域
            cible.find(".retourErreurForm").removeClass("invisible")[0].scrollIntoView({ block: 'start' });
            cible.find(".infosErreurHtml").html(data);
        } else {
            // 验证通过：隐藏错误提示，手动提交表单
            cible.find(".retourErreurForm").addClass("invisible");
            cible[0].submit(); // 用原生submit避免触发jQuery的submit事件循环
        }
    } catch (error) {
        // 捕获请求异常（如网络错误）
        console.error(error);
        // 可在此添加网络错误提示逻辑
    }
});

方案二：使用jQuery的deferred链式调用 #

如果项目环境不支持async/await，可改用传统链式写法：

$("form").on("submit", function(event) {
    event.preventDefault();
    const idForm = $(this).attr("id");
    
    if (!correspFormCtrl[idForm]) {
        this.submit();
        return;
    }

    const dataFormArray = $(this).serializeArray();
    const dataForm = dataFormArray.reduce((acc, item) => {
        acc[item.name] = item.value;
        return acc;
    }, {});
    const cible = $(this);

    $.ajax({
        url: "php/verifHtmlForm.php",
        type: "POST",
        data: { 
            listeChamps: correspFormCtrl[idForm].champs, 
            valeursForm: dataForm 
        }
    }).done(function(data) {
        if (data) {
            cible.find(".retourErreurForm").removeClass("invisible")[0].scrollIntoView({ block: 'start' });
            cible.find(".infosErreurHtml").html(data);
        } else {
            cible.find(".retourErreurForm").addClass("invisible");
            cible[0].submit();
        }
    }).fail(function(error) {
        console.error(error);
    });
});

关键说明 #

1. 阻止默认提交：必须先调用event.preventDefault()，否则表单会在异步请求完成前直接提交
2. 手动提交表单：验证通过时使用原生DOM的submit()方法，避免再次触发jQuery绑定的submit事件，造成无限循环
3. 异常处理：通过try/catch或.fail()捕获请求错误，避免因网络问题导致流程中断

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