常德網站建設
常德網站設計制作建設,常德網頁設計制作建設,常德軟件開發虛擬主機域名注冊 常德網站制作 常德網站設計 常德虛擬主機  
 
常德域名注冊
   域名主機 DNS HOST
   關于賽特 ABOUT SITE
   服務項目 SERVICE PROJECT
   軟件開發 DEVELOPMENT
   解決方案 SOLUTION
   服務流程 CUSTOMER PROCESS
   成功案例 SUCCESS TORIES
   商務合作 COOPERATION
   服務報價 SERVICE PRICE
   聯系賽特 CONTACT SITE
   網站知識 WEBSITE KNOWLEDGE
 您的位置:首頁常德網站制作 - php+ajax實現無刷新表單驗證  
 



php+ajax實現無刷新表單驗證
 
常德網站制作  加入時間:2011/9/16 18:13:08     點擊:6634 常德網站建設  常德網站制作

很多時候,我們在網上注冊個人信息,在提交完頁面后,總得等待頁面刷新來告訴我們注冊是否成功,遇到網絡差的時候,如果注冊了一大串的東西,在經過漫長的 等待頁面刷新后,得到的確是“您的用戶名已被使用”或XXXXXXX不合法,我想大家的心情一定特別不爽,今天就介紹個AJAX實現頁面不刷新注冊+實時 檢測用戶信息的簡單注冊程序,希望對大家有所幫助。好的,先看注冊界面代碼

<table ;831" border="0" align="center" cellpadding="0" cellspacing="0">
<tr style="display:none">
<td height="35" align="center" id="result"> </td>
</tr>
</table>
<table ;100%" height="256" border="0" align="center" cellpadding="1" cellspacing="1">
<tr>
<td ;150" align="left" bgcolor="#FFFFFF"> · 用戶名稱: </td>
<td ;310" align="center" bgcolor="#FFFFFF">
<input name="username" type="text" class="inputtext" id="username" >

<font color="#FF6633">*</font></td>
<td align="left" bgcolor="#FFFFFF" id="check"> 4-16個字符,英文小寫、漢字、數字、最好不要全部是數字。</td>
</tr>
<tr>
<td ;150" align="left" bgcolor="#FFFFFF"> · 用戶密碼:</td>
<td ;310" align="center" bgcolor="#FFFFFF">
<input name="userpwd" type="password" class="inputtext" id="userpwd" >

<font color="#FF6633">*</font> </td>
<td align="left" bgcolor="#FFFFFF" id="pwd"> 密碼字母有大小寫之分。6-16位(包括6、16),限用英文、數字。</td>
</tr>
<tr>
<td ;150" align="left" bgcolor="#FFFFFF"> · 重復密碼:</td>
<td ;310" align="center" bgcolor="#FFFFFF">
<input name="reuserpwd" type="password" class="inputtext" id="reuserpwd"
>

<font color="#FF6633">*</font> </td>
<td align="left" bgcolor="#FFFFFF" id="repwd"> 請再次輸入登錄密碼。</td>
</tr>
</table>

如圖:


紅色部分就是一會要調用的js函數了,當我們選定一個文本框后就會開始調用,現在我們看上面那個頁面包含的ajaxreg.js文件的代碼,里面就是包含了ajax框架和一些判斷函數。
var http_request=false;
function send_request(url){//初始化,指定處理函數,發送請求的函數
http_request=false;
//開始初始化XMLHttpRequest對象
if(window.XMLHttpRequest){//Mozilla瀏覽器
http_request=new XMLHttpRequest();
if(http_request.overrideMimeType){//設置MIME類別
http_request.overrideMimeType("text/xml");
}
}
else if(window.ActiveXObject){//IE瀏覽器
try{
http_request=new ActiveXObject("Msxml2.XMLHttp");
}catch(e){
try{
http_request=new ActiveXobject("Microsoft.XMLHttp");
}catch(e){}
}
}
if(!http_request){//異常,創建對象實例失敗
window.alert("創建XMLHttp對象失!");
return false;
}
http_request.onreadystatechange=processrequest;
//確定發送請求方式,URL,及是否同步執行下段代碼
http_request.open("GET",url,true);
http_request.send(null);
}
//處理返回信息的函數
function processrequest(){
if(http_request.readyState==4){//判斷對象狀態
if(http_request.status==200){//信息已成功返回,開始處理信息
document.getElementById(reobj).innerHTML=http_request.responseText;
}
else{//頁面不正常
alert("您所請求的頁面不正常!");
}
}
}
function usercheck(obj){
var f=document.reg;
var username=f.username.value;
if(username==""){
document.getElementById(obj).innerHTML=" <font color=red>用戶名不能為空!</font>";
f.username.focus();
return false;
}
else{
document.getElementById(obj).innerHTML="正在讀取數據...";
send_request('checkuserreg.php?username='+username);
reobj=obj;
}
}
function pwdcheck(obj){
var f=document.reg;
var pwd=f.userpwd.value;
if(pwd==""){
document.getElementById(obj).innerHTML=" <font color=red>用戶密碼不能為空!</font>";
f.userpwd.focus();
return false;
}
else if(f.userpwd.value.length<6){
document.getElementById(obj).innerHTML=" &lt;font color=red>密碼長度不能小于6位!</font>";
f.userpwd.focus();
return false;
}
else{
document.getElementById(obj).innerHTML=" <font color=red>密碼符合要求!</font>";
}
}
function pwdrecheck(obj){
var f=document.reg;
var repwd=f.reuserpwd.value;
if (repwd==""){
document.getElementById(obj).innerHTML=" <font color=red>請再輸入一次密碼!</font>";
f.reuserpwd.focus();
return false;
}
else if(f.userpwd.value!=f.reuserpwd.value){
document.getElementById(obj).innerHTML=" <font color=red>兩次輸入的密碼不一致!</font>";
f.reuserpwd.focus();
return false;
}
else{
document.getElementById(obj).innerHTML=" <font color=red>密碼輸入正確!</font>";
}
}

不難看出,數據是通過異步傳輸到checkuserreg.php接著回送回信息顯示出來來達到實時檢測用戶名的目的,至于密碼,只作了長度的實時判斷,有興趣的朋友可以擴充功能。來看下checkuserreg.php到底都做了什么:
<?php
header('Content-Type:text/html;charset=GB2312');//避免輸出亂碼
include('inc/config.inc.php');//包含數據庫基本配置信息
include('inc/dbclass.php');//包含數據庫操作類
$username=trim($_GET['username']);//獲取注冊名
//-----------------------------------------------------------------------------------
$db=new db;//從數據庫操作類生成實例
$db->mysql($dbhost,$dbuser,$dbpassword,$dbname);//調用連接參數函數
$db-&gt;createcon();//調用創建連接函數
//-----------------------------------------------------------------------------------
$querysql="select username from cr_userinfo where username='$username'";//查詢會員名
$result=$db-&gt;query($querysql);
$rows=$db-&gt;loop_query($result);
//若會員名已注冊
//-----------------------------------------------------------------------------------
if($rows){
echo" <font color=red>此會員名已被注冊,請更換會員名!</font>";
}
//會員名未注冊則顯示
//-----------------------------------------------------------------------------------
else{
echo" <font color=red>此會員名可以注冊!</font>";
}
if($action==reg){
$addsql="insert into cr_userinfo
values(0,'$username','$userpwd','$time',50,1,'$userquestion','$useranswer')";

$db-&gt;query($addsql);
echo"<img src=images/pass.gif> <font color=red>恭喜您,注冊成功!請點擊<a href=login.php>這里</a>登陸!</font>";
}
$db-&gt;close();//關閉數據庫連接
?&gt;

注釋寫的還算詳細,大家應該都能看懂,再看信息合法后我們提交注冊信息實現無刷新注冊的PHP代碼,senduserinfo.php:
<?php
header('Content-Type:text/html;charset=GB2312');//避免輸出亂碼
include('inc/config.inc.php');//包含數據庫基本配置信息
include('inc/dbclass.php');//包含數據庫操作類
$username=trim($_GET['username']);//獲取注冊名
$userpwd=md5(trim($_GET['userpwd']));//獲取注冊密碼
$time=date("Y-m-d");

//-----------------------------------------------------------------------------------
$db=new db;//從數據庫操作類生成實例
$db->mysql($dbhost,$dbuser,$dbpassword,$dbname);//調用連接參數函數
$db-&gt;createcon();//調用創建連接函數
//-----------------------------------------------------------------------------------
//開始插入數據
//-----------------------------------------------------------------------------------
$addsql="insert into cr_userinfo values(0,'$username','$userpwd','$time',50,1,'$userquestion','$useranswer')";
$db-&gt;query($addsql);
echo"<img src=images/pass.gif> <font color=red>恭喜您,注冊成功!請點擊<a href=login.php>這里</a>登錄!</font>";

$db-&gt;close();//關閉數據庫連接
?&gt;

OK!大功告成,來看看效果圖:
1.


2.


3.


4.


5.


上一條:網站建設asp緩存技術
下一條:簡單實現用JS 音樂選播效果

  常德虛擬主機   客戶列表 合作伙伴 | 工作機會 | 網站制作 | 友情鏈接
 本站關鍵詞:賽特科技 常德網站建設 常德網站開發 常德網站制作 常德網站設計 常德虛擬主機 常德空間域名
  Copyright(c)2008 http://www.vtfqvi.tw 地址:常德市洞庭大道西段170號湖南文理學院院內 賽特科技 湘ICP備08004647號
 
免费麻将苹果安卓版下载 河内五分彩五星必出一码 排列五走势图带连线表 2021年12生肖数字图 mg水果大战游戏 买彩票中奖 七乐彩三等奖概率 百家乐博牌规 河北11选5基本走势图一定牛 马免费资料一肖中特 亿客隆 澳洲幸运5玩法说明 上海快三一定牛今天 ag真人是所有平台共用吗 香港赛马会精准网站 A8百家乐 三分彩免费人工计划软件