使用jQuery實現Login/Registration功能
本教學參考自:Create Simple Registration Form Using jQuery@FormGet
Registration
線上示範
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)
)