如何在PHP验证用户输入无效时显示自定义Popup弹窗？

问题说明 #

我正在开发登录功能，要求用户输入无效用户名或密码时显示自定义Popup弹窗（不能用默认alert）。已经通过CSS把Popup的visibility设为hidden，PHP登录逻辑正常，但替换原alert提示时，尝试输出<style>设置.popup的display为block没效果，求可行解决方案。

现有HTML代码 #

<div class="popup">
    <div class="popup-header">
        <span>Wrong Credentials</span>
        <button class="close-button">×</button>
    </div>
    <hr>
    <div class="popup-content">
        <p>Invalid username or password</p>
    </div>
    <div class="popup-buttons">
        <button class="cancel-button">Close</button>
    </div>
</div>

当前PHP代码 #

<?php
include 'connect.php';

if(isset($_POST['login'])){
  $username = $_POST['username'];
  $pass = $_POST['password'];

  $query = "SELECT * FROM tbluseraccount WHERE username = '".$username."' AND password ='".$pass."'";
  $result = mysqli_query($connection, $query);

  if(mysqli_num_rows($result) == 0){
    echo "<script>
      alert('Invalid Credentials');
      // 这里需要写显示Popup的逻辑
    </script>";  

  } else {
    echo "<script>
    alert('Success');
    window.location.href ='mainpage.php';
    </script>";
  }
}
?>

之前尝试的无效代码 #

if(mysqli_num_rows($result) == 0){
    echo "<style>.popup { display: block; }</style>";  
} else {
    echo "<script>
        alert('Success');
        window.location.href = 'mainpage.php';
    </script>";
}

解决方案 #

问题根源 #

你之前用CSS设置的是visibility: hidden，但尝试修改的是display属性——这两个属性互不影响，所以没效果。另外直接输出<style>可能因样式优先级被原有CSS覆盖，更可靠的方式是用JavaScript操作DOM元素样式。

可行实现方式 #

方式1：用JS修改visibility属性

在PHP验证失败时，输出JS代码修改popup的visibility为visible：

if(mysqli_num_rows($result) == 0){
    echo "<script>
        const popup = document.querySelector('.popup');
        popup.style.visibility = 'visible';
    </script>";  
} else {
    echo "<script>
        alert('Success');
        window.location.href = 'mainpage.php';
    </script>";
}

方式2：通过类控制显示（推荐）

先在CSS里定义一个显示popup的类：

.popup.show {
    visibility: visible;
}

然后PHP验证失败时，用JS给popup元素添加这个类：

if(mysqli_num_rows($result) == 0){
    echo "<script>
        document.querySelector('.popup').classList.add('show');
    </script>";  
} else {
    echo "<script>
        alert('Success');
        window.location.href = 'mainpage.php';
    </script>";
}

这种方式更符合样式与逻辑分离的原则，后续调整样式也更方便。

补充：弹窗关闭功能

给关闭按钮和取消按钮绑定事件，点击后隐藏popup：

<script>
// 关闭按钮事件
document.querySelector('.close-button').addEventListener('click', function() {
    document.querySelector('.popup').style.visibility = 'hidden';
    // 用类的方式则写：document.querySelector('.popup').classList.remove('show');
});

// 取消按钮事件
document.querySelector('.cancel-button').addEventListener('click', function() {
    document.querySelector('.popup').style.visibility = 'hidden';
});
</script>

重要提醒：修复SQL注入漏洞 #

你当前的PHP代码存在严重SQL注入风险，建议改用预处理语句：

if(isset($_POST['login'])){
  $username = $_POST['username'];
  $pass = $_POST['password'];

  // 预处理语句写法
  $query = "SELECT * FROM tbluseraccount WHERE username = ? AND password = ?";
  $stmt = mysqli_prepare($connection, $query);
  mysqli_stmt_bind_param($stmt, "ss", $username, $pass);
  mysqli_stmt_execute($stmt);
  $result = mysqli_stmt_get_result($stmt);

  if(mysqli_num_rows($result) == 0){
    echo "<script>
        document.querySelector('.popup').style.visibility = 'visible';
    </script>";  
  } else {
    echo "<script>
        alert('Success');
        window.location.href = 'mainpage.php';
    </script>";
  }
}

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