利用ajax無重新整理驗證註冊資訊

阿新 • • 發佈：2019-01-03

其大概思路如下:
一.把註冊的html頁面做好(html+css)
1.不需要form表單，直接用div包著
2.需要四個標籤來顯示正確、錯誤的資訊顯示
3.不用submit提交按鈕，直接用button
如圖：

二.把ajax做成一個函式，通過傳簡單的引數可以與伺服器進行資料交換.
1.這個ajax函式前面有一篇如何處理利用ajax處理返回資料的文章中詳細說明了。
2.ajax函式需要三個引數，url，jsonData，getMsg。這裡的url都是regProcess.php，jsonData則是要傳到伺服器驗證的資料，getMsg就是要獲取返回的資料的函式.
3.重複第2步驟就可以驗證完四個資訊
三.做一個處理註冊資訊的regProcess.php檔案
1.這個就是要處理ajax傳過來的資料，注意傳送方式是POST所以接收方式也是POST
2.把資料都接收到以後，就是進行驗證，判斷了。最重要的還是能否把資料接收成功，千萬不能接收錯資料.
這裡要注意一下，有一些特殊字元在傳到伺服器的的時候會顯示不正確，例如‘+’會被顯示成‘ ’空格，詳細的資訊請自行搜尋.所以伺服器接收的時候如果會有特殊字元傳過來，需要進行編碼後才能正確使用.php使用urlencode這個函式來進行url編碼.

四.把需要用到的功能編寫成函式，放到另一個myFunc.php檔案中，然後匯入regProcess.php檔案中直接使用.
1.驗證使用者名稱是否非法，是否已經註冊
2.驗證密碼是否非法，強度有多大
3.驗證密碼是否輸入一致
4.驗證郵箱是否非法，是否已經註冊
5.儲存使用者資訊到資料庫
然後在regProcess.php中，使用這些函式，直接處理返回的錯誤程式碼即可。
五.返回處理後的資料，這裡我以字串的json形式返回，然後JS再進行解析.
1.返回的資料要拼接成json的格式.
json格式: {name1:value1,name2:value2};
但是我們要返回的實際是是字串，所以應該這樣’{“name1”:”value1”,”name2”:”value2”}’;
2.返回到前端後用JS的eval函式解析成一個json物件.
例如:var json = eval(‘(‘+oAjax.responseText+’)’);
3.把驗證的資訊顯示在對應的input後面。
4.點選註冊，一次性提交所有資料，如果沒有錯則保持註冊使用者資訊，並提示註冊成功.

註冊成功效果如下圖:

資料庫也把剛註冊的資訊更新了

註冊失敗效果如下圖:

下面是主要的程式碼:
html程式碼

<div id="reg">
        <label>使用者名稱:<input type="text" id="username" /></label><label></label><br /><br />
        <label>密碼:<input type="password" id="passw" /></label><br 
 /><br />
        <label>確認密碼:<input type="password" id="repassw" /></label><br /><br />
        <label>郵箱:<input type="text" id="email" /></label><br /><br />
        <button id="btn">註冊</button>
        <span id="user"></span>
        <span id="pass"></span>
        <span id="rep"></span>
        <span id="em"></span>
    </div>

css程式碼

 #reg{width:400px;height: 300px;position: relative;margin:10px auto}
        #reg label{float:right;position: relative;margin-top: 10px;font-size: 28px;}
        #reg label input{width:250px;height: 40px;font-size: 24px;}
        #reg #btn{width:120px;height: 40px;position: absolute;right: 65px;margin-top: 80px;}
        #reg span{width:200px;position: absolute;right: -210px;font-size: 24px;}
        #reg #user{top:20px;}
        #reg #pass{top:75px;}
        #reg #rep{top:130px;}
        #reg #em{top:185px;}
        .error{color:red;}
        .ok{color:greenyellow;}

js程式碼

 <script src="../../../ajax.js"></script>
    <script>
        window.onload = function ()
        {
            //後臺驗證
            bgProcess();
            //提交註冊資訊，返回註冊成功與否
            $('btn').onclick = function ()
            {
                var jsonData = {username:$('username').value,passw:$('passw').value,
                    repassw:$('repassw').value,email:$('email').value};
                ajax('regProccess.php',jsonData,getInfo,'json');
            };
            function getInfo(info)
            {
                var a = ['username','passw','repassw','email'];
                var b = ['user','pass','rep','em'];
                var flag = true;
                for(var i =0;i<info.length;i++)
                {
                    if(info[i].state == 'false')
                    {
                        flag = false;
                        displayInfo(info[i],b[i],a[i]); //顯示錯誤資訊
                    }
                }
                if(flag) alert('恭喜你註冊成功');
            }
        };
        //後臺驗證
        function bgProcess()
        {
            //驗證使用者名稱
            $('username').onblur = function ()
            {
                var jsonData = {username:this.value};
                ajax('regProccess.php',jsonData,getUser,'json');
            };
            function getUser(msg)
            {
                displayInfo(msg[0],'user','username');
            }
            //驗證密碼
            $('passw').onkeyup = $('passw').onblur= function ()
            {
                var jsonData = {passw:this.value};
                ajax('regProccess.php',jsonData,getPass,'json');
            };
            function getPass(msg)
            {
                displayInfo(msg[1],'pass','passw');
            }
            //確認密碼
            $('repassw').onblur = function ()
            {
                var jsonData = {passw:$('passw').value,repassw:this.value};
                ajax('regProccess.php',jsonData,getRepass,'json');
            };
            function getRepass(msg)
            {
                displayInfo(msg[2],'rep','repassw');
            }
            //驗證郵箱
            $('email').onblur= function ()
            {
                var jsonData = {email:this.value};
                ajax('regProccess.php',jsonData,getEmail,'json');
            };
            function getEmail(msg)
            {
                displayInfo(msg[3],'em','email');
            }
        }
        //顯示資訊
        function displayInfo(msg,id,name)
        {
            $(id).className = (msg.state == 'true')?'ok':'error';
            $(id).innerHTML = msg[name];
        }
        function $(id)
        {
            return document.getElementById(id);
        }
    </script>

myFunc.php程式碼:

<?php
/**
 * @function 驗證使用者名稱
 * @param $username 使用者名稱
 * @return 返回一個$res陣列，裡面包含了錯誤程式碼,1:使用者名稱非法，1：沒有輸入使用者名稱，1：使用者名稱存在
 */
function verifyUser($username)
{
    $res = array();
    //匹配成功返回匹配次數，0表示沒有匹配到,匹配字母、數字、下劃線
    if(preg_match("/^\\w{6,16}$/",$username) == 0)
        $res[] = 1;
    else
        $res[] = 0;
    if(empty($username))
        $res[] = 1;
    else
        $res[] = 0;
    if(verifyData($username,'使用者名稱'))  //驗證該使用者名稱是否被註冊了
        $res[] = 1;
    else
        $res[] = 0;
    return $res;
}

/**
 * @function 驗證密碼是否非法和密碼強度
 * @param $passw 密碼
 * @return $res 密碼強度
 */
function verifyPassw($passw)
{

    $reg1 = '/^[0-9]{8,16}$/'; //純數字
    $reg2 = '/^[a-zA-Z]{8,16}$/';//純字母
    $reg3 = '/^[a-zA-Z\+]{8,16}$/';//純字母+
    $reg4 = '/^[0-9a-zA-Z]{8,16}$/';//數字和字母組合
    $reg5 = '/^[0-9a-zA-Z\+]{8,16}$/';//數字、’+‘和字母組合
    $res;
    if(empty($passw))
        $res = -1;
    else if(preg_match($reg1,$passw))
        $res = 1;
    else if(preg_match($reg2,$passw))
        $res = 1;
    else if(preg_match($reg3,$passw))
        $res = 2;
    else if(preg_match($reg4,$passw))
        $res = 2;
    else if(preg_match($reg5,$passw))
        $res = 3;
    else
        $res = 0;  //非法密碼
    return $res;
}

/**
 * @function 驗證郵箱是否非法和是否已經被註冊使用
 * @param $email 郵箱
 * @return $res 錯誤程式碼
 */
function verifyEmail($email)
{

    $reg = '/^([\w-*\.*])[email protected](\w-?)+(\.\w{2,})+$/';
    $res;
    if(empty($email))
        $res = -1;
    else if(verifyData($email,'郵箱'))
        $res = 1;
    else if(preg_match($reg,$email))
        $res = 2;
    else
        $res = 0;  //非法郵箱
    return $res;
}

/**
 * @function 驗證data是否已經存在
 * @param $data
 * @param $query
 * @return data存在返回1，否則返回0
 */
function verifyData($data,$query)
{
    //1.連線資料庫
    @$db = new MySQLi('localhost','root','root','user_passd');
    if(mysqli_connect_errno())
        die("連線資料庫失敗");
    //2.驗證資料是否存在
    $sql = "select $query from login where $query = '{$data}'";
    $res = $db->query($sql);
    $row = $res->fetch_assoc();
    //3.關閉資料庫
    $db->close();
    return is_null($row)?0:1;
}

/**
 * @function 儲存註冊使用者資訊
 * @param $data 要儲存的資料，一個數組
 * @return bool $res 返回true表示資訊儲存成功，false表示失敗
 */
function saveRegInfo($data)
{
    //1.連線資料庫
    @$db = new MySQLi('localhost','root','root','user_passd');
    if(mysqli_connect_errno())
        die("連線資料庫失敗");
    //2.插入資料
    $sql = "insert into login values('{$data[0]}','{$data[1]}','{$data[2]}')";
    $res = $db->query($sql);
    //3.關閉資料庫
    $db->close();
    return $res;
}

regProcess.php程式碼

<?php

header("Content-Type:text/html;charset=utf-8");
//禁用快取,是為了資料一樣的前提下還能正常提交，而不是快取資料
header("Cache-Control:no-cache");
include('myFunc.php');  //包含我的函式庫
$username = isset($_POST['username'])?$_POST['username']:'';  //獲取使用者名稱
$passw =isset($_POST['passw'])?urlencode($_POST['passw']):'';        //獲取密碼
$repassw = isset($_POST['repassw'])?urlencode($_POST['repassw']):'';  //獲取確認密碼
$email = isset($_POST['email'])?$_POST['email']:'';  //獲取郵箱
$info='[';          //存放返回頁面的資料
$isSucceed = 0;  //判斷註冊是否成功,如果最後結果為4，則意味著全部正確，註冊成功
//1.驗證使用者名稱是否非法
$res1 = verifyUser($username);
if($res1[1])
    $info.='{"username":"請輸入使用者名稱","state":"false"}';
else if($res1[0])
    $info.='{"username":"使用者名稱非法","state":"false"}';
else if($res1[2])
    $info.='{"username":"使用者名稱已存在","state":"false"}';
else
{
    $info.='{"username":"使用者名稱可用","state":"true"}';
    ++$isSucceed;
}
$info.=',';
//2.驗證密碼是否非法和強度
$res2 = verifyPassw($passw);
if($res2 == -1)
    $info.='{"passw":"請輸入密碼","state":"false"}';
else if($res2 == 0)
    $info.='{"passw":"密碼非法","state":"false"}';
else
{
    if($res2 == 1)
    $info.='{"passw":"密碼強度較弱","state":"true"}';
    else if($res2 == 2)
    $info.='{"passw":"密碼強度中等","state":"true"}';
    else if($res2 == 3)
    $info.='{"passw":"密碼強度較強","state":"true"}';
    ++$isSucceed;
}

$info.=',';

//3.確認密碼
if(empty($repassw))
    $info.='{"repassw":"請先輸入密碼","state":"false"}';
else if($passw == $repassw)
{
    $info.='{"repassw":"密碼一致","state":"true"}';
    ++$isSucceed;
}
else
    $info.='{"repassw":"密碼不一致","state":"false"}';
$info.=',';

//4.驗證郵箱
$res3 = verifyEmail($email);
if($res3 == -1)
    $info.='{"email":"請輸入郵箱","state":"false"}';
else if($res3 == 0)
    $info.='{"email":"郵箱非法","state":"false"}';
else if($res3 == 1)
    $info.='{"email":"此郵箱已被註冊","state":"false"}';
else if($res3 == 2)
{
    $info.='{"email":"此郵箱可用","state":"true"}';
    ++$isSucceed;
}
//儲存使用者註冊資訊
if($isSucceed == 4)
    saveRegInfo(array($username,$passw,$email));
echo $info.=']';

這個例子雖然簡單吧，但是還是可以讓新手大概瞭解一下前端是怎麼傳資料給後端的，後端又是怎麼返回資料給前端的.

利用ajax無重新整理驗證註冊資訊

利用ajax無重新整理驗證註冊資訊

ThinkPHP+JQuery實現ajax無重新整理登入驗證（詳解+相關問題）

驗證碼無重新整理驗證（AJAX技術）

ajax無重新整理呼叫struts2框架中的Action，以使用者登入驗證為例

Tp框架裡進行ajax無重新整理查詢

django_forms元件__作業之用ajax傳送資料驗證註冊

Ajax 無重新整理登陸

淺談TP5的ajax無重新整理分頁

ajax無重新整理下載檔案虛擬form

無重新整理表單資訊提交，使用HTML5新技術FormData

laravel ajax無重新整理替換圖片並改變資料表狀態值

利用ajaxSubmit無重新整理非同步上傳匯入Excel，無重新整理提交表單

關於Ajax無重新整理分頁技術的一些研究 c#

Ajax無重新整理使用者登入

Laravel 5.1之Ajax無重新整理分頁

jquery.page.js實現ajax無重新整理分頁

AJAX 無重新整理文字框提示條,用層來提示[原創]

ajaxfileupload.js外掛結合一般處理檔案實現Ajax無重新整理上傳

SpringMVC結合ajaxfileupload.js實現ajax無重新整理檔案上傳

jquery ajax 無重新整理上傳檔案到servlet

利用ajax無重新整理驗證註冊資訊

相關推薦