本文旨在帮助开发者实现用户登录失败时的错误提示功能。通过结合 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 负责发送登录请求，接收后端返回的结果，并根据结果显示相应的错误信息。
<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); }
注意事项:
- 避免使用全局变量传递错误信息。 直接在 API 的响应中返回错误信息。
- 确保 api-login 对应的 PHP 文件存在，并且能够正确处理登录请求。
- 实际应用中，需要连接数据库验证用户凭据，并进行适当的错误处理。
总结
通过以上步骤，就可以实现一个简单的登录错误提示功能。 关键在于前后端协同，使用 HTTP 状态码和 JSON 格式传递错误信息，并在前端正确显示这些信息。 记住要进行适当的错误处理和安全验证，以确保应用程序的稳定性和安全性。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
