本教學參考自:Create Login Form Using jQuery@FormGet
<!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>
$(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"});
//若需要的話,可把表單隱藏起來
// $(".main").hide();
alert(data);
} else{
alert(data);
}
});
}
});
});
<?php
$connection = mysqli_connect("localhost", "wda1902_shop", "wda1902008009", "wda1902_shop"); // 建立與MySQL伺服器的連接
if (!$connection) { //連接資料庫失敗
die("連接資料庫失敗,請檢查!");
}
$email=$_POST['email1']; //擷取從網頁送過來的變數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{
//檢查輸入的email與密碼是否與資料庫所儲存的相符
$result = mysqli_query("SELECT * FROM registration WHERE email='$email' AND password='$password'");
$data = mysqli_num_rows($result);
if($data==1){
echo "登入成功...";
}else{
echo "Email 或 密碼 是錯誤的...!!!!";
}
}
mysqli_close ($connection); //關閉資料庫連結
?>