前言
登陸和註冊已經是網站的標配了，所以這是我們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