当前位置：首页 > 文章列表 > 文章 > php教程 > 登录失败提示设置技巧与优化方法

登录失败提示设置技巧与优化方法

2025-07-22 10:21:17 0浏览收藏

IT行业相对于一般传统行业，发展更新速度更快，一旦停止了学习，很快就会被行业所淘汰。所以我们需要踏踏实实的不断学习，精进自己的技术，尤其是初学者。今天golang学习网给大家整理了《登录失败错误提示的正确设置方法》，聊聊，我们一起来看看吧！

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

本文旨在帮助开发者解决用户登录失败时显示错误提示的问题。通过分析常见错误原因，提供清晰的代码示例，并强调关键注意事项，确保开发者能够有效地向用户反馈登录状态，提升用户体验。本文将重点介绍如何在 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 代码负责发起登录请求，并根据后端的响应显示错误信息。

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>

关键点：