關(guān)于PHP和jQuery 注冊(cè)模塊的開發(fā)

2020-03-22 18:22:43

字體：大中小

供稿：網(wǎng)友

本文主要是記錄了開發(fā)PHP+jQuery注冊(cè)模塊的全過程，包含填寫欄目用戶名、郵箱、密碼、重復(fù)密碼、驗(yàn)證碼等，非常的詳細(xì)，推薦給大家

寫了一個(gè)簡(jiǎn)單的PHP+jQuery注冊(cè)模塊，需要填寫的欄目包括用戶名、郵箱、密碼、重復(fù)密碼和驗(yàn)證碼，其中每個(gè)欄目需要具備的功能和要求如下圖：

在做這個(gè)模塊的時(shí)候，很大程度上借鑒了網(wǎng)易注冊(cè)(http://reg.163.com/reg/reg.jsp?product=urs)的功能和樣式。但網(wǎng)易對(duì)于每個(gè)欄目的判斷的做法是：在輸入文字時(shí)，并不給出任何實(shí)時(shí)的檢測(cè)結(jié)果，而在這個(gè)欄目失去焦點(diǎn)時(shí)，才把檢測(cè)的結(jié)果展示出來，這種做法我認(rèn)為會(huì)使用戶在輸入時(shí)視覺上比較統(tǒng)一，看到的是關(guān)于該欄目要求的提示，不會(huì)出現(xiàn)其他信息的打擾，但同時(shí)也不會(huì)得到正在輸入的字符的檢測(cè)提示。所以在做這個(gè)功能的時(shí)候，我把我自認(rèn)為需要實(shí)時(shí)提示的一些信息做了相應(yīng)的加強(qiáng)，比如用戶名長(zhǎng)度超過限制和密碼的長(zhǎng)度以及強(qiáng)弱，并且給郵箱的大寫鎖定做了簡(jiǎn)單的判斷。

注：表單的提交按鈕type為button而不是submit，因此所有欄目的回車( keydown )都統(tǒng)一設(shè)置為將焦點(diǎn)移至下一個(gè)欄目，除了最后一個(gè)欄目驗(yàn)證碼，在驗(yàn)證碼欄目使用回車( keydown )會(huì)觸發(fā)提交事件。

功能分析

用戶名欄目：

流程

①頁面加載完即獲得焦點(diǎn)，獲得焦點(diǎn)時(shí)出現(xiàn)初始說明文字；

②鼠標(biāo)點(diǎn)擊用戶名輸入框，出現(xiàn)初始說明文字；

③輸入字符，即時(shí)提示是否符合長(zhǎng)度要求；

④失去焦點(diǎn)時(shí)首先判斷是否為空，為空時(shí)提示不能為空；非空且長(zhǎng)度滿足要求時(shí)，開始檢測(cè)用戶名是否被注冊(cè)；

⑤用戶名已被注冊(cè)，給出提示，如果沒有注冊(cè)，則提示可以注冊(cè)；

⑥再次獲得焦點(diǎn)時(shí)，不論輸入框中是否有輸入，或是否輸入符合規(guī)定，都出現(xiàn)初始說明文字

⑦回車時(shí)將焦點(diǎn)移至郵箱欄目

如圖：

細(xì)節(jié)

可以使用任意字符，并且字?jǐn)?shù)限制為：中文長(zhǎng)度不超過7個(gè)漢字，英文、數(shù)字或符號(hào)長(zhǎng)度不超過14個(gè)字母、數(shù)字或符號(hào)，即不超過14個(gè)字符

關(guān)于占位符（字符長(zhǎng)度），一個(gè)漢字的占位符是2，一個(gè)英文（數(shù)字）的占位符是1，可以用php語句來計(jì)算字符的長(zhǎng)度

 ?php//php.ini開啟了php_mbstring.dll擴(kuò)展 $str= 博客園小dee  echo (strlen($str)+mb_strlen($str, utf-8 ))/2;

輸出：11

而strlen($str) 輸出的是15：4*3+3，漢字在utf-8編碼下占3個(gè)字節(jié)，英文占1個(gè)，

mb_strlen($str, utf-8 ) 輸出的是7：一個(gè)漢字的長(zhǎng)度是1，

如果用html' target='_blank'>jquery的length來輸出這個(gè)字符串，alert($( #uname ).val().length)，則會(huì)得到長(zhǎng)度7，

這點(diǎn)要注意。

同時(shí)用戶名兩端不能含有空格，在檢測(cè)以及注冊(cè)時(shí)，程序會(huì)自動(dòng)過濾用戶名兩端的空格。

 !-- 用戶名 --  p >register.js公用部分的js代碼：
$(function(){ //說明文字 function notice(showMsg,noticeMsg){  showMsg.html(noticeMsg).attr( class , notice  //顯示錯(cuò)誤信息 function error(showMsg,errorMsg){  showMsg.html(errorMsg).attr( class , error  //顯示正確信息 function success(showMsg,successMsg){  showMsg.html(successMsg)  .css( height , 20px ) .attr( class , success  //計(jì)算字符長(zhǎng)度 function countLen(value){ var len = 0;  for (var i = 0; i value.length; i++) {  if (value[i].match(/[^/x00-/xff]/ig) != null)  len += 2;  else  len += 1;  return len; //......)};
register.js用戶名部分的js代碼：
//檢測(cè)用戶名長(zhǎng)度function unameLen(value){ var showMsg = $( #unamechk  /* (strlen($str)+mb_strlen($str))/2 可得出限制字符長(zhǎng)度的上限, * 例如:$str為7個(gè)漢字: 博客園記錄生活 ,利用上面的語句可得出14, * 同樣,14個(gè)英文,利用上面的語句同樣能得出字符長(zhǎng)度為14 if(countLen(value) 14){ var errorMsg = 用戶名長(zhǎng)度不能超過14個(gè)英文或7個(gè)漢字  error(showMsg,errorMsg);  }else if(countLen(value) == 0){ var noticeMsg = 用戶名不能為空  notice(showMsg,noticeMsg); }else{ var successMsg = 長(zhǎng)度符合要求  success(showMsg,successMsg); return countLen(value); //用戶名 unameLen($( #uname ).val()); $( #uname ).focus(function(){ var noticeMsg = 中英文均可，最長(zhǎng)為14個(gè)英文或7個(gè)漢字  notice($( #unamechk ),noticeMsg); .click(function(){ var noticeMsg = 中英文均可，最長(zhǎng)為14個(gè)英文或7個(gè)漢字  notice($( #unamechk ),noticeMsg); .keyup(function(){ unameLen(this.value); }).keydown(function(){ //把焦點(diǎn)移至郵箱欄目 if(event.keyCode == 13){ $( #uemail ).focus(); .blur(function(){ if($( #uname ).val()!= unameLen(this.value) =14 unameLen(this.value) 0){ //檢測(cè)中 $( #unamechk ).html( 檢測(cè)中... ).attr( class , loading  //ajax查詢用戶名是否被注冊(cè) $.post( ./../chkname.php ,{ //要傳遞的數(shù)據(jù) uname : $( #uname ).val() },function(data,textStatus){ if(data == 0){ var successMsg = 恭喜，該用戶名可以注冊(cè)  $( #unamechk ).html(successMsg).attr( class , success  //設(shè)置參數(shù) nameval = true; }else if(data == 1){ var errorMsg = 該用戶名已被注冊(cè)  error($( #unamechk ),errorMsg); }else{ var errorMsg = 查詢出錯(cuò),請(qǐng)聯(lián)系網(wǎng)站管理員  error($( #unamechk ),errorMsg); }else if(unameLen(this.value) 14){ var errorMsg = 用戶名長(zhǎng)度不能超過14個(gè)英文或7個(gè)漢字  error($( #unamechk ),errorMsg); }else{ var errorMsg = 用戶名不能為空  error($( #unamechk ),errorMsg);//加載后即獲得焦點(diǎn)$( #uname ).focus();
checkname.php代碼：
 ?php header( charset=utf-8  require_once( conn/conn.php  if(isset($_POST[ uname ]) $_POST[ uname ]!= ){ $uname = trim(addslashes($_POST[ uname ])); $sql = select uname from user where uname= .$uname.  if($conne- getRowsNum($sql) == 1){ $state = 1; }else if($conne- getRowsNum($sql) == 0){ $state = 0; }else{ echo $conne- msg_error(); echo $state;
提示文字( Chrome下 )
①初始獲得焦點(diǎn)、再次獲得焦點(diǎn)或點(diǎn)擊時(shí)
②輸入時(shí)實(shí)時(shí)檢測(cè)長(zhǎng)度
 
③刪除至空且未失去焦點(diǎn)時(shí)，使用藍(lán)色圖標(biāo)提示不能為空——用戶在輸入時(shí)看起來不突兀
④失去焦點(diǎn)且不為空，檢測(cè)是否被注冊(cè)( 非常短暫，一閃而過 )
⑤失去焦點(diǎn)時(shí)為空、可以注冊(cè)、已被注冊(cè)時(shí)
用戶名分析至此完畢。
郵箱欄目：
流程
①當(dāng)欄目獲得焦點(diǎn)或者點(diǎn)擊時(shí)不論欄目為空、填寫正確或者填寫錯(cuò)誤時(shí)都出現(xiàn)說明文字；
②用戶輸入時(shí)出現(xiàn)下拉菜單顯示多種郵件后綴供用戶選擇；
③失去焦點(diǎn)時(shí)首先判斷郵箱格式是否正確，如果正確則檢測(cè)郵箱是否被注冊(cè) ；
④在使用回車選擇下拉菜單時(shí)，將自動(dòng)填充郵箱欄目；沒有出現(xiàn)下拉菜單時(shí)，將焦點(diǎn)移至密碼欄目
如圖：
register.html郵箱欄目HTML代碼片段：
 !-- email --  p >下拉功能emailup.js同之前的博文《jQuery實(shí)現(xiàn)下拉提示且自動(dòng)填充的郵箱》，略有修改，注意用回車( keydown和keyup事件)在不同情況下觸發(fā)的不同動(dòng)作：
$(function(){ //初始化郵箱列表 var mail = new Array( sina.com , 126.com , 163.com , gmail.com , qq.com , hotmail.com , sohu.com , 139.com , 189.cn , sina.cn  //把郵箱列表加入下拉 for(var i=0;i mail.length;i++){ var $liElement = $( li >register.js郵箱代碼片段：
//郵箱下拉js單獨(dú)引用emailup.js$( #uemail ).focus(function(){ var noticeMsg = 用來登陸網(wǎng)站，接收到激活郵件才能完成注冊(cè)  notice($( #uemailchk ),noticeMsg); .click(function(){ var noticeMsg = 用來登陸網(wǎng)站，接收到激活郵件才能完成注冊(cè)  notice($( #uemailchk ),noticeMsg); .blur(function(){ if(this.value!= this.value.match(/^[/w-]+(/.[/w-]+)*@[/w-]+(/.[/w-]+)+$/)!=null){ //檢測(cè)是否被注冊(cè) $( #uemailchk ).html( 檢測(cè)中... ).attr( class , loading  //ajax查詢用戶名是否被注冊(cè) $.post( ./../chkemail.php ,{ //要傳遞的數(shù)據(jù) uemail : $( #uemail ).val() },function(data,textStatus){ if(data == 0){ var successMsg = 恭喜，該郵箱可以注冊(cè)  $( #uemailchk ).html(successMsg).attr( class , success  emailval = true; }else if(data == 1){ var errorMsg = 該郵箱已被注冊(cè)  error($( #uemailchk ),errorMsg); }else{ var errorMsg = 查詢出錯(cuò),請(qǐng)聯(lián)系網(wǎng)站管理員  error($( #uemailchk ),errorMsg); }else if(this.value == ){ var errorMsg = 郵箱不能為空  error($( #uemailchk ),errorMsg); }else{ var errorMsg = 請(qǐng)?zhí)顚懻_的郵箱地址  $( #uemailchk ).html(errorMsg).attr( class , error });
提示文字( Chrome下 )
①獲得焦點(diǎn)時(shí)、點(diǎn)擊時(shí)
②輸入時(shí)
③失去焦點(diǎn)為空、格式錯(cuò)誤、已被注冊(cè)、可以注冊(cè)時(shí)分別為
郵箱功能至此結(jié)束。
密碼欄目：
要求
①6-16個(gè)個(gè)字符，區(qū)分大小寫（參考豆瓣和網(wǎng)易）
②密碼不能為同一字符
③實(shí)時(shí)提示是否符合要求以及判斷并顯示密碼強(qiáng)度，：
 1.輸入時(shí)如果為空(刪除時(shí))則用藍(lán)色符號(hào)提示不能為空，超過長(zhǎng)度時(shí)用紅色符號(hào)
 2.密碼滿足長(zhǎng)度但是為相同字符的組合時(shí)：密碼太簡(jiǎn)單，請(qǐng)嘗試數(shù)字、字母和下劃線的組合
 3.密碼強(qiáng)度判斷有多種規(guī)則，有直接依據(jù)長(zhǎng)度和組合規(guī)則作出判斷，也有給每種長(zhǎng)度和組合設(shè)置分?jǐn)?shù)，通過驗(yàn)證實(shí)際密碼的情況計(jì)算出最后分?jǐn)?shù)來判斷強(qiáng)弱。在這個(gè)模塊中采用比較簡(jiǎn)單的一種形式，也是網(wǎng)易注冊(cè)采用的方法：
 密碼滿足長(zhǎng)度且全部為不同字母、全部為不同數(shù)字或全部為不同符號(hào)時(shí)為弱：弱：試試字母、數(shù)字、符號(hào)混搭
 密碼滿足長(zhǎng)度且為數(shù)字、字母和符號(hào)任意兩種組合時(shí)為中
 密碼滿足長(zhǎng)度且為數(shù)字、字母和符號(hào)三種組合時(shí)為強(qiáng)
④輸入時(shí)大寫提示
如圖：
register.html密碼欄目HTML代碼片段：
 p >register.js密碼代碼片段：
function noticeEasy(){ //密碼全部為相同字符或者為123456,用于keyup時(shí)的notice var noticeMsg = 密碼太簡(jiǎn)單，請(qǐng)嘗試數(shù)字、字母和下劃線的組合  return notice($( #upwdchk ),noticeMsg); function errorEasy(){ //密碼全部為相同字符或者為123456,用于blur時(shí)的error var errorMsg = 密碼太簡(jiǎn)單，請(qǐng)嘗試數(shù)字、字母和下劃線的組合  return error($( #upwdchk ),errorMsg); //檢測(cè)密碼長(zhǎng)度函數(shù) //檢測(cè)密碼長(zhǎng)度 function upwdLen(value,func){ var showMsg = $( #upwdchk  if(countLen(value) 16){ var errorMsg = 密碼不能超過16個(gè)字符  error(showMsg,errorMsg); $( #pictie ).hide(); }else if(countLen(value) 6){ //使用notice更加友好 var noticeMsg = 密碼不能少于6個(gè)字符  notice(showMsg,noticeMsg); $( #pictie ).hide(); }else if(countLen(value) == 0){ //使用notice更加友好 var noticeMsg = 密碼不能為空  notice(showMsg,noticeMsg); $( #pictie ).hide(); }else{ upwdStrong(value,func);//如果長(zhǎng)度不成問題,則調(diào)用檢測(cè)密碼強(qiáng)弱 return countLen(value);//返回字符長(zhǎng)度 //檢測(cè)密碼強(qiáng)弱 function upwdStrong(value,func){ var showMsg = $( #upwdchk  if(value.match(/^(.)/1*$/)!=null || value.match(/^123456$/)){ //密碼全部為相同字符或者為123456，調(diào)用函數(shù)noticeEasy或errorEasy func; }else if(value.match(/^[A-Za-z]+$/)!=null || value.match(/^/d+$/)!=null || value.match(/^[^A-Za-z0-9]+$/)!=null){ //全部為相同類型的字符為弱 var successMsg = 弱：試試字母、數(shù)字、符號(hào)混搭  success(showMsg,successMsg); //插入強(qiáng)弱條 $( #pictie ).show().attr( src , images/weak.jpg  pwdval = true; }else if(value.match(/^[^A-Za-z]+$/)!=null || value.match(/^[^0-9]+$/)!=null || value.match(/^[a-zA-Z0-9]+$/)!=null){ //任意兩種不同類型字符組合為中強(qiáng)( 數(shù)字+符號(hào),字母+符號(hào),數(shù)字+字母 ) var successMsg = 中強(qiáng)：試試字母、數(shù)字、符號(hào)混搭  success(showMsg,successMsg); $( #pictie ).show().attr( src , images/normal.jpg  pwdval = true; }else{ //數(shù)字、字母和符號(hào)混合 var successMsg = 強(qiáng)：請(qǐng)牢記您的密碼  success(showMsg,successMsg); $( #pictie ).show().attr( src , images/strong.jpg  pwdval = true; $upper = $( p id=/ upper/ 大寫鎖定已打開 /p  $( #upwd ).focus(function(){ var noticeMsg = 6到16個(gè)字符，區(qū)分大小寫  notice($( #upwdchk ),noticeMsg); $( #pictie ).hide(); .click(function(){ var noticeMsg = 6到16個(gè)字符，區(qū)分大小寫  notice($( #upwdchk ),noticeMsg); $( #pictie ).hide(); }).keydown(function(){ //把焦點(diǎn)移至郵箱欄目 if(event.keyCode == 13){ $( #rupwd ).focus(); .keyup(function(){ //判斷大寫是否開啟 //輸入密碼的長(zhǎng)度 var len = this.value.length;  if(len!=0){ //當(dāng)輸入的最新以為含有大寫字母時(shí)說明開啟了大寫鎖定 if(this.value[len-1].match(/[A-Z]/)!=null){ //給出提示 $upper.insertAfter($( .upwdpic )); }else{ //移除提示 $upper.remove(); }else{ //當(dāng)密碼框?yàn)榭諘r(shí)移除提示 if($upper){ $upper.remove(); }//判斷大寫開啟結(jié)束 //判斷長(zhǎng)度及強(qiáng)弱 upwdLen(this.value,noticeEasy());  //keyup事件結(jié)束 .blur(function(){ upwdLen(this.value,errorEasy()); //upwdLen函數(shù)中部分提示使用notice是為了keyup事件中不出現(xiàn)紅色提示,而blur事件中則需使用error標(biāo)紅 if(this.value == ){ var errorMsg = 密碼不能為空  error($( #upwdchk ),errorMsg); $( #pictie ).hide(); }else if(countLen(this.value) 6){ var errorMsg = 密碼不能少于6個(gè)字符  error($( #upwdchk ),errorMsg); $( #pictie ).hide();});
大寫鎖定的思路是：判斷輸入的字符的最新一位是否是大寫字母，如果是大寫字母，則提示大寫鎖定鍵打開。這種方法并不十分準(zhǔn)確，網(wǎng)上有一些插件能判斷大寫鎖定，在這里只是簡(jiǎn)單地做了一下判斷。
提示文字( Chrome下 )
①獲得焦點(diǎn)、點(diǎn)擊時(shí)
②輸入時(shí)
 失去焦點(diǎn)時(shí)與此效果相同
 失去焦點(diǎn)時(shí)與此效果相同
 失去焦點(diǎn)時(shí)與此效果相同
 失去焦點(diǎn)時(shí)與此效果相同
③失去焦點(diǎn)為空時(shí)
④出現(xiàn)大寫時(shí)
密碼欄目至此結(jié)束。
重復(fù)密碼：失去焦點(diǎn)時(shí)判斷是否和密碼一致
reister.html代碼片段:
 p >register.js代碼片段：
$( #rupwd ).focus(function(){ var noticeMsg = 再次輸入你設(shè)置的密碼  notice($( #rupwdchk ),noticeMsg); .click(function(){ var noticeMsg = 再次輸入你設(shè)置的密碼  notice($( #rupwdchk ),noticeMsg); }).keydown(function(){ //把焦點(diǎn)移至郵箱欄目 if(event.keyCode == 13){ $( #yzm ).focus(); .blur(function(){ if(this.value == $( #upwd ).val() this.value!= ){ success($( #rupwdchk ),  rpwdval = true; }else if(this.value == ){ $( #rupwdchk ).html(  }else{ var errorMsg = 兩次輸入的密碼不一致  error($( #rupwdchk ),errorMsg);});
提示文字：
①獲得焦點(diǎn)、點(diǎn)擊時(shí)
②失去焦點(diǎn)時(shí)和密碼不一致、一致時(shí)分別為
至此重復(fù)密碼結(jié)束。
驗(yàn)證碼：不區(qū)分大小寫
驗(yàn)證碼采用4位，可以包含的字符為數(shù)字1-9，字母a-f
點(diǎn)擊驗(yàn)證碼和刷新按鈕都能刷新驗(yàn)證碼
register.html驗(yàn)證碼代碼部分：
 p >register.js驗(yàn)證碼部分:
//驗(yàn)證碼按鈕$( #refpic ).hover(function(){ $(this).attr( src , images/refhover.jpg  },function(){ $(this).attr( src , images/ref.jpg  }).mousedown(function(){ $(this).attr( src , images/refclick.jpg  }).mouseup(function(){ $(this).attr( src , images/ref.jpg  //生成驗(yàn)證碼函數(shù) function showval() { num =  for (i = 0; i i++) { tmp = Math.ceil(Math.random() * 15);//Math.ceil上取整；Math.random取0-1之間的隨機(jī)數(shù) if (tmp 9) { switch (tmp) { case(10): num += a  break; case(11): num += b  break; case(12): num += c  break; case(13): num += d  break; case(14): num += e  break; case(15): num += f  break; } else { num += tmp; $( #yzmpic ).attr( src , ../valcode.php?num= +num); $( #yzmHiddenNum ).val(num); //生成驗(yàn)證碼以及刷新驗(yàn)證碼 showval(); $( #yzmpic ).click(function(){ showval(); $( #changea ).click(function(){ showval(); //驗(yàn)證碼檢驗(yàn) function yzmchk(){ if($( #yzm ).val() == ){ var errorMsg = 驗(yàn)證碼不能為空  error($( #yzmchk ),errorMsg); }else if($( #yzm ).val().toLowerCase()!=$( #yzmHiddenNum ).val()){ //不區(qū)分大小寫 var errorMsg = 請(qǐng)輸入正確的驗(yàn)證碼  error($( #yzmchk ),errorMsg); }else{ success($( #yzmchk ),  yzmval = true; //驗(yàn)證碼的blur事件 $( #yzm ).focus(function(){ var noticeMsg = 不區(qū)分大小寫  notice($( #yzmchk ),noticeMsg); }).click(function(){ var noticeMsg = 不區(qū)分大小寫  notice($( yzmdchk ),noticeMsg); }).keydown(function(){ //提交 if(event.keyCode == 13){  //先檢驗(yàn)后提交 yzmchk(); formsub(); }).blur(function(){ yzmchk();});
valcode.php驗(yàn)證碼生成php代碼：
 ?php  header( content-type:image/png  $num = $_GET[ num  $imagewidth = 150; $imageheight = 54; //創(chuàng)建圖像 $numimage = imagecreate($imagewidth, $imageheight); //為圖像分配顏色 imagecolorallocate($numimage, 240,240,240);  //字體大小 $font_size = 33; //字體名稱 $fontname = arial.ttf  //循環(huán)生成圖片文字 for($i = 0;$i strlen($num);$i++){ //獲取文字左上角x坐標(biāo) $x = mt_rand(20,20) + $imagewidth*$i/5; //獲取文字左上角y坐標(biāo) $y = mt_rand(40, $imageheight); //為文字分配顏色 $color = imagecolorallocate($numimage, mt_rand(0,150), mt_rand(0,150), mt_rand(0,150)); //寫入文字 imagettftext($numimage,$font_size,0,$x,$y,$color,$fontname,$num[$i]); //生成干擾碼 for($i = 0;$i 2200;$i++){ $randcolor = imagecolorallocate($numimage, rand(200,255), rand(200,255), rand(200,255)); imagesetpixel($numimage, rand()%180, rand()%90, $randcolor); //輸出圖片 imagepng($numimage); imagedestroy($numimage);? 
注：把字體 Arial 放在服務(wù)器的相應(yīng)目錄
提示文字：
①獲得焦點(diǎn)時(shí)、點(diǎn)擊時(shí)
②為空且失去焦點(diǎn)時(shí)
③輸入錯(cuò)誤、輸入正確且失去焦點(diǎn)時(shí)分別為
驗(yàn)證碼至此結(jié)束。
使用協(xié)議：默認(rèn)勾選；
register.html相應(yīng)代碼：
 span >register.js相應(yīng)代碼：
if($( #agree ).prop( checked ) == true){ fuwuval = true;$( #agree ).click(function(){ if($( #agree ).prop( checked ) == true){ fuwuval = true; $( #sub ).css( background , #69b3f2  }else{ $( #sub ).css({ background : #f2f2f2 , cursor : default });});
效果圖：
①勾選之后
②未勾選
提交按鈕：檢測(cè)是否所有欄目都填寫正確，否則所有填寫錯(cuò)誤的欄目將給出錯(cuò)誤提示。全部填寫正確后提交并且發(fā)送驗(yàn)證郵件到注冊(cè)郵箱中，郵件的驗(yàn)證地址在3日后失效
首先在register.js開始部分定義幾個(gè)參數(shù)：nameval,emailval,pwdval,rpwdval,yzmval,fuwuval，全部設(shè)為0；當(dāng)相應(yīng)欄目符合規(guī)定之后，把相應(yīng)的參數(shù)設(shè)為true。當(dāng)所有的參數(shù)都為true之后，提交至registerChk.php，否則return false。
register.html相應(yīng)代碼：
 button type= button id= sub 立即注冊(cè) /button 
register.js相應(yīng)代碼：
參數(shù)設(shè)置：
var nameval,emailval,pwdval,rpwdval,yzmval,fuwuval = 0;
提交事件：
function formsub(){ if(nameval != true || emailval!=true || pwdval!=true || rpwdval!=true || yzmval!=true || fuwuval!=true){ //當(dāng)郵箱有下拉菜單時(shí)點(diǎn)擊提交按鈕時(shí)不會(huì)自動(dòng)收回菜單，因?yàn)橄旅娴膔eturn false，所以在return false之前判斷下拉菜單是否彈出 if(nameval != true $( #unamechk ).val()!= ){ var errorMsg = 請(qǐng)輸入用戶名  error($( #namechk ),errorMsg); if($( .autoul ).show()){ $( .autoul ).hide(); //以下是不會(huì)自動(dòng)獲得焦點(diǎn)的欄目如果為空時(shí)，點(diǎn)擊注冊(cè)按鈕給出錯(cuò)誤提示 if($( #uemail ).val() == ){ var errorMsg = 郵箱不能為空  error($( #uemailchk ),errorMsg);  if($( #upwd ).val() == ){ var errorMsg = 密碼不能為空  error($( #upwdchk ),errorMsg);  if($( #rupwd ).val() == ){ var errorMsg = 請(qǐng)?jiān)俅屋斎肽愕拿艽a  error($( #rupwdchk ),errorMsg);  if($( #yzm ).val() == ){ var errorMsg = 驗(yàn)證碼不能為空  error($( #yzmchk ),errorMsg);  }else{ $( #register-form ).submit(); $( #sub ).click(function(){ formsub();});
顯示效果：
有欄目為空時(shí)點(diǎn)擊提交按鈕
注冊(cè)以及發(fā)送郵件：
使用了Zend Framework( 1.11.11 )中的zend_email組件。Zend Framework的下載地址是：http://packages.zendframework.com/releases/ZendFramework-1.11.11/ZendFramework-1.11.11.zip。在Zend Framework根目錄下library路徑下，剪切Zend文件至服務(wù)器下，在注冊(cè)頁面中引入Zend/Mail/Transport/Smtp.php和Zend/Mail.php兩個(gè)文件。
當(dāng)點(diǎn)擊提交按鈕時(shí)，表單將數(shù)據(jù)提交至register_chk.php，然后頁面在當(dāng)前頁跳轉(zhuǎn)至register_back.html，通知用戶注冊(cè)結(jié)果并且進(jìn)郵箱激活。
驗(yàn)證郵箱的地址參數(shù)使用用戶名和一個(gè)隨機(jī)生成的key。
register_chk.php:
 ?php  include_once conn/conn.php  include_once Zend/Mail/Transport/Smtp.php  include_once Zend/Mail.php  //激活key,生成的隨機(jī)數(shù) $key = md5(rand()); //先寫入數(shù)據(jù)庫，再發(fā)郵件 //寫入數(shù)據(jù)庫 //判斷是否開啟magic_quotes_gpc if(get_magic_quotes_gpc()){ $postuname = $_POST[ uname  $postupwd = $_POST[ upwd  $postuemail = $_POST[ uemail  }else{ $postuname = addslashes($_POST[ uname  $postupwd = addslashes($_POST[ upwd  $postuemail = addslashes($_POST[ uemail  function check_input($value){ // 如果不是數(shù)字則加引號(hào) if (!is_numeric($value)){ $value = mysql_real_escape_string($value); return $value; $postuname = check_input($postuname); $postupwd = check_input($postupwd); $postuemail = check_input($postuemail); $sql = insert into user(uname,upwd,uemail,activekey)values( .trim($postuname). , .md5(trim($postupwd)). , .trim($postuemail). , .$key. )  $num = $conne- uidRst($sql); if($num == 1){ //插入成功時(shí)發(fā)送郵件 //用戶激活鏈接 $url = http:// .$_SERVER[ HTTP_HOST ]. /php/myLogin/activation.php  //urlencode函數(shù)轉(zhuǎn)換url中的中文編碼 //帶反斜杠 $url.= ?name= .urlencode(trim($postuname)). k= .$key; //定義登錄使用的郵箱 $envelope = dee1566@126.com  //激活郵件的主題和正文 $subject = 激活您的帳號(hào)  $mailbody = 注冊(cè)成功， a href= .$url. target= _blank 請(qǐng)點(diǎn)擊此處激活帳號(hào) /a  //發(fā)送郵件 //SMTP驗(yàn)證參數(shù) $config = array( auth = login , port = 25, username = dee1566@126.com , password = 你的密碼  //實(shí)例化驗(yàn)證的對(duì)象,使用gmail smtp服務(wù)器 $transport = new Zend_Mail_Transport_Smtp( smtp.126.com ,$config); $mail = new Zend_Mail( utf-8  $mail- addTo($_POST[ uemail ], 獲取用戶注冊(cè)激活鏈接  $mail- setFrom($envelope, 發(fā)件人  $mail- setSubject($subject); $mail- setBodyHtml($mailbody); $mail- send($transport); echo script self.location=/ templets/register_back.html/ /script  }else{ echo script self.location=/ templets/register_back.html?error=1/ /script ? 
郵箱中收取的郵件截圖：
然后點(diǎn)擊郵箱中的鏈接進(jìn)行激活，把數(shù)據(jù)庫中的active設(shè)置為1。
activation.php:
 ?php session_start();header( Content-type:text/html;charset=utf-8 include_once conn/conn.php $table = user if(!empty($_GET[ name ]) !is_null($_GET[ name ])){ //urlencode會(huì)對(duì)字符串進(jìn)行轉(zhuǎn)義。所以這里要進(jìn)行處理 if(get_magic_quotes_gpc()){ $getname = stripslashes(urldecode($_GET[ name ])); }else{ $getname = urldecode($_GET[ name  //urldecode反轉(zhuǎn)url中的中文編碼 $sql = select * from .$table. where uname= .$getname. and activekey= .$_GET[ k ].  $num = $conne- getRowsNum($sql); if($num 0){ $rs = $conne- getRowsRst($sql);  //此時(shí)數(shù)據(jù)庫里的字符串是不會(huì)帶反斜杠的  //因此要為下面的SQL語句加上反斜杠 $rsname = addslashes($rs[ uname  $upnum = $conne- uidRst( update .$table. set active = 1 where uname = .$rsname. and activekey = .$rs[ activekey ].  if($upnum 0){ $_SESSION[ name ] = urldecode($getname); echo script alert( 您已成功激活 window.location.href= main.php /script  }else{ echo script alert( 您已經(jīng)激活過了 window.location.href= main.php /script  }else{ echo script alert( 激活失敗 window.location.href= templets/register.html /script ? 
關(guān)于注冊(cè)成功后的郵件頁和跳轉(zhuǎn)頁，這里不做了。
關(guān)于數(shù)據(jù)庫防注入的幾種方式magic_quote_gpc，addslashes/stripslashes，mysql_real_eascpae_string，我做了一張表格
附
數(shù)據(jù)庫設(shè)計(jì)：
user表
create table user (id int primary key auto_increment,uname varchar(14) not null default ,upwd char(32) not null default ,uemail varchar(50) not null default ,active tinyint(4) default 0 ,activekey char(32) not null defalut )engine=innodb default charset=utf8
說明：md5的長(zhǎng)度是32。
模塊的目錄結(jié)構(gòu)如下：
ROOT:
├─conn
│ ├─conn.php
│
├─templets
│ ├─css
│ │ ├─common.css
│ │ ├─register.css
│ │
│ ├─images
│ │
│ └─js
│ ├─jquery-1.8.3.min.js
│ ├─register.js
│ ├─emailup.js
│
├─chkname.php
├─chkemail.php
├─valcode.php
├─register_chk.php
├─activation.php
├─arial.ttf
│
└─Zend
模塊至此結(jié)束。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，更多相關(guān)內(nèi)容請(qǐng)關(guān)注PHP ！
相關(guān)推薦：
利用PHP生成便于打印的網(wǎng)頁的方法
利用html靜態(tài)頁面調(diào)用php文件的方法
以上就是關(guān)于PHP和jQuery 注冊(cè)模塊的開發(fā)的詳細(xì)內(nèi)容，PHP教程        
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。