快捷導(dǎo)航

jquery ajax 檢測用戶注冊(cè)時(shí)用戶名是否存在

更新時(shí)間：2009年11月03日 23:37:03 作者：

當(dāng)用戶注冊(cè)需要知道這個(gè)用戶名是否被人使用所以需要在用戶登陸前判斷為了使用戶得到更好的體驗(yàn)，我們使用了jquery的ajax效果，來用戶名是否存在。

首先需要一個(gè)添加年級(jí)的頁面，暫時(shí)叫g(shù)rade.htm
這個(gè)文件需要引入兩個(gè)文件jquery.js（jquery框架文件）和grade.js（驗(yàn)證的單獨(dú)文件）。
下面的input用于輸入用戶名字,id="gradeInfo"是為了顯示提示信息用的。
grade.htm

復(fù)制代碼代碼如下:

 
<input type="text" size="6" name="NAME" id="NAME"/><font color="red">*</font> 
<span id="gradeInfo"></span> 

當(dāng)用戶輸入信息以后，進(jìn)入驗(yàn)證環(huán)節(jié)，看看我們的驗(yàn)證grade.js是怎么寫的。
grade.js

復(fù)制代碼代碼如下:

 
/** 
* 驗(yàn)證用戶名是否重復(fù)的js 
* 
* @name grade.js 
* @author jason<msn:x334@eyou.com> 
* @use 驗(yàn)證用戶名是否存在 
* @todo 
*/ 
$(document).ready(function(){ 
checkConfirm(); 
}); 
//驗(yàn)證用戶名是否存在 
function checkConfirm(){ 
$("#NAME").blur(function(){ 
var gradename = $(this).val(); 
var changeUrl = "GradeAdmin.php?action=check&gradename="+gradename; 
$.get(changeUrl,function(str){ 
if(str == '1'){ 
$("#gradeInfo").html("<font color=\"red\">您輸入的用戶名存在！請(qǐng)重新輸入！</font>"); 
}else{ 
$("#gradeInfo").html(""); 
} 
}) 
return false; 
}) 
} 

上面這段js文件，我只解釋幾個(gè)比較關(guān)鍵的地方。
1、$("#NAME").blur的含義是當(dāng)grade.htm里的id為NAME的表單輸入完以后觸發(fā)動(dòng)作。
2、$(this).val()的含義是取得id為NAME的表單里的值。
3、$.get(changeUrl,function(str)的含義是：運(yùn)行ajax后，changeUrl是要連接的程序地址，str是程序
計(jì)算結(jié)束以后得到的顯示結(jié)構(gòu)。
4、$("#gradeInfo").html的含義是給id為gradeInfo的標(biāo)簽寫入html文件。id為gradeInfo的標(biāo)簽就是指
的grade.htm里的id為gradeInfo的標(biāo)簽，顯示的內(nèi)容會(huì)出現(xiàn)再這個(gè)標(biāo)簽所在的位置。
再看看GradeAdmin.php的計(jì)算形式。
GradeAdmin.php
復(fù)制代碼

復(fù)制代碼代碼如下:

 
if($frm_action == 'check') 
{ 
$gradeName = $_GET['gradename']; 
$gradeAdminObj = new Services_GradeAdmin($db); 
//根據(jù)$gradeName去判斷是否再數(shù)據(jù)庫里存在填入的用戶名字，如果存在返回1，如果 
不存在返回0，這個(gè)返回值是傳到grade.js里。 
$gradeCheck = $gradeAdminObj->getGradeByName($gradeName); 
if(is_numeric($gradeCheck)){ 
echo '1'; 
}else{ 
echo '0'; 
} 
exit(); 
} 

這就是判斷用戶注冊(cè)時(shí)用戶名是否已存在問題

您可能感興趣的文章: