前言
登陸和註冊已經是網站的標配了，所以這是我們web開發學習過程中必學的了。其實很容易實現，只需要懂資料庫的增刪改查，還有if_else的條件語句即可做出來。
目錄
css
--Login-Reg.css
server
--LoginUser.php
--RegUser.php
--LoginFrom.html
--RegForm.html
註冊
RegForm.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用者註冊</title>
<link rel="stylesheet" type="text/css" href="css/Login-Reg.css">
</head>
<body>
<h2 id="Reg-text">使用者註冊</h2>
<div id="Form-con">
<form id="form1" onsubmit="return false" action="##" method="post">
<input type="text" name="username" class="inputStyle" placeholder="請輸入賬號"><br/>
<input type="password" name="password" class="inputStyle" placeholder="請輸入密碼"><br/>
<input type="password" name="cpassword" class="inputStyle" placeholder="請確認密碼"><br/>
<input type="submit" class="btnStyle" value="註冊" onclick="RegUser()">
</div>
<div id="Result"></div>
</form>
</body>
<!-- AJAX提交表單 -->
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
function RegUser() {
$.ajax({
type: "POST",//方法
url: "../server/RegUser.php" ,//表單接收url
data: $(`#form1`).serialize(),
success: function (data) {
//提交成功
var result=document.getElementById("Result");
result.innerHTML=data[0].result;
//註冊後跳轉
if (data[0].result == "註冊成功") {
location.href="LoginFrom.html";
}
},
error : function(data) {
//提交失敗
var result=document.getElementById("Result");
result.innerHTML="連線伺服器失敗";
}
});
}
</script>
</html>RegUser.php
<?php
header("Content-type:application/json");
// 註冊賬號驗證
$username = $_POST["username"];//獲取表單POST過來的使用者名稱
$password = $_POST["password"];//獲取表單POST過來的密碼
$cpassword = $_POST["cpassword"];//獲取表單POST過來的重複密碼
//表單過濾
$user = trim($username);//過濾空格
$psw = trim($password);//過濾空格
$cpsw = trim($cpassword);//過濾空格
//開始判斷
if($user == "" && $psw == "" && $cpsw == ""){
echo "[{"result":"都還沒填呢！"}]";
}else if($user == "" && $psw == ""){
echo "[{"result":"賬號和密碼都還沒填呢"}]";
}else if ($psw == "" && $cpsw == "") {
echo "[{"result":"密碼都還沒填呢"}]";
}else if($user == "" && $cpsw == ""){
echo "[{"result":"賬號和重複密碼還沒填呢"}]";
}else if ($user == "") {
echo "[{"result":"賬號還沒填呢"}]";
}else if ($psw == "") {
echo "[{"result":"密碼還沒填呢"}]";
}else if ($cpsw == "") {
echo "[{"result":"重複密碼還沒填呢"}]";
}else if ($psw !== $cpsw) {
echo "[{"result":"兩次輸入密碼不一樣呢"}]";
}else if (strlen($user) < 5){
echo "[{"result":"賬號不能小於5位數"}]";
}else if (strlen($psw) < 8){
echo "[{"result":"密碼不能小於8位數"}]";
}else if (preg_match(`/^[x{4e00}-x{9fa5}]+$/u`, $user)>0){
echo "[{"result":"賬號不能為中文"}]";
}else if (preg_match(`/[x{4e00}-x{9fa5}]/u`, $user)>0){
echo "[{"result":"賬號不能存在中文"}]";
}else if(preg_match("/[`.,:;*?~`!@#$%^&+=)(<>{}]|]|[|/|\|"||/",$user)){
echo "[{"result":"賬號不能存在特殊符號"}]";
}else{
//生成使用者ID，為簡單學習，隨機生成隨機數
$uid = rand(10000,99999);
//密碼MD5加密
$md5psw = MD5($psw);
// 資料庫連線
$con = mysql_connect("localhost","root","root");
mysql_select_db("test", $con);
mysql_query("SET NAMES UTF8");
//查詢資料庫是否有存在該使用者
$exist = mysql_query("SELECT * FROM userlist WHERE username = `$user`");
$exist_result = mysql_num_rows($exist);
if($exist_result){
//如果存在該使用者
echo "[{"result":"該賬號已被註冊"}]";
}else{
//插入資料庫
mysql_query("INSERT INTO userlist (username, password, userid) VALUES (`$user`, `$md5psw`, `$uid`)");
echo "[{"result":"註冊成功"}]";
}
}
?>登陸
LoginFrom.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用者登陸</title>
<link rel="stylesheet" type="text/css" href="css/Login-Reg.css">
</head>
<body>
<h2 id="Reg-text">使用者登陸</h2>
<div id="Form-con">
<form id="form1" onsubmit="return false" action="##" method="post">
<input type="text" name="username" class="inputStyle" placeholder="請輸入賬號"><br/>
<input type="password" name="password" class="inputStyle" placeholder="請輸入密碼"><br/>
<input type="submit" class="btnStyle" value="登陸" onclick="LoginUser()">
</div>
<div id="Result"></div>
</form>
</body>
<!-- AJAX提交表單 -->
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
function LoginUser() {
$.ajax({
type: "POST",//方法
url: "../server/LoginUser.php" ,//表單接收url
data: $(`#form1`).serialize(),
success: function (data) {
var result=document.getElementById("Result");
//提交成功
result.innerHTML=data[0].result;
if (data[0].result == "登陸成功") {
result.innerHTML="登陸成功";
}else if (data[0].result == "fail") {
result.innerHTML="登陸失敗，賬號或密碼錯誤";
}
},
error : function(data) {
//提交失敗的提示詞或者其他反饋程式碼
var result=document.getElementById("Result");
result.innerHTML="連線伺服器失敗";
}
});
}
</script>
</html>LoginUser.php
<?php
header("Content-type:application/json");
// 註冊賬號驗證
$username = $_POST["username"];//獲取表單POST過來的使用者名稱
$password = $_POST["password"];//獲取表單POST過來的密碼
//表單過濾
$user = trim($username);//過濾空格
$psw = trim($password);//過濾空格
//開始判斷
if($user == "" && $psw == ""){
echo "[{"result":"賬號和密碼都沒填呢！"}]";
}else if ($user == "") {
echo "[{"result":"賬號還沒填呢"}]";
}else if ($psw == "") {
echo "[{"result":"密碼還沒填呢"}]";
}else{
// 資料庫連線
$con = mysql_connect("localhost","root","root");
mysql_select_db("test", $con);
mysql_query("SET NAMES UTF8");
//校驗MD5密碼
$md5psw = MD5($psw);
//查詢資料庫賬號密碼是否一致
$exist = mysql_query("SELECT * FROM userlist WHERE username = `$user` AND password = `$md5psw`");
$exist_result = mysql_num_rows($exist);
if($exist_result){
echo "[{"result":"登陸成功"}]";
}else{
echo "[{"result":"fail"}]";
}
}
?>資料庫
自增id –id –int(11)
使用者id –userid — varchar(32)
使用者名稱 –username — varchar(32)
密碼 –password — varchar(32)
註冊時間 –regtime –timestamp
demo
http://www.likeyunba.com/demo…
Author：TANKING
web:http://likeyunba.com
WeChat:likeyunba520
Date:2019-2-2