phpxajax實現(xiàn)用戶注冊上

1、.php xajax實現(xiàn)用戶注冊 上php+xajax實現(xiàn)用戶注冊上2020-11-10 01：02首先界面用的第一個Ajax程序的界面，數(shù)據(jù)庫都沒變！下面就以這個這個用戶注冊來復習下xajax的運用！其中文件的布置如下：Class文件夾下有一個文件Class.inc.php，Css下有一個文件Css.css，Images下有個小圖標，設置link rel="shortcut icon"href="./Images/fruit.ico"/這個的，沒什么影響，Include下有兩個文件驗證碼文件ValidateCode.php和xajax處理函數(shù)Regis

2、terChk.php，Js下一個Register.js，XajaxBeta下為0.5Beta-Xajax,注意這里是直接包含。如以以下圖所示：1.首先是構(gòu)建數(shù)據(jù)庫這里直接用的mysql中的test數(shù)據(jù)庫這個是在SQLyog里面復制過來的！共5個字段，其中UserID為主鍵自增，UserName為UNIQUE列，假設以下數(shù)據(jù)庫創(chuàng)立不成功可以自己創(chuàng)立。CREATE TABLEuserinfoUserIDint4NOT NULL auto_increment,UserNamevarchar16character set utf8 collate utf8_unicode_ci NOT NULL,Us

3、erNicvarchar16character set utf8 collate utf8_unicode_ci NOT NULL,UserPwdvarchar32character set utf8 collate utf8_unicode_ci NOT NULL default'',UserEmailvarchar60character set utf8 collate utf8_unicode_ci NOT NULL,PRIMARY KEYUserID,UNIQUE KEYUserNameUserNameENGINE=InnoDB DEFAULT CHARSET=lati

4、n1 2.創(chuàng)立存儲過程ChkUserName檢測用戶名是否存在，返回是記錄的條數(shù)，假設返回0那么數(shù)據(jù)庫中沒此記錄，假設返回1那么表示數(shù)據(jù)庫中有此記錄，從而做相應處理！DELIMITER$DROP PROCEDURE IF EXISTStest.ChkUserName$CREATE PROCEDUREChkUserNamein ChkName varchar16,out param intbegin select count*into param from userinfo where UserName=ChkName；end$DELIMITER；AddUser為添加用戶，即將滿足條件的注冊用戶

5、寫入數(shù)據(jù)庫中DELIMITER$DROP PROCEDURE IF EXISTStest.AddUser$CREATE PROCEDUREAddUserin username varchar16,in usernic varchar16,in userpwd varchar32,in useremail varchar60BEGIN insert into test.userinfoUserName,UserNic,UserPwd,UserEmailvaluesusername,usernic,MD5userpwd,useremail；END$DELIMITER；3.設計注冊的頁面Regist

6、er.php，這里簡單的做了下！效果圖如下：其代碼如下由于是做好了寫的此文章，此頁面中已參加了相關(guān)代碼！?php require_once'./XajaxBeta/xajax_core/xajax.inc.php'；include_once'./Class/Class.inc.php'；require_once'./Include/RegisterChk.php'；$xajax=new xajax；$xajax-registerFunction"ChkUserName"；$xajax-registerFunction"

7、;ChkCode"；$xajax-registerFunction"AddUser"；$xajax-processRequest；?！DOCTYPE html PUBLIC"-/W3C/DTD XHTML 1.0 Transitional/EN""html xmlns="head meta -equiv="Content-Type"content="text/html；charset=gb2312"/title Ajax Register Test/title link type=&q

8、uot;text/css"href="./Css/Css.css"rel="stylesheet"/link rel="shortcut icon"href="./Images/fruit.ico"/script language="javascript"src="./Js/Register.js"/script?php$xajax-printJavascript"./XajaxBeta/"；?/head body onload="do

9、cument.UserReg.elements0.focus；"form name="UserReg"style="margin：0px；"div id="Containner"div class="TopItem"id="TotleChk"請認真填寫以下注冊信息：/div div id="RegisterArea"div class="RegisterDescription"/div div class="RegisterItem&q

10、uot;用戶名：input name="UserName"id="UserName"type="text"class="InputArea"size="25"maxlength="20"onblur="xajax_ChkUserNamexajax.$'UserName'.value；this.className='InputArea'；"onfocus="this.className='InputFocus

11、'；"/label id="UserNameInfo"/label/div div class="RegisterDescription"用戶名只能為6-16個英文字符，不得包括其他字符不區(qū)分大小寫/div div class="RegisterItem"昵稱：input name="UserNic"type="text"class="InputArea"size="32"maxlength="16"onblur=&q

12、uot;ChkUserNic；this.className='InputArea'；"onfocus="this.className='InputFocus'；"/label id="UserNicInfo"/label/div div class="RegisterDescription"昵稱可為漢字英文數(shù)字下劃線等只能為4-16個字符，不得含有特殊字符/div div class="RegisterItem"密碼：input name="Password&qu

13、ot;type="password"class="InputArea"size="25"maxlength="16"onblur="ChkPwd；this.className='InputArea'；"onfocus="this.className='InputFocus'；"/label id="UserPwdInfo"/label/div div class="RegisterDescription"

14、由6-16個英文字母數(shù)字或符號組成/div div class="RegisterItem"確認密碼：input name="ConfirmPassword"type="password"class="InputArea"size="25"maxlength="16"onblur="ConfirmPwdChk；this.className='InputArea'；"onfocus="this.className='Inpu

15、tFocus'；"/label id="ConfirmPwdInfo"/label/div div class="RegisterDescription"請確認剛剛輸入的密碼/div div class="RegisterItem"E-mail：input name="Email"type="text"class="InputArea"size="40"maxlength="60"onblur="ChkEma

16、il；this.className='InputArea'；"onfocus="this.className='InputFocus'；"/label id="EmailInfo"/label/div div class="RegisterDescription"請輸入正確的E-mail地址，方便與您的聯(lián)絡！同時可根據(jù)E-mail找回密碼/div div class="RegisterItem"驗證碼：input name="ConfirmCode"id

17、="ConfirmCode"type="text"class="InputArea"size="10"maxlength="4"onfocus="ChangBtn；this.className='InputFocus'；"onblur="xajax_ChkCodexajax.$'ConfirmCode'.value；this.className='InputArea'；"/label img alt=&quo

18、t;點此更換圖片"src="./Include/ValidateCode.php"name="img"id="img"onclick="ChangeCode"onmousemove="this.style.cursor='hand'；"style="vertical-align：text-bottom；width：60px；height：20px；border：0px；"/label不區(qū)分大小寫填好后點擊空白地方查看label id="Ju

19、dgeCode"/label/div/div div class="BottomItem"input name="BtnSubmit"type="button"class="Btn"id="BtnSubmit"value="waiting"disabled="disabled"onclick="ifChkSubmitxajax_AddUserxajax.getFormValuesUserReg；"/div/div/form i

20、nput id="UserNameFlag"type="hidden"/input id="VerifyCodeFlag"type="hidden"/body/html Css文件Css.css在Css中/*CSS Document*/！-bodyfont-size：12px；color：#333333；text-decoration：none；labelwidth：auto；color：#FF0000；font-weight：bold；margin-left：20px；.Btnwidth：80px；height：

21、24px；background-color：#0099FF；margin-top：3px；color：#FFFFFF；font-weight：bold；font-size：14px；border：1px#0099CC outset；#Containnermargin：50px auto；border：1px#0099FF solid；width：650px；height：400px；.TopItem,.BottomItemwidth：650px；height：30px；text-indent：25px；font-weight：bold；color：#FFFFFF；font-size：14px；

22、line-height：30px；background-color：#0099FF；border-bottom：1px#0066CC solid；.BottomItemborder：0px；border-top：1px#0066CC solid；text-indent：40px；#Containner#RegisterAreaheight：338px；width：100%；.RegisterItem,.RegisterDescriptionwidth：100%；height：35px；line-height：35px；text-indent：30px；.RegisterDescriptionh

23、eight：20px；line-height：20px；text-indent：100px；.InputAreaheight：14px；border：1px#A5ACB2 solid；.InputFocusheight：14px；border：1px#0099FF solid；-4.編寫類Class.inc.php，該文件在Class中?php class DBLayerprotected$DBhost="localhost"；protected$DBUser="root"；protected$DBPwd="*"；protected$

24、DB="test"；/連接數(shù)據(jù)庫選擇DataBase返回翻開連接public function DBConnectionif$Conn=mysql_connect$this-DBhost,$this-DBUser,$this-DBPwdifmysql_select_db$this-DB,$Connmysql_query"set names gb2312"；return$Conn；elsedie"連接數(shù)據(jù)庫失敗！請聯(lián)絡管理員"；elsedie"連接數(shù)據(jù)庫失敗！請聯(lián)絡管理員"；/關(guān)閉數(shù)據(jù)庫連接public functi

25、on Disconnect$connifmysql_close$connreturn true；elsedie"關(guān)閉數(shù)據(jù)庫失??！請聯(lián)絡管理員"；/*功能：檢測用戶名是否已經(jīng)存在*參數(shù)：出入需要檢測的用戶名*返回：返回數(shù)據(jù)庫中有此用戶名的條數(shù)*時間：2020-07-08*/public function ChkUserName$name$conn=$this-DBConnection；mysql_query"call test.ChkUserName'$name',param",$conn；$result=mysql_query"

26、selectparam"；$row=mysql_fetch_row$result；$this-Disconnect$conn；return$row0；/*功能：添加用戶*參數(shù)：用戶名用戶昵稱用戶密碼用戶email*返回：true or false*時間：2020-07-08*/public function AddUsers$username,$usernic,$userpwd,$useremail$conn=$this-DBConnection；ifmysql_query"call test.AddUser'$username','$usernic

27、','$userpwd','$useremail'",$connreturn true；elsereturn false；$this-Disconnect$conn；?5.編寫JS函數(shù)驗證Register.js位于Js文件夾中表單中的某些項，頁面中用戶名和驗證碼運用到了XAJAX,其他的都是JS代碼驗證/JavaScript Document/*時間：2020-07-07功能：對Regiser.html中的一些輸入進展驗證 suchshow*/！-var UserNicFlag=0；var PwdFlag=0；var ConfirmPwdFla

28、g=0；var EmailFlag=0；var whitespace="tnr"；/定義空白字符/判斷是否為空function isEmptys/輸入內(nèi)容搜索var i；ifs=null|s.length=0return true；fori=0；i s.length；i+/在字符串中尋找非空白字符var c=s.charAti；ifwhitespace.indexOfc=-1return false；/在這一點上，所有字符都是空白字符.return true；/取出字符串的長度function GetStrLengthstrvar StrLength=0；forvar i=

29、0；i str.length；i+StrLength+；ifstr.charCodeAti256StrLength+；return StrLength；/比較長度是否在某個合法范圍內(nèi)function ChkLengthstr,min,maxifGetStrLengthstr=min&&GetStrLengthstr=maxreturn true；elsereturn false；/檢測昵稱輸入是否合法function ChkUserNicvar Nic=document.UserReg.UserNic.value；ifChkLengthNic,4,16document.getE

30、lementById"UserNicInfo".innerHTML="font color="#009933"輸入合法font"；document.getElementById"UserNic".style.borderColor="#0099CC"；UserNicFlag=1；elsedocument.getElementById"UserNicInfo".innerHTML="請輸入合法的昵稱"；UserNicFlag=0；/檢測密碼function

31、ChkPwdvar Pwd=document.UserReg.Password.value；ifChkLengthPwd,4,16document.getElementById"UserPwdInfo".innerHTML="font color="#009933"輸入合法/font"；document.getElementById"Password".style.borderColor="#0099CC"；PwdFlag=1；ConfirmPwdFlag=0；elsedocument.getE

32、lementById"UserPwdInfo".innerHTML="請輸入6-16個英文字母數(shù)字或符號"；PwdFlag=0；/檢測是否已確認密碼function ConfirmPwdChkifdocument.UserReg.ConfirmPassword.value！=document.UserReg.Password.valuedocument.getElementById"ConfirmPwdInfo".innerHTML="兩次輸入的密碼不匹配"；document.UserReg.Password.va

33、lue=''；document.UserReg.ConfirmPassword.value=''；document.getElementById"UserPwdInfo".innerHTML=''；ConfirmPwdFlag=0；document.UserReg.Password.focus；elseifdocument.UserReg.ConfirmPassword.value=''document.getElementById"ConfirmPwdInfo".innerHTML=&qu

34、ot;請確認密碼！"；ConfirmPwdFlag=0；elsedocument.getElementById"ConfirmPwdInfo".innerHTML="font color="#009933"密碼匹配！/font"；document.getElementById"ConfirmPassword".style.borderColor="#0099CC"；ConfirmPwdFlag=1；/檢測E-Mail function ChkEmailvar regex=/w+-+.w

35、+*w+-.w+*.w+-.w+*$/；var email=document.UserReg.Email.value；if！regex.testemaildocument.getElementById"EmailInfo".innerHTML="請輸入正確的E-mail地址！"；EmailFlag=0；else ifGetStrLengthemail60document.getElementById"EmailInfo".innerHTML="輸入的E-mail地址過長，請重新輸入！"；EmailFlag=0；el

36、sedocument.getElementById"EmailInfo".innerHTML="font color="#009933"輸入合法！/font"；document.getElementById"Email".style.borderColor="#0099CC"；EmailFlag=1；/當驗證碼獲取焦點的是否按鈕變成點擊狀態(tài)function ChangBtndocument.UserReg.BtnSubmit.value='提交'；document.UserReg

37、.BtnSubmit.disabled=false；/更改驗證碼function ChangeCodevar x=document.getElementById"img"；x.src="./Include/ValidateCode.php?tm="+Math.random；/點擊按鈕后檢測是否已全部填寫完畢f(xié)unction ChkSubmitvar UserNameFlag=document.getElementById"UserNameFlag".value；var VerifyCodeFlag=document.getElemen

38、tById"VerifyCodeFlag".value；ifUserNameFlag=1&&UserNicFlag=1&&PwdFlag=1&&ConfirmPwdFlag=1&&EmailFlag=1&&VerifyCodeFlag=1return true；elseifUserNameFlag=0document.getElementById"TotleChk".innerHTML="請檢測用戶名輸入是否合法！"；document.UserReg.Us

39、erName.focus；document.UserReg.UserName.style.borderColor="#ff0000"；return false；else ifUserNicFlag=0document.getElementById"TotleChk".innerHTML="請檢測用戶昵稱輸入是否合法！"；document.UserReg.UserNic.focus；document.UserReg.UserNic.style.borderColor="#ff0000"；return false；el

40、se ifPwdFlag=0document.getElementById"TotleChk".innerHTML="請檢測用戶密碼輸入是否合法！"；document.UserReg.Password.focus；document.UserReg.Password.style.borderColor="#ff0000"；return false；else ifConfirmPwdFlag=0document.getElementById"TotleChk".innerHTML="請檢測是否已確認密碼！&q

41、uot;；document.UserReg.ConfirmPassword.focus；document.UserReg.ConfirmPassword.style.borderColor="#ff0000"；return false；else ifEmailFlag=0document.getElementById"TotleChk".innerHTML="請檢測E-Mail輸入是否合法！"；document.UserReg.Email.focus；document.UserReg.Email.style.borderColor=&

42、quot;#ff0000"；return false；else ifVerifyCodeFlag=0document.getElementById"TotleChk".innerHTML="請檢測驗證碼輸入是否合法！"；document.UserReg.ConfirmCode.focus；document.UserReg.ConfirmCode.style.borderColor="#ff0000"；return false；/-6.注冊碼文件ValidateCode.php，Session為$_SESSION'co

43、de'代碼如下：?php session_start；/圖片類型$type='gif'；/圖片的尺寸$width=50；$height=20；header"Content-type：image/".$type；sranddoublemicrotime*1000000；/生成字符的個數(shù)$randval=randStr4,""；if$type！='gif'&&function_exists'imagecreatetruecolor'$im=imagecreatetruecolor$wid

44、th,$height；else$im=imagecreate$width,$height；/色彩設置$backColor=ImageColorAllocate$im,255,255,255；/背風光imagefilledrectangle$im,0,0,$width-1,$height-1,$backColor；/背景位置$stringColor=ImageColorAllocate$im,0,153,255；imagestring$im,5,8,2,$randval,$stringColor；$ImageFun='Image'.$type；$ImageFun$im；Image

45、Destroy$im；/將顯示在圖片中的文字保存在$_SESSION中$_SESSION'code'=$randval；/產(chǎn)生隨機字符串function randStr$len=6,$format='ALL'switch$formatcase'ALL'：$chars='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz 0123456789'；break；case'CHAR'：$chars='ABCDEFGHIJKLMNOPQRSTUVWXYZabcde

46、fghijklmnopqrstuvwxyz'；break；case'NUMBER'：$chars='0123456789'；break；default：$chars='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz 0123456789'；break；$string=""；/從字符源中隨機獲得字符whilestrlen$string$len$string.=substr$chars,mt_rand%strlen$chars,1；return$string；?7.

47、編寫xajax注冊函數(shù)?php session_start；/檢測用戶名是否被占用function ChkUserName$ChkName$objResponse=new xajaxResponse；$ChkName=strtolower$ChkName；if$ChkName=''$objResponse-assign"UserNameInfo","innerHTML","請輸入用戶名！"；$objResponse-assign"UserNameFlag","innerText"

48、,"0"；else if$ChkName！=''if！eregi"a-z6,16",$ChkName$objResponse-assign"UserNameInfo","innerHTML","用戶名必須是6-16位的英文字符，不區(qū)分大小寫！"；$objResponse-assign"UserNameFlag","innerText","0"；else$DB=new DBLayer；$num=$DB-ChkUserNam

49、e$ChkName；if$num=false$objResponse-assign"UserNameInfo","innerHTML","檢測失??！"；$objResponse-assign"UserNameFlag","innerText","0"；elseif$num=1$objResponse-assign"UserNameInfo","innerHTML","對不起，該用戶名已被使用！"；$objRespon

50、se-assign"UserNameFlag","innerText","0"；else if$num=0$objResponse-assign"UserNameInfo","innerHTML","恭喜，該用戶名可以使用！"；$objResponse-replace"UserNameInfo","innerHTML","恭喜，該用戶名可以使用！","font color='#0099FF'恭喜，該用戶名可以使用！/font"；$objResponse-assign"UserName","style.border