以模態登錄錯誤消息

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

只需添加錯誤消息，如下圖所示，如果用戶名密碼錯誤就會去else部分。所以你可以使用$('#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格式的。

更新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：

1. 給你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> 
   

2. 移動你的PHP代碼到另一個文件並給它起個名字就像processLogin.php

3. load jQuery：

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

4. 創建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; 
   });