实现用户登录错误提示：PHP 与 JavaScript 协同-php教程-PHP中文网

实现用户登录错误提示：PHP 与 JavaScript 协同

聖光之護

发布： 2025-07-13 18:28:14

原创

527人浏览过

实现用户登录错误提示：php 与 javascript 协同

本文旨在帮助开发者实现用户登录失败时的错误提示功能。通过结合 PHP 后端验证和 JavaScript 前端交互，详细讲解如何检测登录错误并在页面上显示友好的错误信息，提升用户体验。本文将重点介绍变量传递、API 设计和前端展示的最佳实践。

登录错误提示实现详解

实现登录错误提示，需要前后端协同工作。后端负责验证用户凭据，前端负责展示验证结果。以下是详细的实现步骤：

1. 后端 PHP API 设计

PHP API 负责接收前端传递的登录信息，验证用户名和密码，并返回验证结果。关键在于如何将错误信息传递给前端。

<?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();
}

// 模拟用户验证 (实际情况需要连接数据库验证)
if ($_POST['email'] !== 'test@example.com' || $_POST['password'] !== 'password') {
    _res(401, ['info' => 'Invalid email or password']); // 返回 401 状态码和错误信息
    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();
}

登录后复制

关键点:

立即学习“PHP免费学习笔记（深入）”；

状态码 (Status Code): 使用 HTTP 状态码来区分不同的结果。200 表示成功，400 表示客户端错误，401 表示未授权。
JSON 格式: 使用 JSON 格式返回数据，方便前端解析。
错误信息 (Error Message): 在 info 字段中包含具体的错误信息。

2. 前端 JavaScript 处理

前端 JavaScript 负责发送登录请求，接收后端返回的结果，并根据结果显示相应的错误信息。

动态WEB网站中的PHP和MySQL：直观的QuickPro指南第2版

动态WEB网站中的PHP和MySQL详细反映实际程序的需求，仔细地探讨外部数据的验证(例如信用卡卡号的格式)、用户登录以及如何使用模板建立网页的标准外观。动态WEB网站中的PHP和MySQL的内容不仅仅是这些。书中还提到如何串联JavaScript与PHP让用户操作时更快、更方便。还有正确处理用户输入错误的方法，让网站看起来更专业。另外还引入大量来自PEAR外挂函数库的强大功能，对常用的、强大的包

525

查看详情

<section class="containerLogin">
    <div class="wrapLogin">
        <form onsubmit="return false" class="formLogin" class="loginForm">

            <div id="errorMessage" class="errorMessage" style="display:none;">
                There was an error - please try again
            </div>

            <div class="wrapInput">
                <input type="text" name="email" placeholder="Email...">
            </div>
            <div class="wrapInput">
                <input type="password" name="password" placeholder="Password...">
            </div>

            <button onclick="login()">Login</button>
        </form>
    </div>
</section>

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

        const errorMessageDiv = document.getElementById('errorMessage');

        if (conn.ok) {
            // 登录成功
            location.href = "items";
        } else {
            // 登录失败
            errorMessageDiv.textContent = res.info; // 显示错误信息
            errorMessageDiv.style.display = 'block'; // 显示错误提示框
        }
    }
</script>

登录后复制

关键点:

立即学习“PHP免费学习笔记（深入）”；

fetch API: 使用 fetch API 发送 POST 请求。
conn.ok: 检查 conn.ok 属性判断请求是否成功（状态码 200-299）。
错误信息显示: 获取后端返回的错误信息，并将其显示在页面上。

3. globals.php 文件修改 (可选)

globals.php 文件用于定义全局变量和函数。如果要使用$login_error变量，需要确保正确使用。建议直接检查返回值，而不是依赖全局变量。

<?php

define('_PASSWORD_MIN_LEN', 6);
define('_PASSWORD_MAX_LEN', 20);

define('_USERNAME_MIN_LEN', 5);
define('_USERNAME_MAX_LEN', 20);

$login_title = 'Login';
$item_title = 'Items';

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

// ##############################
function _db()
{
    $database_user_name = 'root';
    $database_password = '';
    $database_connection = 'mysql:host=localhost; dbname=mystore; charset=utf8mb4';

    $database_options = [
        PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
        // PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_OBJ
        PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC
    ];
    return new PDO($database_connection, $database_user_name, $database_password, $database_options);
}

登录后复制

注意事项: