使用JavaScript Fetch()时如何展示PHP后端返回的验证错误信息

调整PHP后端返回逻辑 #

你需要将后端的输出统一改为JSON格式，方便前端区分请求成功/失败状态、读取对应提示信息，修改后的PHP代码如下：

<?php
// 首先设置返回格式为JSON，避免乱码和解析错误
header('Content-Type: application/json');
// 初始化返回数据结构
$result = [
    'success' => false,
    'errors' => [],
    'message' => ''
];

// 注：$postTitle是HTML表单提交的文章标题对应的变量
if(!preg_match('/^[a-zA-Z0-9\s]+$/', $postTitle)) {
    $result['errors'][] = "文章标题仅支持字母、数字和空格";
}

// 无错误则处理提交请求
if (empty($result['errors'])) {
    try {
        // 用于更新数据库中文章/帖子信息的PDO预处理语句
        // 执行成功后修改状态为成功
        $result['success'] = true;
        $result['message'] = '提交成功';
    } catch (PDOException $e) {
        $result['errors'][] = "系统错误：" . $e->getMessage();
    }
}

// 输出JSON格式结果并终止后续逻辑
echo json_encode($result);
exit;
?>

修改前端Fetch提交逻辑 #

你之前的代码不管请求结果都会直接删除表单，导致错误信息没有地方展示，需要把删除逻辑移到成功分支，同时新增错误信息渲染逻辑，修改后的JS代码如下：

const forms = document.querySelectorAll('form');

forms.forEach(item => {
    item.addEventListener("submit", function(e) {
        e.preventDefault();
        const formData = new FormData(this);
        // 先获取表单的父容器，方便后续插入错误信息
        const formParent = this.parentElement;

        fetch("news-posts.php", {
            method: 'post',
            body: formData
        }).then(function(response){
            // 改为解析JSON格式的返回值
            return response.json();
        }).then(function(result){
            if (result.success) {
                // 提交成功才删除表单，可按需加成功提示
                item.remove();
                alert(result.message);
            } else {
                // 提交失败，渲染所有错误信息
                let errorHtml = '';
                result.errors.forEach(msg => {
                    errorHtml += `<p style="color: red;">你有一个错误：${msg}</p>`;
                });
                // 把错误信息插入到表单前
                formParent.insertAdjacentHTML('afterbegin', errorHtml);
            }
        }).catch(function (error){
            // 处理请求失败的情况（如网络错误、后端返回格式错误）
            formParent.insertAdjacentHTML('afterbegin', '<p style="color: red;">网络异常，请稍后重试</p>');
            console.error(error);
        })
    })
})

如果需要保留原有的PHP错误输出风格，也可以直接让后端返回HTML字符串，前端拿到后直接插入到页面即可，不需要解析JSON。

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