登录失败提示优化技巧

还在为用户登录/注册失败的错误提示问题困扰？本文为你提供一套有效的解决方案，助力开发者提升用户体验。文章深入分析了常见的错误处理方法，并结合前端JavaScript和后端PHP代码示例，详细讲解如何实现可靠且易于理解的错误提示功能。前端部分，我们将学习如何使用fetch API发起登录请求，并根据后端响应动态显示错误信息；后端部分，重点介绍PHP如何验证用户登录信息，并返回包含错误信息的JSON响应。此外，本文还对HTML结构和globals.php文件进行了优化建议，确保错误信息能够准确、及时地呈现给用户。掌握这些技巧，让你的用户不再为登录失败而茫然！

本文旨在帮助开发者解决用户登录或注册失败时显示错误提示的问题。通过分析常见的错误处理方式，并结合前端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 中，需要预留一个区域用于显示错误信息。

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

      <div class="errorMessage" style="display: none;">
        <!-- 错误信息将显示在这里 -->
      </div>

      <div class="wrapInput">
        &lt;input type=&quot;text&quot; name=&quot;email&quot; placeholder=&quot;Email...&quot;&gt;
      </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);
}

改进说明:

• 移除不必要的变量: 移除了与登录错误处理无关的 $login_title 和 $item_title 变量。
• 动态设置 $login_error: 不再在 globals.php 中定义 $login_error 变量，而是在每次登录尝试时动态设置。

总结

通过以上步骤，可以实现一个可靠的用户登录失败错误提示功能。 前端 JavaScript 代码负责发起登录请求并显示错误信息，后端 PHP 代码负责验证登录信息并返回错误信息。 这种前后端分离的方式，使得代码结构更加清晰，易于维护。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《登录失败提示优化技巧》文章吧，也可关注golang学习网公众号了解相关技术文章。