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

实现用户登录失败错误提示的有效方法

花韻仙語

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

原创

339人浏览过

实现用户登录失败错误提示的有效方法

本文旨在帮助开发者解决用户登录或注册失败时显示错误提示的问题。通过分析常见的错误处理方式，并结合前端JavaScript和后端PHP代码示例，提供一种可靠且易于理解的解决方案，确保用户能够及时获得反馈，提升用户体验。

前端：JavaScript处理登录请求和响应

前端部分负责发起登录请求，并根据后端返回的响应信息，显示相应的错误提示。以下是一个使用 fetch API 发起登录请求的示例：

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) {
    // 登录成功，跳转到items页面
    location.href = "items";
  } else {
    // 登录失败，显示错误信息
    const errorMessageDiv = document.querySelector(".errorMessage");
    if (errorMessageDiv) {
      errorMessageDiv.textContent = res.info || "登录失败，请重试。"; // 显示后端返回的错误信息，或者默认的错误信息
      errorMessageDiv.style.display = "block"; // 确保错误信息显示
    } else {
      // 如果没有找到 .errorMessage 元素，则创建一个
      const containerLogin = document.querySelector(".containerLogin"); // 或者其他合适的父元素
      const newErrorMessageDiv = document.createElement("div");
      newErrorMessageDiv.className = "errorMessage";
      newErrorMessageDiv.textContent = res.info || "登录失败，请重试。";
      containerLogin.prepend(newErrorMessageDiv); // 将错误信息添加到容器的开头
    }
  }
}

登录后复制

关键点：

fetch API: 使用 fetch API 发起 POST 请求到后端的 api-login 接口。
FormData: 使用 FormData 对象将表单数据传递给后端。
conn.ok: 检查 conn.ok 属性，判断请求是否成功（HTTP 状态码 200-299）。
错误处理: 如果请求失败，从后端返回的 JSON 响应中获取错误信息 (res.info)，并将其显示在页面上的 .errorMessage 元素中。
动态创建错误信息元素: 如果页面上不存在 .errorMessage 元素，则动态创建并添加到页面中。

后端：PHP验证登录信息并返回错误信息

后端 PHP 代码负责验证用户的登录信息，如果验证失败，则返回包含错误信息的 JSON 响应。

<?php

require_once('globals.php');

if (!isset($_POST['email'])) {
    _res(400, ['info' => '邮箱不能为空']);
    exit();
}
if (!filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
    _res(400, ['info' => '邮箱格式不正确']);
    exit();
}

// 假设这里还有密码验证等其他逻辑

// ... 密码验证逻辑 ...

// 如果登录失败
_res(401, ['info' => '用户名或密码错误']);
exit();


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

登录后复制

关键点：

输入验证: 首先验证 email 是否存在以及格式是否正确。
_res 函数: 使用 _res 函数统一处理响应，设置 HTTP 状态码和 JSON 响应内容。
HTTP 状态码: 使用合适的 HTTP 状态码，例如 400 (Bad Request) 表示客户端请求错误，401 (Unauthorized) 表示未授权。
JSON 响应: 返回包含 info 字段的 JSON 响应，其中包含错误信息。

HTML：错误信息显示区域

在 HTML 中，需要预留一个区域用于显示错误信息。

动态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 class="errorMessage" style="display: none;">
        <!-- 错误信息将显示在这里 -->
      </div>

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

      <!-- 其他输入字段 -->

    </form>
  </div>
</section>

登录后复制

关键点：

.errorMessage 元素: 创建一个 div 元素，并赋予 errorMessage 类名。
display: none;: 初始状态下，隐藏该元素，只有在出现错误时才显示。

globals.php 的改进

globals.php 文件可以用来定义全局常量和函数。以下是一些改进建议：

<?php

define('_PASSWORD_MIN_LEN', 6);
define('_PASSWORD_MAX_LEN', 20);
define('_USERNAME_MIN_LEN', 5);
define('_USERNAME_MAX_LEN', 20);

// 移除 $login_title 和 $item_title 的定义，因为它们与登录错误处理无关
// $login_title = 'Login';
// $item_title = 'Items';

// 移除 $login_error 的定义，因为应该在每次登录尝试时动态设置
// $login_error = true;

// ##############################
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_ASSOC
    ];
    return new PDO($database_connection, $database_user_name, $database_password, $database_options);
}

登录后复制

改进说明: