登录页面Alert提前显示求助：需点击提交后触发验证提示

问题描述 #

开发关联数据库的登录页面时，设置了登录信息无效或为空时显示Alert提示，但页面加载完成后该提示立即弹出（如显示“Username or Password cannot be blank”），而非用户点击提交按钮后触发。

问题原因 #

PHP代码中使用if (isset($_POST))作为判断条件，而$_POST变量在任何HTTP请求中都始终存在（即使是GET请求，它也是一个空数组），所以页面首次加载时这个条件就会成立，进而执行错误信息的赋值逻辑，导致页面加载时就显示提示。

解决方案 #

修改PHP中的判断条件，仅当用户**提交表单（POST请求）**时才执行验证逻辑，以下是两种常用实现方式：

方式1：检查请求方法为POST #

将if (isset($_POST))替换为if ($_SERVER['REQUEST_METHOD'] === 'POST')，确保只有表单通过POST方式提交时，才执行后续验证代码。

方式2：给提交按钮添加name属性并判断 #

在HTML的提交按钮中添加name="submit"属性，然后在PHP中判断isset($_POST['submit'])。

下面是采用方式1修改后的完整PHP代码：

<?php
// 错误显示配置
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);

require_once "config.php";
session_start();

if (isset($_SESSION['username'])) {
    header('location: home.php');
    exit;
}
$username = "";
$password = $err = "";
// 修改判断条件，仅处理POST请求
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    if (empty(trim($_POST['username'])) || empty(trim($_POST['password']))) {
        $err = "Username or Password cannot be blank";
    } else {
        $username = trim($_POST['username']);
        $password = trim($_POST['password']);
    }
    if (empty($err)) {
        echo "in";
        $sql = "SELECT id,username,password FROM users where username=?";

        $stmt = mysqli_prepare($conn, $sql);
        mysqli_stmt_bind_param($stmt, "s", $param_username);
        $param_username = $username;

        if (mysqli_stmt_execute($stmt)) {
            mysqli_stmt_store_result($stmt);

            // 检查用户名是否存在
            if (mysqli_stmt_num_rows($stmt) == 1) {

                mysqli_stmt_bind_result($stmt, $id, $username, $hashed_password);
                if (mysqli_stmt_fetch($stmt)) {
                    if (password_verify($password, $hashed_password)) {
                        // 密码正确，创建会话
                        session_start();
                        $_SESSION['username'] = $username;
                        $_SESSION['id'] = $id;
                        $_SESSION['loggedin'] = true;

                        header("location: home.php");
                    } else {
                        // 补充密码错误的提示逻辑
                        $err = "Invalid Username or Password";
                    }
                }
            } else {
                $err = "Invalid Username or Password";
            }
        }
    }
}
?>

额外优化 #

原代码中密码验证失败时未设置错误信息，上述修改已补上该逻辑，确保密码错误时也能正确弹出提示。HTML部分无需修改，保持原代码即可。

修改完成后，只有当用户点击“Log in”按钮提交表单时，才会执行验证逻辑并根据结果显示对应的Alert提示。

内容的提问来源于stack exchange，提问作者Mohd Zaid