PHP+AJAX實現賬號註冊和登陸，附可用demo

TANKING發表於2019-05-13
原文網址 : https://flycode.co/archives/75356
PHP

前言

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

相關文章