使用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); //關閉資料庫連結
?>