PHP實(shí)現(xiàn)用戶登錄注冊(cè)功能

初學(xué)php做了一些比較常見且有用的頁(yè)面，放在上面記錄一下咯
我是用了bootstrap框架里面的模態(tài)框做注冊(cè)登陸頁(yè)面，這樣頁(yè)面比較美觀
頁(yè)面效果：




注冊(cè)成功條件/功能：
1）用戶名不能沖突



2）兩次密碼必須相同

3）用戶注冊(cè)數(shù)據(jù)添加進(jìn)數(shù)據(jù)庫(kù)
4）注冊(cè)/登錄成功之后，用戶自動(dòng)登錄

HTML代碼：

    <link rel="stylesheet" href="css/bootstrap.css">
    <li class="toggle"><a data-toggle="modal" href="#loginer">登錄</a></li>
    <li class="toggle"><a data-toggle="modal" href="#register">注冊(cè)</a></li>
    <li class="toggle hidden"><a id="nicheng" href="##"></a></li>
    <li class="toggle hidden"><a id="logout" href="##">注銷</a></li>
//登錄模態(tài)框
<div id="loginer" class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">請(qǐng)登錄</h4>
            </div>
            <form id="form_login" class="form-horizontal">
                <div class="modal-body">
                    <div class="form-group has-feedback">
                        <label class="col-sm-3 control-label" for="zh1">用戶名：</label>
                        <div class="col-sm-9 require">
                            <input type="text" class="form-control" name="username" id="zh1"
                                   pattern="\w{6,10}" required>
                        </div>
                    </div>
                    <div class="form-group has-feedback">
                        <label class="col-sm-3 control-label" for="pw1">密碼：</label>
                        <div class="col-sm-9 require">
                            <input type="password" pattern="\w{6,10}" class="form-control" name="pwd" id="pw1"
                                   required>
                        </div>
                    </div>
                    <div class="form-group has-feedback">
                        <label class="col-sm-3 control-label" for="yzm">驗(yàn)證碼：</label>
                        <div class="col-sm-5 require">
                            <input type="text" pattern="\d{4}" class="form-control" name="yzm" id="yzm"
                                   required>
                        </div>
                        <div class="col-sm-4">
                            <img src="php/idcode.php" alt="">
                        </div>
                    </div>
                    <div class="form-group has-feedback">
                        <label id="info" class="col-sm-4 control-label pull-left"></label>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">登錄</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">關(guān)閉</button>
                </div>
            </form>
        </div>
    </div>
</div>
//注冊(cè)模態(tài)框
<div id="register" class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabe2"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">請(qǐng)注冊(cè)</h4>
            </div>
            <form id="form_regist" class="form-horizontal">
                <div class="modal-body">
                    <div class="form-group has-feedback">
                        <label class="col-sm-3 control-label" for="zh2">用戶名：</label>
                        <div class="col-sm-9 require">
                            <input type="text" class="form-control" name="username" id="zh2"
                                   pattern="\w{6,10}" required>
                        </div>
                    </div>
                    <div class="form-group has-feedback">
                        <label class="col-sm-3 control-label" for="pw2">密碼：</label>
                        <div class="col-sm-9 require">
                            <input type="password" pattern="\w{6,10}" class="form-control" name="pwd" id="pw2">
                        </div>
                    </div>
                    <div class="form-group has-feedback">
                        <label class="col-sm-3 control-label" for="pw3">確認(rèn)密碼：</label>
                        <div class="col-sm-9 require">
                            <input type="password" pattern="\w{6,10}" class="form-control" name="repwd" id="pw3">
                        </div>
                    </div>
                    <div class="form-group has-feedback">
                        <label class="col-sm-3 control-label" for="lc">昵稱：</label>
                        <div class="col-sm-9 require">
                            <input type="text" pattern="\S{2,10}" class="form-control" name="nc" id="lc">
                        </div>
                    </div>
                    <div class="form-group has-feedback">
                        <label id="wanner" class="col-sm-4 control-label pull-left"></label>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">注冊(cè)</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">關(guān)閉</button>
                </div>
            </form>
        </div>
    </div>
</div>

JS代碼：

<script src="js/jquery-2.1.3.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
    function toggle(){
        $.getJSON("php/get.php",function (res) {
            //獲取當(dāng)前用戶是否登錄
            if(res['flag']){//用戶已經(jīng)登錄，顯示昵稱和注銷選項(xiàng)
                $('li.toggle').toggleClass('hidden');
                $('#nicheng').html(res['nc'])
            }
        });
    }
    $('#form_login').submit(function (e) {/*登錄*/
        e.preventDefault();/*阻止表單默認(rèn)事件，頁(yè)面全局刷新*/
        var data=$('#form_login').serialize();/*將表單里的數(shù)據(jù)包裝起來(lái)*/
        $.getJSON('php/login.php',data,function (res) {
            /*data：將表單里的數(shù)據(jù)傳給php，回調(diào)函數(shù)接受php返回來(lái)的值*/
            if(res==3){//用戶名、密碼、驗(yàn)證碼都輸入正確
                toggle();/*修改首頁(yè)選項(xiàng)菜單*/
                $('#loginer').modal('hide');/*關(guān)閉模態(tài)框*/
            }else if(res==2){
                $('#info').html('用戶名或密碼有誤')
            }else {
                $('#info').html('驗(yàn)證碼有誤')
            }
        })
    });
    $('#logout').click(function () {
        confirm('確定要注銷？');
        $.getJSON('php/logout.php',function (res) {
            if(res)toggle();
        })
    })
    $('#form_regist').submit(function (e) {
        e.preventDefault();
        var data=$('#form_regist').serialize();
        $.getJSON('php/regist.php',data,function (res) {
            if(res==3){
                toggle();
                $('#register').modal('hide');
            }else if (res==2) {
                $('#wanner').html('兩次密碼不一致，請(qǐng)重試！')
            }else if (res==1) {
                $('#wanner').html('用戶名沖突，請(qǐng)重試！')
            }
        })
    });

connect.php(連接數(shù)據(jù)庫(kù))：

<?php
$link=new PDO("mysql:host=localhost;port=3306;dbname=db","root","");
$link->query("set names utf8");

get.php(判斷登錄狀態(tài))：未登錄顯示登錄注冊(cè)選項(xiàng)，用戶登陸后切換顯示成昵稱和注銷選項(xiàng)

<?php
include_once ("connect.php");
session_start();/*開啟會(huì)話*/
if (isset($_SESSION['username'])){
   /* 判斷用戶會(huì)話里用戶名是否存在，即用戶是否登錄*/
    $json['nc']=$_SESSION['nc'];/*把昵稱存起來(lái)，一會(huì)返回給首頁(yè)*/
    $json['flag']=true;/*用戶已經(jīng)登錄，標(biāo)志flag為true*/
}else
    $json['flag']=false;/*用戶已經(jīng)登錄，標(biāo)志flag為true*/
echo json_encode($json);/*返回json*/

regist.php(注冊(cè))：根據(jù)設(shè)置標(biāo)志flag的值判斷注冊(cè)的三種狀態(tài)

<?php
include_once ("connect.php");
$user=$_GET['username'];//獲取表單提交的數(shù)據(jù)
$pwd=$_GET['pwd'];
$repwd=$_GET['repwd'];
$nc=$_GET['nc'];
$row=$link->query("select * from `user` where username='$user'");
/*查詢數(shù)據(jù)庫(kù)中是否存在用戶名相同的用戶*/
if ($row->rowCount()){
    $flag=1;/*存在用戶名相同，即用戶名沖突*/
}else if ($pwd!=$repwd){
   $flag=2;/*兩次密碼不相同*/
}else{/*插入數(shù)據(jù)進(jìn)數(shù)據(jù)庫(kù)*/
    $row=$link->exec("insert into`user`( `username`,  `pwd`，`nc`) values ('$user','$pwd','$nc')");
    session_start();/*打開會(huì)話，將用戶名和昵稱存起來(lái)*/
    $_SESSION['username']=$user;
    $_SESSION['nc']=$nc;
    $flag=3;/*注冊(cè)成功標(biāo)志*/
}
echo $flag;

login.php(登錄)：根據(jù)標(biāo)志flag判斷登錄操作是否成功或哪里出錯(cuò)

<?php
include_once ("connect.php");
session_start();/*開啟會(huì)話*/
$user=$_GET['username'];/*獲取登錄表單提交過(guò)來(lái)的數(shù)據(jù)*/
$pwd=$_GET['pwd'];
$yzm=$_GET['yzm'];
if($yzm==$_SESSION['vCode']){/*當(dāng)用戶輸入的驗(yàn)證碼和圖片驗(yàn)證碼相同時(shí)*/
    $result=$link->query("select * from `user` where username='$user' and pwd='$pwd'");
    $link = null;
    $row = $result->fetch();/*讀取從數(shù)據(jù)庫(kù)獲取的數(shù)據(jù)*/
    if ($row) {/*如果數(shù)據(jù)存在，即用戶登錄成功*/
        $_SESSION['username'] = $row['username'];
        /*將用戶名和昵稱存在服務(wù)器，可以多個(gè)頁(yè)面使用*/
        $_SESSION['nc'] = $row['nc'];
        $flag=3;
    }else{/*用戶名或密碼錯(cuò)誤*/
        $flag=2;
    }
}else{/*驗(yàn)證碼輸入錯(cuò)誤*/
    $flag=1;
}
echo $flag;

logout.php(注銷登錄)：直接銷毀會(huì)話變量，然后get.php里面獲取不到username和nc即判斷用戶已注銷

<?php
session_start();
unset($_SESSION['username']);//銷毀用戶名
unset($_SESSION['nc']);//銷毀昵稱
echo json_encode(true);//返回結(jié)果

登錄頁(yè)面的自動(dòng)生成驗(yàn)證碼代碼，在我的另一篇文里
http://m.itdecent.cn/p/7473f5bdd9c0

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Swift1> Swift和OC的區(qū)別1.1> Swift沒(méi)有地址/指針的概念1.2> 泛型1.3> 類型嚴(yán)謹(jǐn) 對(duì)...
    cosWriter閱讀 11,697評(píng)論 1贊 32
  • Getting Started Burp Suite 是用于攻擊web 應(yīng)用程序的集成平臺(tái)。它包含了許多工具，并為...
    Eva_chenx閱讀 29,270評(píng)論 0贊 14
  • 系統(tǒng)總結(jié)了關(guān)于用戶登錄注冊(cè)的一些知識(shí)，供大家參考。 在互聯(lián)網(wǎng)世界，用戶是一切，如果用戶都只是匆匆過(guò)客那么很難在產(chǎn)品...
    jason_peng閱讀 3,285評(píng)論 0贊 28
  • ￥開啟￥ 【iAPP實(shí)現(xiàn)進(jìn)入界面執(zhí)行逐一顯】 〖2017-08-25 15:22:14〗 《//首先開一個(gè)線程，因...
    小菜c閱讀 7,391評(píng)論 0贊 17
  • 皇皇Heddy閱讀 156評(píng)論 0贊 0

友情鏈接更多精彩內(nèi)容