首页>>表单>>Ajax用户注册验证 验证合格才能提交表单(2013-09-24)

Ajax用户注册验证 验证合格才能提交表单

 检测用户和email是否被注册，检测email格式是否正确，检测密码强度

Ajax用户注册验证 验证合格才能提交表单
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

XML/HTML Code
  1. <div id="reg">  
  2. <FORM name="formUser" onSubmit="return register();" action=user.php   
  3. method=post>  
  4.   <BR>  
  5.   <TABLE width="100%" align=center border=0>  
  6.     <TBODY>  
  7.       <TR>  
  8.         <TD align=right width="15%"><STRONG>用户名:</STRONG></TD>  
  9.         <TD width="57%"><INPUT id="username" onBlur="chkUserName(this)"   
  10.       name="username">  
  11.             <SPAN id="username_notice" >*</SPAN></TD>  
  12.       </TR>  
  13.       <TR>  
  14.         <TD align=right><STRONG>email:</STRONG></TD>  
  15.         <TD><INPUT id="email" onBlur="checkEmail(this)" name="email">  
  16.             <SPAN id=email_notice >*</SPAN></TD>  
  17.       </TR>  
  18.       <TR>  
  19.         <TD align=right><STRONG>密码:</STRONG></TD>  
  20.         <TD><INPUT id="password" onBlur="check_password(this)"   
  21.       onkeyup="checkIntensity(this.value)" type="password" name="password">  
  22.             <SPAN   
  23.       id=password_notice >*</SPAN></TD>  
  24.       </TR>  
  25.       <TR>  
  26.         <TD align=right><STRONG>密码强度:</STRONG></TD>  
  27.         <TD><TABLE cellSpacing=0 cellPadding=1 width=145 border=0>  
  28.           <TBODY>  
  29.             <TR align=middle>  
  30.               <TD id=pwd_lower width="33%">弱</TD>  
  31.               <TD id=pwd_middle width="33%">中</TD>  
  32.               <TD id=pwd_high width="33%">强</TD>  
  33.             </TR>  
  34.           </TBODY>  
  35.         </TABLE></TD>  
  36.       </TR>  
  37.       <TR>  
  38.         <TD align=right><STRONG>确认密码:</STRONG></TD>  
  39.         <TD><INPUT id="conform_password" onBlur="check_conform_password(this)"   
  40.       type="password" name="confirm_password">  
  41.             <SPAN id=conform_password_notice >*</SPAN></TD>  
  42.       </TR>  
  43.       <TR>  
  44.         <TD align=right><STRONG>手机:</STRONG></TD>  
  45.         <TD><INPUT name=other[mobile_phone]>        </TD>  
  46.       </TR>  
  47.       <TR>  
  48.         <TD> </TD>  
  49.         <TD><LABEL>  
  50.           <INPUT type="checkbox" CHECKED value="1" name="agreement" onBlur="check_agreement(this)">  
  51.           <B>我已看过并接受《<a href="#">用户协议</a>》<SPAN id=agreement_notice >*</SPAN></B></LABEL></TD>  
  52.       </TR>  
  53.       <TR>  
  54.         <TD  ><INPUT type=hidden value=act_register name=act></TD>  
  55.         <TD  ><input type=submit value=确认注册    name="Submit1" class="anniu" disabled></TD>  
  56.       </TR>  
  57.       <TR>  
  58.         <TD colSpan=2> </TD>  
  59.       </TR>  
  60.     </TBODY>  
  61.   </TABLE>  
  62. </FORM>  
  63. </div>  

from_ck.js

JavaScript Code
  1. //XMLHttpRequest   
  2.     var xmlhttp = false;  
  3.     try {  
  4.         xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");  
  5.     } catch (e) {  
  6.         try {  
  7.             xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");  
  8.         } catch (e2) {  
  9.             xmlhttp = false;  
  10.         }  
  11.     }  
  12.     if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {  
  13.         xmlhttp = new XMLHttpRequest();  
  14.     }  
  15.     function Ajax(data){      
  16.         xmlhttp.open("GET","user_ck.php?username="+document.getElementById("username").value,true);  
  17.         xmlhttp.send(null);  
  18.         document.getElementById('username_notice').innerHTML = process_request;//显示状态  
  19.         xmlhttp.onreadystatechange=function(){  
  20.             if (4==xmlhttp.readyState){  
  21.                 if (200==xmlhttp.status){  
  22.                 var responseText = xmlhttp.responseText;  
  23.                    if (responseText=="true" ){  
  24.                    ck_user("true");  
  25.                       }  
  26.                    else{  
  27.                    ck_user("false");  
  28.                    }  
  29.                 }else{  
  30.                     alert("发生错误!");  
  31.                 }  
  32.             }  
  33.         }  
  34.     }  
  35.     function chkUserName(obj){  
  36.          if (checks(obj.value)== false)  
  37.           {  
  38.             obj.className = "FrameDivWarn";  
  39.             showInfo("username_notice",msg_un_format);  
  40.             change_submit("true");  
  41.           }  
  42.         else if(obj.value.length<1){  
  43.             obj.className = "FrameDivWarn";  
  44.             showInfo("username_notice",msg_un_blank);  
  45.             change_submit("true");  
  46.         }  
  47.   
  48.         else if(obj.value.length<3){  
  49.             obj.className = "FrameDivWarn";  
  50.             showInfo("username_notice",username_shorter);  
  51.             change_submit("true");  
  52.         }  
  53.         else{  
  54.             //调用Ajax函数,向服务器端发送查询  
  55.             Ajax(obj.value);  
  56.         }             
  57.   
  58.     }  
  59. //--------------用户名检测---------------------//  
  60. function ck_user(result)  
  61. {  
  62.   if ( result == "true" )  
  63.   {    
  64.     document.getElementById('username').className = "FrameDivWarn";  
  65.     showInfo("username_notice",msg_un_registered);  
  66.     change_submit("true");//禁用提交按钮  
  67.   }  
  68.   else  
  69.   {   
  70.     document.getElementById('username').className = "FrameDivPass";  
  71.     showInfo("username_notice",msg_can_rg);  
  72.     change_submit("false");//可用提交按钮  
  73.   }  
  74. }  
  75.   
  76. function checks(t){  
  77.     szMsg="[#%&'",;:=!^@]";  
  78.      //alertStr="";  
  79.     for(i=1;i<szMsg.length+1;i++){  
  80.      if(t.indexOf(szMsg.substring(i-1,i))>-1){  
  81.       //alertStr="请勿包含非法字符如[#_%&'",;:=!^]";  
  82.       return false;  
  83.      }  
  84.     }  
  85.     return true;  
  86.    }  
  87. //-----------EMAIL检测--------------------------------//  
  88. function checkEmail(email)  
  89. {  
  90.  if (chekemail(email.value)==false)  
  91.   
  92.   {  
  93.     email.className = "FrameDivWarn";  
  94.     showInfo("email_notice",msg_email_format);  
  95.     change_submit("true");    
  96.  }   
  97.    
  98. else  
  99.    {  
  100.    showInfo("email_notice",info_right);  
  101.    email.className = "FrameDivPass";  
  102.    change_submit("false");   
  103.    }  
  104. }  
  105.   
  106. function chekemail(temail) {    
  107.  var pattern = /^[w]{1}[w.-_]*@[w]{1}[w-_.]*.[w]{2,4}$/i;    
  108.  if(pattern.test(temail)) {    
  109.   return true;    
  110.  }    
  111.  else {    
  112.   return false;    
  113.  }    
  114. }   
  115. //--------------------密码检测-----------------------------//  
  116. function check_password( password )  
  117. {  
  118.     if ( password.value.length < 6 )  
  119.     {  
  120.         showInfo("password_notice",password_shorter_s);  
  121.         password.className = "FrameDivWarn";  
  122.         change_submit("true");//禁用提交按钮  
  123.     }  
  124.     else if(password.value.length > 30){  
  125.         showInfo("password_notice",password_shorter_m);  
  126.         password.className = "FrameDivWarn";  
  127.         change_submit("true");//禁用提交按钮  
  128.         }  
  129.     else  
  130.     {  
  131.         showInfo("password_notice",info_right);  
  132.         password.className = "FrameDivPass";  
  133.         change_submit("false");//允许提交按钮  
  134.     }  
  135. }  
  136.   
  137. function check_conform_password( conform_password )  
  138. {  
  139.     password = document.getElementById('password').value;  
  140.       
  141.     if ( conform_password.value.length < 6 )  
  142.     {  
  143.         showInfo("conform_password_notice",password_shorter_s);  
  144.         conform_password.className = "FrameDivWarn";  
  145.         change_submit("true");//禁用提交按  
  146.         return false;  
  147.     }  
  148.     if ( conform_password.value!= password)  
  149.     {  
  150.         showInfo("conform_password_notice",confirm_password_invalid);  
  151.         conform_password.className = "FrameDivWarn";  
  152.         change_submit("true");//禁用提交按  
  153.     }  
  154.     else  
  155.     {     
  156.         conform_password.className = "FrameDivPass";  
  157.         showInfo("conform_password_notice",info_right);  
  158.         change_submit("false");//允许提交按钮  
  159.     }  
  160. }  
  161. //* *--------------------检测密码强度-----------------------------* *//  
  162.   
  163. function checkIntensity(pwd)  
  164. {  
  165.   var Mcolor = "#FFF",Lcolor = "#FFF",Hcolor = "#FFF";  
  166.   var m=0;  
  167.   
  168.   var Modes = 0;  
  169.   for (i=0; i<pwd.length; i++)  
  170.   {  
  171.     var charType = 0;  
  172.     var t = pwd.charCodeAt(i);  
  173.     if (t>=48 && t <=57)  
  174.     {  
  175.       charType = 1;  
  176.     }  
  177.     else if (t>=65 && t <=90)  
  178.     {  
  179.       charType = 2;  
  180.     }  
  181.     else if (t>=97 && t <=122)  
  182.       charType = 4;  
  183.     else  
  184.       charType = 4;  
  185.     Modes |= charType;  
  186.   }  
  187.   
  188.   for (i=0;i<4;i++)  
  189.   {  
  190.     if (Modes & 1) m++;  
  191.       Modes>>>=1;  
  192.   }  
  193.   
  194.   if (pwd.length<=4)  
  195.   {  
  196.     m = 1;  
  197.   }  
  198.   
  199.   switch(m)  
  200.   {  
  201.     case 1 :  
  202.       Lcolor = "2px solid red";  
  203.       Mcolor = Hcolor = "2px solid #DADADA";  
  204.     break;  
  205.     case 2 :  
  206.       Mcolor = "2px solid #f90";  
  207.       Lcolor = Hcolor = "2px solid #DADADA";  
  208.     break;  
  209.     case 3 :  
  210.       Hcolor = "2px solid #3c0";  
  211.       Lcolor = Mcolor = "2px solid #DADADA";  
  212.     break;  
  213.     case 4 :  
  214.       Hcolor = "2px solid #3c0";  
  215.       Lcolor = Mcolor = "2px solid #DADADA";  
  216.     break;  
  217.     default :  
  218.       Hcolor = Mcolor = Lcolor = "";  
  219.     break;  
  220.   }  
  221.   document.getElementById("pwd_lower").style.borderBottom  = Lcolor;  
  222.   document.getElementById("pwd_middle").style.borderBottom = Mcolor;  
  223.   document.getElementById("pwd_high").style.borderBottom   = Hcolor;  
  224.   
  225. }  
  226. //--------------注册协议复选框状态检测---------------------//  
  227. function check_agreement(){  
  228.   if (document.formUser.agreement.checked==false)  
  229.   {  
  230.      showInfo("agreement_notice",agreement);  
  231.      change_submit("true");//允许提交  
  232. }  
  233.   else  
  234.   {  
  235.     showInfo("agreement_notice",info_right);  
  236.     change_submit("false");//允许提交按  
  237.     }  
  238. }  
  239.   
  240.   
  241. //-------------处理注册程序-----------------------------//  
  242. function register() {  
  243. if(document.formUser.username.value=="")  
  244.     {  
  245.     showclass("username","FrameDivWarn");  
  246.     showInfo("username_notice",msg_un_blank);  
  247.       document.formUser.username.focus();  
  248.       return false;  
  249.      }  
  250.  else if(document.formUser.email.value=="")  
  251.     {  
  252.       showclass("email","FrameDivWarn");  
  253.       showInfo("email_notice",msg_email_blank);  
  254.       document.formUser.email.focus();  
  255.       return false;  
  256.      }    
  257.   
  258.  else if(document.formUser.password.value=="")  
  259.     {  
  260.     showclass("password","FrameDivWarn");  
  261.     showInfo("password_notice",password_empty);  
  262.       document.formUser.password.focus();  
  263.       return false;  
  264.      }  
  265.  else if(document.formUser.confirm_password.value=="")  
  266.     {  
  267.     showclass("confirm_password","FrameDivWarn");  
  268.     showInfo("conform_password_notice",confirm_password_invalid);  
  269.       document.formUser.password.focus();  
  270.       return false;  
  271.      }  
  272.  else if(document.formUser.agreement.checked==false)  
  273.     {  
  274.     //showclass("agreement","FrameDivWarn");  
  275.     showInfo("agreement_notice",agreement);  
  276.       document.formUser.agreement.focus();  
  277.       return false;  
  278.      }  
  279. }  
  280.   
  281. //------------ 按钮状态设置-----------------------------//  
  282. function change_submit(zt)  
  283. {   
  284.      if (zt == "true")  
  285.      {  
  286.    document.forms['formUser'].elements['Submit1'].disabled = 'disabled';  
  287.      }  
  288.    else  
  289.      {  
  290.    document.forms['formUser'].elements['Submit1'].disabled = '';  
  291.      }  
  292. }  
  293. //------公用程序------------------------------------//  
  294.     function showInfo(target,Infos){  
  295.     document.getElementById(target).innerHTML = Infos;  
  296.     }  
  297.     function showclass(target,Infos){  
  298.     document.getElementById(target).className = Infos;  
  299.     }     
  300. var process_request = "<img src='loading.gif' width='16' height='16' border='0' align='absmiddle'>正在数据处理中...";  
  301. var username_empty = "<span style='COLOR:#ff0000'>  × 用户名不能为空!</span>";  
  302. var username_shorter = "<span style='COLOR:#ff0000'> × 用户名长度不能少于 3 个字符。</span>";  
  303. var username_invalid = "- 用户名只能是由字母数字以及下划线组成。";  
  304. var password_empty = "<span style='COLOR:#ff0000'> × 登录密码不能为空。</span>";  
  305. var password_shorter_s = "<span style='COLOR:#ff0000'> × 登录密码不能少于 6 个字符。</span>";  
  306. var password_shorter_m = "<span style='COLOR:#ff0000'> × 登录密码不能多于 30 个字符。</span>";  
  307. var confirm_password_invalid = "<span style='COLOR:#ff0000'> × 两次输入密码不一致!</span>";  
  308. var email_empty = "<span style='COLOR:#ff0000'> × Email 为空</span>";  
  309. var email_invalid = "- Email 不是合法的地址";  
  310. var agreement = "<span style='COLOR:#ff0000'> × 您没有接受协议</span>";  
  311. var mobile_phone_invalid = "- 手机号码不是一个有效号码";  
  312. var msg_un_blank = "<span style='COLOR:#ff0000'> × 用户名不能为空!</span>";  
  313. var msg_un_length = "<span style='COLOR:#ff0000'> × 用户名最长不得超过15个字符</span>";  
  314. var msg_un_format = "<span style='COLOR:#ff0000'> × 用户名含有非法字符!</span>";  
  315. var msg_un_registered = "<span style='COLOR:#ff0000'> × 用户名已经存在,请重新输入!</span>";  
  316. var msg_can_rg = "<span style='COLOR:#006600'> √ 可以注册！</span>";  
  317. var msg_email_blank = "<span style='COLOR:#ff0000'> × 邮件地址不能为空!</span>";  
  318. var msg_email_registered = " × 邮箱已存在,请重新输入!";  
  319. var msg_email_format = "<span style='COLOR:#ff0000'> × 邮件地址不合法!</span>";  
  320. var username_exist = "用户名 %s 已经存在";  
  321. var info_can="<span style='COLOR:#006600'> √ 可以注册!</span>";  
  322. var info_right="<span style='COLOR:#006600'> √ 填写正确!</span>";  

 user_check.php

 

PHP Code
  1. <?php  
  2. include("conn.php");  
  3.     //设置页面编码  
  4. header("Content-type:text/html;charset=UTF-8");  
  5. $username=trim($_GET["username"]);  
  6. $sql="select * from username_list where username='$username'";  
  7. $query=mysql_query($sql);  
  8. $rst=mysql_fetch_object($query);  
  9. if ($rst==false)  
  10. {  
  11. echo 'false';  
  12. }  
  13. else  
  14. {  
  15. echo 'true';  
  16. }  
  17. ?>  

 


原文地址:http://www.freejs.net/article_biaodan_41.html