`

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

 
阅读更多

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

 

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

0
0
分享到:
评论

相关推荐

    用户注册表单验证(Ajax验证)

    用户注册表单验证(Ajax验证),Ajax写的,注册表单验证。

    ajax注册验证表单

    ajax注册验证表单,通过用户输入的注册信息,判断是否正确。

    ajax注册页面不需要提交表单验证用户是不否存在

    一个简单的 ajax注册页面,不需要提交表单就可以验证用户

    带数据库连接的AJAX表单验证实例PHP版

    本例包括一个自定义的Ajax用户注册验证类,基于JavaScript编写。通过这个Ajax类实现用户名无刷新检测、密码强度检测、邮箱格式判断、字母与数字判断等,可以说包括了一般表单所需要的数据判断类型,本实例包括数据库...

    HTML5 Ajax验证的用户注册表单.rar

    HTML5 Ajax验证的用户注册表单,无刷新输入判断的HTML5表单特效,界面风格漂亮,功能简洁实用,表单验证方面包括:用户名、邮箱地址判断、密码字符验证、两次密码是否一致判断、是否同意注册协议等,几个常用的判断...

    jQuery多功能注册表单验证插件代码

    功能介绍:jQuery多功能注册表单验证插件代码,能够验证几乎所有字段,让你自定义错误提示的长度,提示内容,提示字体颜色,还能与php动态验证手机号或者用户名在数据库是否存在,还能验证身份证是否输入正确,还能配合短信...

    Ajax作业.zip[0QtTGc]

    利用Ajax技术实现表单输入信息的验证。以用户注册页面示例,在注册页面中需要对用户名和两次输入的密码进行验证,其中用户名是唯一的,不能重复,而两次输入的密码必须相同,只用这样的输入才是有效地。并且要求,...

    Ajax注册用户时实现表单验证

    就用户体验来说,实时的用户信息检查用户体验效果更好,而不是在表单提交后,告诉用户信息不符合系统要求。 下面截图是新浪微博的注册界面,它采用的是实时的用户信息检查,如:手机号码和用户名等信息。 图1新浪...

    基于servlet+ajax用户注册登录系统小例子

    作业:用户登录注册系统,后台采用jsp + servlet + javabean技术实现,浏览器客户端采用ajax框架之jquery框架! 要求: 不能抄袭,没有分组,面向接口编程,不要迟到! 1、注册的信息: 用户名,密码,性别(下拉...

    基于servlet+ajax用户注册登录系统.zip

    作业:用户登录注册系统,后台采用jsp + servlet + javabean技术实现,浏览器客户端采用ajax框架之jquery框架! 要求: 不能抄袭,没有分组,面向接口编程,不要迟到! 1、注册的信息: 用户名,密码,性别(下拉...

    SSM框架实现实时检查用户名是否已经注册以及注册按钮提交表单

    本资源主要是用于ssm框架用于实时验证,给予jquery和1ajax来查询数据库数据来判断是否用户名可用

    jquery验证插件,脚本验证插件

    支持ajax提交表单数据,也支持ajax实时反馈验证结果(如常见的用户注册表单下的用户名检测); 支持开启网速慢时的二次提交防御(有时连续的点击提交表单按钮会产生多次的表单提交结果); 指定表单下任一元素在...

    Pisx通用表单验证框架2.0

    这是目前国内开发的所有JS表单验证框架中最好的一个。理由如下:1、简单,只有一个JS文件,不需要其它相关JS支持。2集成AJAX验证支持。3、验证类型全面。4、极易扩展。 主要功能有: PISX通用表单验证具有以下一些...

    用户注册表单验证源码.zip

    一、源码特点 目前只能验证检测,不可实现注册功能二、功能介绍 本源码是一个动态页面改善过后的注册用户界面过程,利用ajax和webservice实现异步无刷新的用户信息验证,只是演示了用户注册检测功能,具体的注册...

    jQuery的Ajax用户认证和注册技术实例教程(附demo源码)

    这里进一步总结了jQuery的Ajax用户认证和注册技术。分享给大家供大家参考,具体如下: Ajax 表单提交是一个功能强大的技术,提供一种发送 web 表单的方法,无需重载浏览器窗口。jQuery 库让您使用 Ajax 表单提交功能...

    异步表单验证

    arr[0].XChecksetcont("3-12长度,字母,数字,下划线", "", "表单不能为空", "验证失败", "此用户已存在", "此用户可以注册"); arr[0].posturl("/FormValidation/ajax/ajax-validation.asmx/user_isNull", "name...

    PHP生成各种验证码和Ajax验证

    验证码在WEB应用中非常重要,通常用来防止用户恶意提交表单,如恶意注册和登录、论坛恶意灌水等。使用PHP生成各种常见的验证码包括数字验证码、数字+字母验证码、中文验证码、算术验证码等等以及其Ajax验证过程

    Ajax作业.zip

    利用Ajax技术实现表单输入信息的验证。以用户注册页面示例,在注册页面中需要对用户名和两次输入的密码进行验证,其中用户名是唯一的,不能重复,而两次输入的密码必须相同,只用这样的输入才是有效地。并且要求,...

    AJAX 用户注册时的应用实例

    我所举的这个例子是一个企业用户注册时的一个应用,当用户注册时检查用户名和企业名是否可用,以前的做法是在旁边加一个按钮,点击“检查”,就向服务器发出请求,然后等待……服务器返回信息,继续操作。

Global site tag (gtag.js) - Google Analytics