PHP+AJAX實現帳號註冊和登錄，附可用demo

時間 2019-11-09

標籤 php+ajax php ajax 實現帳號註冊登錄可用 demo 欄目 PHP 简体版

原文原文鏈接

前言

登錄和註冊已是網站的標配了，因此這是咱們web開發學習過程當中必學的了。其實很容易實現，只須要懂數據庫的增刪改查，還有if_else的條件語句便可作出來。javascript

註冊

RegForm.htmlphp

<!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.phpcss

<?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.htmlhtml

<!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.phpjava

<?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\"}]";
    }
}
?>