实现用户登录失败错误提示的有效方法-小浪学习网

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

本文旨在帮助开发者解决用户登录或注册失败时显示错误提示的问题。通过分析常见的错误处理方式，并结合前端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">         <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); }

改进说明: