ajax無重新整理驗證註冊資訊樣本_AJAX相關

ajax無重新整理驗證註冊資訊樣本，其大概思路如下:
一.把註冊的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-*\.*])+@(\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代碼

<?phpheader("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.=']';

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

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援雲棲社區。