使用jQuery實現Login/Registration功能

本教學參考自:Create Login Form Using jQuery@FormGet

login (需要先實現Registration,其中建立使用者資料表格)

HTML File: login.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>使用jQuery實現登入系統</title>
    <link rel="stylesheet" href="css/style.css"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script type="text/javascript" src="js/login.js"></script>
  </head>
  <body>
    <div class="container">
      <div class="main">
        <form class="form" method="post" action="#">
          <h2>使用jQuery實現登入系統</h2>
          <label>Email :</label>
          <input type="text" name="demail" id="email">
          <label>密碼 :</label>
          <input type="password" name="password" id="password">
          <input type="button" name="login" id="login" value="Login">
        </form>
      </div>
    </div>
  </body>
</html>

jQuery File: login.js

$(document).ready(function(){
  $("#login").click(function(){
    var email = $("#email").val();
    var password = $("#password").val();
    // Checking for blank fields. 檢查輸入欄位是否為空…
    if( email =='' || password ==''){
      $('input[type="text"],input[type="password"]').css("border","2px solid red");
      $('input[type="text"],input[type="password"]').css("box-shadow","0 0 3px red");
      alert("輸入的欄位不能是空的,請輸入適當的值...!!!!!!");
    }else {
      //以ajax方式將輸入的值丟給login.php,這個寫法跟我們之前用的方式更簡潔,花些時間理解一下。
      $.post("login.php",{ email1: email, password1:password},
      function(data) {
        if(data=='無效的Email.......') { //從login.php傳回來的值(echo),如果是…
          $('input[type="text"]').css({"border":"2px solid red","box-shadow":"0 0 3px red"});
          $('input[type="password"]').css({"border":"2px solid #00F5FF","box-shadow":"0 0 5px #00F5FF"});
          alert(data);
        }else if(data=='Email 或 密碼 是錯誤的...!!!!'){
          $('input[type="text"],input[type="password"]').css({"border":"2px solid red","box-shadow":"0 0 3px red"});
          alert(data);
        } else if(data=='登入成功...'){
          $("form")[0].reset();
          $('input[type="text"],input[type="password"]').css({"border":"2px solid #00F5FF","box-shadow":"0 0 5px #00F5FF"});
          alert(data);
        } else{
          alert(data);
        }
      });
    }
  });
});

PHP Script: login.php

<?php
  $connection = mysql_connect("localhost", "資料庫帳號", "資料庫密碼"); // 建立與MySQL伺服器的連接
  $db = mysql_select_db("資料庫名字", $connection); // 選擇所要連結的資料庫
  $email=$_POST['email1']; //擷取從網頁送過來的變數email1資料
  $password= sha1($_POST['password1']); //密碼sha1雜湊值, 或者想要用原始密碼儲存,就不需要套用sha1函式
  //檢查email位址是否正確與否
  $email = filter_var($email, FILTER_SANITIZE_EMAIL); //清毒email,去除掉一些非預期字元,像是: <,>,?,#,!, etc.
  if (!filter_var($email, FILTER_VALIDATE_EMAIL)){
    echo "無效的Email.......";
  }else{
    //檢查輸入的email與密碼是否與資料庫所儲存的相符
    $result = mysql_query("SELECT * FROM registration WHERE email='$email' AND password='$password'");
    $data = mysql_num_rows($result);
    if($data==1){
      echo "登入成功...";
    }else{
      echo "Email 或 密碼 是錯誤的...!!!!";
    }
  }
  mysql_close ($connection); //關閉資料庫連結
?>