验证后从PHP向HTML传递消息及错误密码提示实现方案

一、纯PHP同步方案（新手友好，快速实现） #

这种方案不需要JS基础，通过页面跳转传递状态，容易上手。

1. 将静态登录页改为PHP文件（LoginTest.php） #

把原来的LoginTest.html重命名为LoginTest.php，嵌入PHP代码处理后端返回的状态：

<!DOCTYPE html>
<html>
<head>
    <title>登录</title>
    <style>
        .success { color: #2ecc71; font-weight: bold; }
        .error { color: #e74c3c; font-weight: bold; }
    </style>
</head>
<body>
    <?php
    // 接收后端传递的状态参数
    $notice = '';
    $class = '';
    if (isset($_GET['status'])) {
        switch ($_GET['status']) {
            case 'login_ok':
                $notice = '登录成功！';
                $class = 'success';
                break;
            case 'login_fail':
                $notice = '用户名或密码错误，请重试';
                $class = 'error';
                break;
        }
    }
    ?>

    <!-- 显示提示消息 -->
    <?php if ($notice): ?>
        <p class="<?php echo $class; ?>"><?php echo $notice; ?></p>
    <?php endif; ?>

    <!-- 登录表单 -->
    <form action="dbloginTest.php" method="POST">
        <div>
            <label>用户名：</label>
            <input type="text" name="username" required>
        </div>
        <div>
            <label>密码：</label>
            <input type="password" name="password" required>
        </div>
        <button type="submit">登录</button>
    </form>
</body>
</html>

2. 修改dbloginTest.php的校验逻辑 #

在数据库校验完成后，通过跳转传递状态：

<?php
// 替换为你的数据库连接信息
$db_host = 'localhost';
$db_user = 'root';
$db_pass = 'your_db_password';
$db_name = 'your_db_name';

// 建立数据库连接
$conn = mysqli_connect($db_host, $db_user, $db_pass, $db_name);
if (!$conn) {
    die('数据库连接失败：' . mysqli_connect_error());
}

// 接收表单提交的账号密码
$username = trim($_POST['username'] ?? '');
$password = trim($_POST['password'] ?? '');

// 安全查询：使用预处理语句防止SQL注入
$stmt = mysqli_prepare($conn, "SELECT password FROM users WHERE username = ?");
mysqli_stmt_bind_param($stmt, 's', $username);
mysqli_stmt_execute($stmt);
$result = mysqli_stmt_get_result($stmt);

// 校验逻辑
if ($user = mysqli_fetch_assoc($result)) {
    // 注意：数据库必须存储密码哈希值，不要明文存储！
    if (password_verify($password, $user['password'])) {
        // 登录成功，跳转回登录页并传递成功状态
        header('Location: LoginTest.php?status=login_ok');
        exit;
    }
}

// 用户名不存在或密码错误，跳转回登录页传递失败状态
header('Location: LoginTest.php?status=login_fail');
exit;

mysqli_close($conn);
?>

二、简易Ajax异步方案（无刷新提示） #

如果想要页面不刷新就能显示提示，用原生JS实现简单Ajax，不需要框架：

1. 修改LoginTest.html（保留静态HTML，添加JS） #

<!DOCTYPE html>
<html>
<head>
    <title>登录</title>
    <style>
        .success { color: #2ecc71; font-weight: bold; }
        .error { color: #e74c3c; font-weight: bold; }
    </style>
</head>
<body>
    <div id="tip-box"></div>

    <form id="login-form">
        <div>
            <label>用户名：</label>
            <input type="text" name="username" required>
        </div>
        <div>
            <label>密码：</label>
            <input type="password" name="password" required>
        </div>
        <button type="submit">登录</button>
    </form>

    <script>
        // 监听表单提交事件
        document.getElementById('login-form').addEventListener('submit', function(e) {
            e.preventDefault(); // 阻止表单默认跳转

            const tipBox = document.getElementById('tip-box');
            const formData = new FormData(this);

            // 发送Ajax请求
            const xhr = new XMLHttpRequest();
            xhr.open('POST', 'dbloginTest.php', true);
            xhr.onload = function() {
                if (xhr.status === 200) {
                    const res = JSON.parse(xhr.responseText);
                    if (res.success) {
                        tipBox.textContent = '登录成功！';
                        tipBox.className = 'success';
                        // 可选：登录成功后跳转到主页
                        // setTimeout(() => window.location.href = 'home.php', 1500);
                    } else {
                        tipBox.textContent = '用户名或密码错误';
                        tipBox.className = 'error';
                    }
                }
            };
            xhr.send(formData);
        });
    </script>
</body>
</html>

2. 修改dbloginTest.php返回JSON结果 #

<?php
// 数据库连接信息
$db_host = 'localhost';
$db_user = 'root';
$db_pass = 'your_db_password';
$db_name = 'your_db_name';

$conn = mysqli_connect($db_host, $db_user, $db_pass, $db_name);
if (!$conn) {
    echo json_encode(['success' => false]);
    exit;
}

$username = trim($_POST['username'] ?? '');
$password = trim($_POST['password'] ?? '');

// 预处理查询
$stmt = mysqli_prepare($conn, "SELECT password FROM users WHERE username = ?");
mysqli_stmt_bind_param($stmt, 's', $username);
mysqli_stmt_execute($stmt);
$result = mysqli_stmt_get_result($stmt);

$response = ['success' => false];
if ($user = mysqli_fetch_assoc($result)) {
    if (password_verify($password, $user['password'])) {
        $response['success'] = true;
    }
}

// 返回JSON格式结果
header('Content-Type: application/json');
echo json_encode($response);

mysqli_close($conn);
?>

关键注意事项 #

• 绝对不要明文存储密码：数据库中必须存储password_hash()生成的哈希值，用password_verify()校验
• 防止SQL注入：必须使用预处理语句，不要直接拼接SQL字符串
• 同步方案适合新手快速落地，异步方案体验更好，可根据自己的基础选择

内容的提问来源于stack exchange，提问作者The--King 464