为了账号安全，请及时绑定邮箱和手机立即绑定
首页 手记 Ajax用户注册验证 验证合格才能提交表单

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

标签：
JavaScript

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

<div id="reg">  
<FORM name="formUser" onSubmit="return register();" action=user.php   
method=post>  
  <BR>  
  <TABLE width="100%" align=center border=0>  
    <TBODY>  
      <TR>  
        <TD align=right width="15%"><STRONG>用户名:</STRONG></TD>  
        <TD width="57%"><INPUT id="username" onBlur="chkUserName(this)"   
      name="username">  
            <SPAN id="username_notice" >*</SPAN></TD>  
      </TR>  
      <TR>  
        <TD align=right><STRONG>email:</STRONG></TD>  
        <TD><INPUT id="email" onBlur="checkEmail(this)" name="email">  
            <SPAN id=email_notice >*</SPAN></TD>  
      </TR>  
      <TR>  
        <TD align=right><STRONG>密码:</STRONG></TD>  
        <TD><INPUT id="password" onBlur="check_password(this)"   
      onkeyup="checkIntensity(this.value)" type="password" name="password">  
            <SPAN   
      id=password_notice >*</SPAN></TD>  
      </TR>  
      <TR>  
        <TD align=right><STRONG>密码强度:</STRONG></TD>  
        <TD><TABLE cellSpacing=0 cellPadding=1 width=145 border=0>  
          <TBODY>  
            <TR align=middle>  
              <TD id=pwd_lower width="33%">弱</TD>  
              <TD id=pwd_middle width="33%">中</TD>  
              <TD id=pwd_high width="33%">强</TD>  
            </TR>  
          </TBODY>  
        </TABLE></TD>  
      </TR>  
      <TR>  
        <TD align=right><STRONG>确认密码:</STRONG></TD>  
        <TD><INPUT id="conform_password" onBlur="check_conform_password(this)"   
      type="password" name="confirm_password">  
            <SPAN id=conform_password_notice >*</SPAN></TD>  
      </TR>  
      <TR>  
        <TD align=right><STRONG>手机:</STRONG></TD>  
        <TD><INPUT name=other[mobile_phone]>        </TD>  
      </TR>  
      <TR>  
        <TD> </TD>  
        <TD><LABEL>  
          <INPUT type="checkbox" CHECKED value="1" name="agreement" onBlur="check_agreement(this)">  
          <B>我已看过并接受《<a href="#">用户协议</a>》<SPAN id=agreement_notice >*</SPAN></B></LABEL></TD>  
      </TR>  
      <TR>  
        <TD  ><INPUT type=hidden value=act_register name=act></TD>  
        <TD  ><input type=submit value=确认注册    name="Submit1" class="anniu" disabled></TD>  
      </TR>  
      <TR>  
        <TD colSpan=2> </TD>  
      </TR>  
    </TBODY>  
  </TABLE>  
</FORM>  
</div>  
from_ck.js
JavaScript Code
//XMLHttpRequest   
    var xmlhttp = false;  
    try {  
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");  
    } catch (e) {  
        try {  
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");  
        } catch (e2) {  
            xmlhttp = false;  
        }  
    }  
    if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {  
        xmlhttp = new XMLHttpRequest();  
    }  
    function Ajax(data){      
        xmlhttp.open("GET","user_ck.php?username="+document.getElementById("username").value,true);  
        xmlhttp.send(null);  
        document.getElementById('username_notice').innerHTML = process_request;//显示状态  
        xmlhttp.onreadystatechange=function(){  
            if (4==xmlhttp.readyState){  
                if (200==xmlhttp.status){  
                var responseText = xmlhttp.responseText;  
                   if (responseText=="true" ){  
                   ck_user("true");  
                      }  
                   else{  
                   ck_user("false");  
                   }  
                }else{  
                    alert("发生错误!");  
                }  
            }  
        }  
    }  
    function chkUserName(obj){  
         if (checks(obj.value)== false)  
          {  
            obj.className = "FrameDivWarn";  
            showInfo("username_notice",msg_un_format);  
            change_submit("true");  
          }  
        else if(obj.value.length<1){  
            obj.className = "FrameDivWarn";  
            showInfo("username_notice",msg_un_blank);  
            change_submit("true");  
        }  

        else if(obj.value.length<3){  
            obj.className = "FrameDivWarn";  
            showInfo("username_notice",username_shorter);  
            change_submit("true");  
        }  
        else{  
            //调用Ajax函数,向服务器端发送查询  
            Ajax(obj.value);  
        }             

    }  
//--------------用户名检测---------------------//  
function ck_user(result)  
{  
  if ( result == "true" )  
  {    
    document.getElementById('username').className = "FrameDivWarn";  
    showInfo("username_notice",msg_un_registered);  
    change_submit("true");//禁用提交按钮  
  }  
  else  
  {   
    document.getElementById('username').className = "FrameDivPass";  
    showInfo("username_notice",msg_can_rg);  
    change_submit("false");//可用提交按钮  
  }  
}  

function checks(t){  
    szMsg="[#%&'",;:=!^@]";  
     //alertStr="";  
    for(i=1;i<szMsg.length+1;i++){  
     if(t.indexOf(szMsg.substring(i-1,i))>-1){  
      //alertStr="请勿包含非法字符如[#_%&'",;:=!^]";  
      return false;  
     }  
    }  
    return true;  
   }  
//-----------EMAIL检测--------------------------------//  
function checkEmail(email)  
{  
 if (chekemail(email.value)==false)  

  {  
    email.className = "FrameDivWarn";  
    showInfo("email_notice",msg_email_format);  
    change_submit("true");    
 }   

else  
   {  
   showInfo("email_notice",info_right);  
   email.className = "FrameDivPass";  
   change_submit("false");   
   }  
}  

function chekemail(temail) {    
 var pattern = /^[w]{1}[w.-_]*@[w]{1}[w-_.]*.[w]{2,4}$/i;    
 if(pattern.test(temail)) {    
  return true;    
 }    
 else {    
  return false;    
 }    
}   
//--------------------密码检测-----------------------------//  
function check_password( password )  
{  
    if ( password.value.length < 6 )  
    {  
        showInfo("password_notice",password_shorter_s);  
        password.className = "FrameDivWarn";  
        change_submit("true");//禁用提交按钮  
    }  
    else if(password.value.length > 30){  
        showInfo("password_notice",password_shorter_m);  
        password.className = "FrameDivWarn";  
        change_submit("true");//禁用提交按钮  
        }  
    else  
    {  
        showInfo("password_notice",info_right);  
        password.className = "FrameDivPass";  
        change_submit("false");//允许提交按钮  
    }  
}  

function check_conform_password( conform_password )  
{  
    password = document.getElementById('password').value;  

    if ( conform_password.value.length < 6 )  
    {  
        showInfo("conform_password_notice",password_shorter_s);  
        conform_password.className = "FrameDivWarn";  
        change_submit("true");//禁用提交按  
        return false;  
    }  
    if ( conform_password.value!= password)  
    {  
        showInfo("conform_password_notice",confirm_password_invalid);  
        conform_password.className = "FrameDivWarn";  
        change_submit("true");//禁用提交按  
    }  
    else  
    {     
        conform_password.className = "FrameDivPass";  
        showInfo("conform_password_notice",info_right);  
        change_submit("false");//允许提交按钮  
    }  
}  
//* *--------------------检测密码强度-----------------------------* *//  

function checkIntensity(pwd)  
{  
  var Mcolor = "#FFF",Lcolor = "#FFF",Hcolor = "#FFF";  
  var m=0;  

  var Modes = 0;  
  for (i=0; i<pwd.length; i++)  
  {  
    var charType = 0;  
    var t = pwd.charCodeAt(i);  
    if (t>=48 && t <=57)  
    {  
      charType = 1;  
    }  
    else if (t>=65 && t <=90)  
    {  
      charType = 2;  
    }  
    else if (t>=97 && t <=122)  
      charType = 4;  
    else  
      charType = 4;  
    Modes |= charType;  
  }  

  for (i=0;i<4;i++)  
  {  
    if (Modes & 1) m++;  
      Modes>>>=1;  
  }  

  if (pwd.length<=4)  
  {  
    m = 1;  
  }  

  switch(m)  
  {  
    case 1 :  
      Lcolor = "2px solid red";  
      Mcolor = Hcolor = "2px solid #DADADA";  
    break;  
    case 2 :  
      Mcolor = "2px solid #f90";  
      Lcolor = Hcolor = "2px solid #DADADA";  
    break;  
    case 3 :  
      Hcolor = "2px solid #3c0";  
      Lcolor = Mcolor = "2px solid #DADADA";  
    break;  
    case 4 :  
      Hcolor = "2px solid #3c0";  
      Lcolor = Mcolor = "2px solid #DADADA";  
    break;  
    default :  
      Hcolor = Mcolor = Lcolor = "";  
    break;  
  }  
  document.getElementById("pwd_lower").style.borderBottom  = Lcolor;  
  document.getElementById("pwd_middle").style.borderBottom = Mcolor;  
  document.getElementById("pwd_high").style.borderBottom   = Hcolor;  

}  
//--------------注册协议复选框状态检测---------------------//  
function check_agreement(){  
  if (document.formUser.agreement.checked==false)  
  {  
     showInfo("agreement_notice",agreement);  
     change_submit("true");//允许提交  
}  
  else  
  {  
    showInfo("agreement_notice",info_right);  
    change_submit("false");//允许提交按  
    }  
}  

//-------------处理注册程序-----------------------------//  
function register() {  
if(document.formUser.username.value=="")  
    {  
    showclass("username","FrameDivWarn");  
    showInfo("username_notice",msg_un_blank);  
      document.formUser.username.focus();  
      return false;  
     }  
 else if(document.formUser.email.value=="")  
    {  
      showclass("email","FrameDivWarn");  
      showInfo("email_notice",msg_email_blank);  
      document.formUser.email.focus();  
      return false;  
     }    

 else if(document.formUser.password.value=="")  
    {  
    showclass("password","FrameDivWarn");  
    showInfo("password_notice",password_empty);  
      document.formUser.password.focus();  
      return false;  
     }  
 else if(document.formUser.confirm_password.value=="")  
    {  
    showclass("confirm_password","FrameDivWarn");  
    showInfo("conform_password_notice",confirm_password_invalid);  
      document.formUser.password.focus();  
      return false;  
     }  
 else if(document.formUser.agreement.checked==false)  
    {  
    //showclass("agreement","FrameDivWarn");  
    showInfo("agreement_notice",agreement);  
      document.formUser.agreement.focus();  
      return false;  
     }  
}  

//------------ 按钮状态设置-----------------------------//  
function change_submit(zt)  
{   
     if (zt == "true")  
     {  
   document.forms['formUser'].elements['Submit1'].disabled = 'disabled';  
     }  
   else  
     {  
   document.forms['formUser'].elements['Submit1'].disabled = '';  
     }  
}  
//------公用程序------------------------------------//  
    function showInfo(target,Infos){  
    document.getElementById(target).innerHTML = Infos;  
    }  
    function showclass(target,Infos){  
    document.getElementById(target).className = Infos;  
    }     
var process_request = "<img src='loading.gif' width='16' height='16' border='0' align='absmiddle'>正在数据处理中...";  
var username_empty = "<span style='COLOR:#ff0000'>  × 用户名不能为空!</span>";  
var username_shorter = "<span style='COLOR:#ff0000'> × 用户名长度不能少于 3 个字符。</span>";  
var username_invalid = "- 用户名只能是由字母数字以及下划线组成。";  
var password_empty = "<span style='COLOR:#ff0000'> × 登录密码不能为空。</span>";  
var password_shorter_s = "<span style='COLOR:#ff0000'> × 登录密码不能少于 6 个字符。</span>";  
var password_shorter_m = "<span style='COLOR:#ff0000'> × 登录密码不能多于 30 个字符。</span>";  
var confirm_password_invalid = "<span style='COLOR:#ff0000'> × 两次输入密码不一致!</span>";  
var email_empty = "<span style='COLOR:#ff0000'> × Email 为空</span>";  
var email_invalid = "- Email 不是合法的地址";  
var agreement = "<span style='COLOR:#ff0000'> × 您没有接受协议</span>";  
var mobile_phone_invalid = "- 手机号码不是一个有效号码";  
var msg_un_blank = "<span style='COLOR:#ff0000'> × 用户名不能为空!</span>";  
var msg_un_length = "<span style='COLOR:#ff0000'> × 用户名最长不得超过15个字符</span>";  
var msg_un_format = "<span style='COLOR:#ff0000'> × 用户名含有非法字符!</span>";  
var msg_un_registered = "<span style='COLOR:#ff0000'> × 用户名已经存在,请重新输入!</span>";  
var msg_can_rg = "<span style='COLOR:#006600'> √ 可以注册！</span>";  
var msg_email_blank = "<span style='COLOR:#ff0000'> × 邮件地址不能为空!</span>";  
var msg_email_registered = " × 邮箱已存在,请重新输入!";  
var msg_email_format = "<span style='COLOR:#ff0000'> × 邮件地址不合法!</span>";  
var username_exist = "用户名 %s 已经存在";  
var info_can="<span style='COLOR:#006600'> √ 可以注册!</span>";  
var info_right="<span style='COLOR:#006600'> √ 填写正确!</span>";
php code 
<?php  
include("conn.php");  
    //设置页面编码  
header("Content-type:text/html;charset=UTF-8");  
$username=trim($_GET["username"]);  
$sql="select * from username_list where username='$username'";  
$query=mysql_query($sql);  
$rst=mysql_fetch_object($query);  
if ($rst==false)  
{  
echo 'false';  
}  
else  
{  
echo 'true';  
}  
?>

谢谢:www.freejs.net/article_biaodan_41.html

点击查看更多内容
发表于 2018.02.06 17:35， 共 2977 人浏览

本文原创发布于慕课网 ，转载请注明出处，谢谢合作

举报
为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

作者其他优质文章

正在加载中

qaytix

Web前端工程师
手记
篇
粉丝
37
获赞与收藏
165

关注作者，订阅最新文章

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习，写下你的评论
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消