Question

我使用用户名和密码创建了一个登录模式表单。成功登录将重定向到我的管理仪表板。当我尝试在我的登录模式表单下面登录不正确的凭据时，是否有一种方法可以将错误消息“用户名和密码不正确”？

我的模态形式：

  <li class="active">  <a href="#" data-toggle="modal" data-target="#login-modal">Login</a></li>
                  <div class="modal fade" id="login-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
          <div class="modal-dialog">
                <div class="loginmodal-container">
                    <h1>Login</h1><br>
                  <form action="" method="post" name="login">
                    <input type="text" name="username" placeholder="Username" required>
                    <input type="password" name="password" placeholder="Password" required>
                    <input type="submit" name="submit" class="login loginmodal-submit" value="Login">
                  </form>
                </div>
            </div>
          </div>

脚本：

<?php
    require('db1.php');
    session_start();
    if (isset($_POST['username'])){

        $username = stripslashes($_REQUEST['username']);
        $username = mysqli_real_escape_string($con,$username); 
        $password = stripslashes($_REQUEST['password']);
        $password = mysqli_real_escape_string($con,$password);

        $query = "SELECT * FROM `users` WHERE username='$username' and password='".md5($password)."'";
        $result = mysqli_query($con,$query) or die(mysqli_error());
        $rows = mysqli_num_rows($result);
        if($rows==1){
            $_SESSION['username'] = $username;
            header("Location: view.php");
            }else{
                echo "<div class='login-modal'>Username or password is incorrect.<br/>Click here to <a href='index.php'>Login</a></div>";
                }
    }else{
?>

Answer 1

只需添加如下错误消息，如果用户名密码错误，则会转到其他部分。因此，您可以使用$('#login-modal').modal('show');打开模态。

格式：

 <h1>Login</h1><br>
  <?php if(isset($error_msg)){ echo $error_msg; } ?>
 <form action="" method="post" name="login">
 ...
 </form>
<?php if(isset($script)){ echo $script; } ?>

<强> PHP：

if($rows==1){
        $_SESSION['username'] = $username;
        header("Location: view.php");
        }else{
            $error_msg = "<div class='login-modal'>Username or password is incorrect</div>";
            $script = "<script> $(document).ready(function(){ $('#login-modal').modal('show'); }); </script>";

            }

注1：首先是PHP代码然后是HTML代码。这样您就可以以html格式设置$error_msg。

更新1 ：使用Prepared语句并将脚本存储在变量和回显之后，HTML和jQuery包含这样的内容。

    `
    <?php
        require('db1.php');
        session_start();

        if (isset($_POST['username'])){

            $username = stripslashes($_REQUEST['username']);
            $username = mysqli_real_escape_string($con,$username); 
            $password = stripslashes($_REQUEST['password']);
            $password = mysqli_real_escape_string($con,$password);
            $password = md5($password);

            $query = "SELECT * FROM `users` WHERE username=? and password=?";
            $stmt = $con->prepare($query);
                    $stmt->bind_param('ss',$username,$password);
                    $stmt->execute();
            $result=$stmt->get_result();
            $rows  = $result->num_rows;
            $stmt->close();
            //$rows=0;
            if($rows>0){
                $_SESSION['username'] = $username;
                header("Location: view.php");
                }else{
                    $error_msg = "<div class='login-modal'>Username or password is incorrect</div>";
                    $script =  "<script> $(document).ready(function(){ $('#login-modal').modal('show'); }); </script>";
                    }

        }
    ?>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <li class="active">  <a href="#" data-toggle="modal" data-target="#login-modal">Login</a></li>
                      <div class="modal fade" id="login-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
              <div class="modal-dialog">
                    <div class="loginmodal-container">
                        <h1>Login</h1><br>
                        <?php if(isset($error_msg)){ echo $error_msg; } ?>
                      <form action="" method="post" name="login">
                        <input type="text" name="username" placeholder="Username" required>
                        <input type="password" name="password" placeholder="Password" required>
                        <input type="submit" name="submit" class="login loginmodal-submit" value="Login">
                      </form>
                    </div>
                </div>
              </div>

    <?php if(isset($script)){ echo $script; } ?>`

您的代码看起来有SQL注入的可能性，因此请尝试使用预处理语句或PDO来避免SQL注入。

Answer 2

让您的生活更轻松，使用jQuery和AJAX：

为您的结果消息提供form ID和div容器：

<form id="login">
    <input type="text" name="username" placeholder="Username" required>
    <input type="password" name="password" placeholder="Password" required>
    <input type="submit" name="submit" class="login loginmodal-submit" value="Login">
    <div id="results"></div>
</form>

将您的PHP代码移动到另一个文件，并为其命名为processLogin.php

加载jQuery：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

创建JS以使用AJAX：

$('form#login').submit(function(){
    $.ajax({
        url: 'processLogin.php',
        type: 'POST',
        data: $(this).serialize(),
        success: function(msg){
             // you would need to modify your PHP's echo results 
            if(msg){
                $("#results").html(response);
            }else{
                window.location.href = "view.php";
            }
        }
    });
    return false;
});

模态

2 个答案: