PHP注册表单错误显示提示、提交成功跳转的实现方案

核心问题有两个：一是原有前端JS存在语法错误导致提交拦截失效，表单走默认提交逻辑；二是PHP后端没有按前端要求返回JSON格式响应，直接输出文本/跳转。

1. 修正后的前端代码 #

<script>
document.querySelector(".register form").addEventListener("submit", async (e) => {
    e.preventDefault();
    const form = e.target;
    const msgBox = document.querySelector('.msg');
    // 提交前清空旧提示
    msgBox.textContent = '';
    try {
        const body = new FormData(form);
        const res = await fetch(form.action, {
            method: "POST",
            headers: {
                "Accept": "application/json" // 告知PHP端需要返回JSON格式响应
            },
            body: body
        });
        const data = await res.json();
        if (res.ok) {
            // 提交成功跳转
            location.href = data.location;
        } else if (res.status === 400) {
            // 验证失败显示错误到指定位置
            msgBox.textContent = data.message;
        }
    } catch (err) {
        // 异常捕获，避免请求错误时页面无响应
        msgBox.textContent = '提交失败，请稍后重试';
        console.error(err);
    }
})
</script>

<body>
    <div class="msg"></div> <!-- 错误提示展示位置 -->
    <!-- 原有表单代码保持不变 -->
</body>

2. register.php后端改造要求 #

所有原有echo输出错误、header跳转的逻辑全部替换为JSON格式返回，示例代码如下：

<?php
// 开头统一设置返回JSON格式
header('Content-Type: application/json; charset=utf-8');

// 原有表单验证逻辑不变
// --- 验证失败场景示例 ---
if (strlen($_POST['password']) < 6) {
    http_response_code(400);
    echo json_encode([
        'message' => '密码长度不能少于6位'
    ]);
    exit; // 终止后续执行
}
if (用户名已存在判断逻辑) {
    http_response_code(400);
    echo json_encode([
        'message' => '该用户名已被注册'
    ]);
    exit;
}

// --- 验证成功场景 ---
// 原有用户入库逻辑不变
echo json_encode([
    'location' => 'home.php'
]);
exit;
?>

注意：PHP代码中不能有JSON输出之外的多余内容（包括HTML、空格、换行等），否则会导致前端JSON解析失败。

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