实现用户登录失败错误提示的正确方法-php教程-PHP中文网

实现用户登录失败错误提示的正确方法

聖光之護

发布： 2025-07-13 18:00:31

原创

555人浏览过

实现用户登录失败错误提示的正确方法

本文旨在帮助开发者解决用户登录失败时显示错误提示的问题。通过分析常见错误原因，提供清晰的代码示例，并强调关键注意事项，确保开发者能够有效地向用户反馈登录状态，提升用户体验。本文将重点介绍如何在 PHP 后端和 JavaScript 前端配合，实现可靠的错误提示机制。

在构建用户登录功能时，向用户提供清晰的错误反馈至关重要。以下将详细介绍如何实现这一功能，并避免常见的错误。

后端 (PHP) 实现

首先，我们需要在 PHP 后端验证用户登录信息，并在验证失败时返回错误信息。以下是一个改进后的示例：

<?php

require_once('globals.php');

// 验证 email 是否存在
if (!isset($_POST['email'])) {
    _res(400, ['info' => 'email required']);
    exit();
}

// 验证 email 格式是否正确
if (!filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
    _res(400, ['info' => 'email is invalid']);
    exit();
}

// 假设这里有验证用户名密码的逻辑
// 验证失败的例子
// ...
// 验证失败
_res(401, ['info' => 'Invalid email or password']);
exit();

// 验证成功
_res(200, ['info' => 'Login successful']);

// ##############################
function _res($status = 200, $message = [])
{
    http_response_code($status);
    header('Content-Type: application/json');
    echo json_encode($message);
    exit();
}

登录后复制

关键点：

使用 _res() 函数统一处理响应，包括设置 HTTP 状态码和 JSON 格式的数据。
返回适当的 HTTP 状态码，例如 400 (Bad Request) 表示客户端错误，401 (Unauthorized) 表示未授权。
_res() 函数使用 http_response_code() 设置状态码。

前端 (JavaScript) 实现

前端 JavaScript 代码负责发起登录请求，并根据后端的响应显示错误信息。

网人信息发布系统(WRMPS)

详细介绍：WRMPS v6.1 to v6.2 功能更新：修正mapbar地图显示不完整修正店铺评论验证码不刷新的问题修正部分用户登录不成功的问题修正文章操作后返回提示出错的问题修正远程视频不能审核的问题修正推广易搜索直达的显示方式修正店铺已注册顶级域名不能绑定问题修正禁止频道时前台频道打开错误的问题...

查看详情

async function login() {
    const form = event.target.form;
    console.log(form);
    let conn = await fetch("api-login", {
        method: "POST",
        body: new FormData(form)
    });
    let res = await conn.json();
    console.log(res);

    if (conn.ok) {
        // 登录成功
        location.href = "items";
    } else {
        // 登录失败
        const errorMessageDiv = document.querySelector('.errorMessage');
        if (errorMessageDiv) {
            errorMessageDiv.textContent = res.info; // 显示错误信息
            errorMessageDiv.style.display = 'block'; // 确保显示错误信息
        } else {
            // 如果不存在 .errorMessage 元素，则创建一个
            const errorDiv = document.createElement('div');
            errorDiv.className = 'errorMessage';
            errorDiv.textContent = res.info;
            form.prepend(errorDiv); // 将错误信息添加到 form 的最前面
        }
    }
}

登录后复制

HTML 结构

<section class="containerLogin">
    <div class="wrapLogin">
        <form onsubmit="return false" class="formLogin" class="loginForm">
            <div class="errorMessage" style="display:none;">
                <!-- 错误信息将显示在这里 -->
            </div>
            <div class="wrapInput">
                <input type="text" name="email" placeholder="Email...">
            </div>
            <!-- 其他输入字段 -->
            <button onclick="login()">Login</button>
        </form>
    </div>
</section>

登录后复制

关键点：