使用jQuery實現Login/Registration功能

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

Registration

Login截圖

線上示範

HTML File: registration.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">

    <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/registration.js"></script>

    <title>使用者註冊</title>
  </head>
  <body>
    <div class="container">
      <div class="main">
        <form class="form" method="post" action="#">
          <h2>應用jQuery實現使用者註冊功能</h2>
          <label>姓名 :</label>
          <input type="text" name="dname" id="name">
          <label>Email :</label>
          <input type="text" name="demail" id="email">
          <label>密碼 :</label>
          <input type="password" name="password" id="password">
          <label>再次確認密碼 :</label>
          <input type="password" name="cpassword" id="cpassword">
          <input type="button" name="register" id="register" value="Register">
        </form>
      </div>
    </div>
  </body>
</html>

jQuery File: registration.js

$$(document).ready(function() {
  $("#register").click(function() {
    var name = $("#name").val();
    var email = $("#email").val();
    var password = $("#password").val();
    var cpassword = $("#cpassword").val();
    if (name == '' || email == '' || password == '' || cpassword == '') {
      alert("輸入的欄位不能是空的,請輸入適當的值...!!!!!!");
    } else if ((password.length) < 8) {
      alert("密碼長度至少要8個字元...!!!!!!");
    } else if (!(password).match(cpassword)) {
      alert("輸入的二次密碼不一致,再試一次?");
    } else {
      $.post("register.php", {
        name1: name,
        email1: email,
        password1: password
      }, function(data) {
        if (data == '你已成功註冊.....') {
          $("form")[0].reset();
        }
        alert(data);
      });
    }
  });
});

jQuery ajax - post() 方法

PHP Script: register.php

<?php
  $connection = mysqli_connect("localhost", "wda1902_shop", "wda1902008009", "wda1902_shop"); // 建立與MySQL伺服器的連接
  if (!$connection) { //連接資料庫失敗
    die("連接資料庫失敗,請檢查!");
  }
  $name=$_POST['name1']; //擷取從網頁送過來的資料
  $email=$_POST['email1'];
  $password= sha1($_POST['password1']); //密碼sha1雜湊值, 或者想要用原始密碼儲存,就不需要套用sha1函式
  //  //檢查email位址是否正確與否
  $email = filter_var($email, FILTER_SANITIZE_EMAIL); ////清毒email,去除掉一些非預期字元,像是: <,>,?,#,!, 等
  if (!filter_var($email, FILTER_VALIDATE_EMAIL)){
    echo "無效的Email.......";
  }else{
    $result = mysqli_query("SELECT * FROM registration WHERE email='$email'");
    $data = mysqli_num_rows($result);
    if(($data)==0){
      $query = mysqli_query("insert into registration(name, email, password) values ('$name', '$email', '$password')"); // Insert query
      if($query){
        echo "註冊成功.....";
      }else
      {
        echo "錯誤....!!";
      }
    }else{
      echo "這個email已經註冊過了,請再試另一個email...";
    }
  }
  mysqli_close ($connection);
?>
@import url(https://fonts.googleapis.com/earlyaccess/cwtexkai.css);
h2{
  text-align: center;
  font-size: 24px;
}
hr{
  margin-bottom: 30px;
}
div.container{
  width: 960px;
  height: 610px;
  margin:50px auto;
  font-family: 'cwtexkai', sans-serif;
  position:relative;
}
div.main{
  width: 320px;
  float:left;
  padding: 10px 55px 40px;
  background-color: rgba(187, 255, 184, 0.65);
  border: 15px solid white;
  box-shadow: 0 0 10px;
  border-radius: 2px;
  font-size: 13px;
}
input[type=text],[type=password] {
  width: 97.7%;
  height: 34px;
  padding-left: 5px;
  margin-bottom: 20px;
  margin-top: 8px;
  box-shadow: 0 0 5px #00F5FF;
  border: 2px solid #00F5FF;
  color: #4f4f4f;
  font-size: 16px;
}
label{
  color: #464646;
  text-shadow: 0 1px 0 #fff;
  font-size: 14px;
  font-weight: bold;
}
#login {
  width: 100%;
  background: linear-gradient(#22abe9 5%, #36caf0 100%);
  border: 1px solid #0F799E;
  font-size: 20px;
  margin-top: 15px;
  padding: 8px;
  font-weight: bold;
  cursor: pointer;
  color: white;
  text-shadow: 0px 1px 0px #13506D;
}
#login:hover{
  background: linear-gradient(#36caf0 5%, #22abe9 100%);
}

#register {
  font-size: 20px;
  margin-top: 15px;
  background: linear-gradient(#22abe9 5%, #36caf0 100%);
  border: 1px solid #0F799E;
  padding: 7px 35px;
  color: white;
  text-shadow: 0px 1px 0px #13506D;
  font-weight: bold;
  border-radius: 2px;
  cursor: pointer;
  width: 100%;
}
#register:hover{
  background: linear-gradient(#36caf0 5%, #22abe9 100%);
}

SQL稿

CREATE TABLE registration(
  id int(10) NOT NULL AUTO_INCREMENT,
  name varchar(255) NOT NULL,
  email varchar(255) NOT NULL,
  password varchar(255) NOT NULL,
  PRIMARY KEY (id)
)

記錄註冊資料表格

資料表格建立截圖

使用者註冊

資料表格資料新增