PHP结合JS实现登录/注册无效时显示错误信息的问题求助

安全阿岳

2026-9-29

问题核心原因

你混淆了服务端预渲染和前端异步请求的逻辑边界：

页面上的$login_error判断是PHP在页面首次加载到浏览器之前执行的，页面渲染完成后，服务端的PHP变量就和前端页面没有关联
登录请求是通过fetch异步发送的，API接口进程里设置的$login_error不会修改已经渲染完成的前端页面内容，自然无法触发提示

修复方案

第一步：修改前端HTML结构

给错误提示区域加唯一ID，默认隐藏，不需要服务端预渲染判断：

<section class="containerLogin">
<div class="wrapLogin">
    <!-- 原form标签两个class属性可以合并，不影响功能但更规范 -->
    <form onsubmit="return false" class="formLogin loginForm">
        <!-- 去掉原PHP判断逻辑，固定错误提示结构默认隐藏 -->
        <div id="loginErrorTip" class="errorMessage" style="display:none;">
            登录错误，请重试
        </div>
        <div class="wrapInput">
            <input type="text" name="email" placeholder="Email...">
        </div>
        <!-- 其余输入字段代码保留 -->

第二步：修改前端登录JS逻辑

异步请求失败时主动操作DOM显示错误提示：

async function login() {
    const form = event.target.form
    const errorTip = document.getElementById('loginErrorTip')
    // 发起请求前先隐藏历史错误提示
    errorTip.style.display = 'none'
    let conn = await fetch("api-login", {
        method: "POST",
        body: new FormData(form)
    })
    let res = await conn.json()
    if (conn.ok) {
        location.href = "items"
    } else {
        // 登录失败，显示错误，可直接使用接口返回的错误信息
        errorTip.textContent = `登录失败：${res.info || '请稍后重试'}`
        errorTip.style.display = 'block'
    }
}