AJAX注册用户验证（珍藏版）

最新推荐文章于 2022-12-05 00:51:31 发布
最新推荐文章于 2022-12-05 00:51:31 发布
阅读量8.1k 收藏 8
点赞数 1
分类专栏： AJAX注册验证 文章标签： ajax email xmlhttprequest function stylesheet border
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wxlhlh001/article/details/6981836
版权

reg.html (注册页面)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ajax用户验证</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script language="JavaScript" type="text/javascript" src="from_ck.js">
</script>
</head>
<body>
<div id="reg">
<h1>Ajax用户注册验证</h1>
<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)"
      οnkeyup="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>MSN:</STRONG></TD>
        <TD><INPUT name=other[msn]>        </TD>
      </TR>
      <TR>
        <TD align=right><STRONG>QQ:</STRONG></TD>
        <TD><INPUT name=other[qq]>        </TD>
      </TR>
      <TR>
        <TD align=right><STRONG>办公电话:</STRONG></TD>
        <TD><INPUT name=other[office_phone]>        </TD>
      </TR>
      <TR>
        <TD align=right><STRONG>家庭电话:</STRONG></TD>
        <TD><INPUT name=other[home_phone]>        </TD>
      </TR>
      <TR>
        <TD align=right><STRONG>手机:</STRONG></TD>
        <TD><INPUT name=other[mobile_phone]>        </TD>
      </TR>
      <TR>
        <TD>&nbsp;</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=确认注册&nbsp;&nbsp;&nbsp; name="Submit1" class="anniu" disabled></TD>
      </TR>
      <TR>
        <TD colSpan=2>&nbsp;</TD>
      </TR>
    </TBODY>
  </TABLE>
</FORM>
</div>
</body>
</html>

 

 

 

from_ck.js（AJAX验证）

 


 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 msn_invalid = "- msn地址不是一个有效的邮件地址";
var qq_invalid = "- QQ号码不是一个有效的号码";
var home_phone_invalid = "- 家庭电话不是一个有效号码";
var office_phone_invalid = "- 办公电话不是一个有效号码";
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>";

 

 

 

拼GO
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
AJAX实现注册验证的例子
03-28
AJAX实现注册验证的例子 基础的AJAX 、适合 初学者学习 。注释很详细。
Ajax简单实现注册用户名校验
行行失故路
03-07 3369
Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。 作用：提升用户的体验
通过Ajax实现注册登陆的表单验证，一看就会。
qq_60614034的博客
12-05 2973
ajax的简单应用，简单好懂。本次运用的软件为ideal，使用的是tomcat服务器，无框架编程。Asynchronous JavaScript And XML是一种通过JavaScript和后台进行通信的技术，能够实现页面的局部刷新，提高用户的体验常规页面刷新会更新整个页面。ajax技术通过浏览器局部发送请求给后台，后台通过resp.getWriter.print("");响应给前台页面 服务器具体实现代码： 浏览器代码： 注册代码： 登陆代码： 至于为什么要用jq
Ajax实现注册登录校验
weixin_46295656的博客
05-08 3050
Ajax实现注册登录校验 1.在做项目的时候，或多或少都会用到ajax来实现注册登录的校验，例如，当你注册时，你输入一个用户名，就会提示你，用户名可用，或者，用户名已被注册 ，等等 ，就像下图这种。 接下来我们就实现一下这个简单的实例吧。 1.Controller的编写，这里为了方便，就伪造一个用户名密码。 @RequestMapping("user/reg") @ResponseBody public String login(String name, String pwd){
ajax无刷新注册验证实例
09-06
一个简单的ajax无刷新注册验证实例的源码，值得新手学习。
springmvc+ajax+mybatis前后端整合珍藏版
01-08
【标题】"springmvc+ajax+mybatis前后端整合珍藏版"涉及到的是一个完整的Web开发框架集成，其中SpringMVC作为后端控制层，MyBatis作为持久层框架，而Ajax则是前端与服务器交互的重要技术。这个整合教程提供了一个...
javascript珍藏版
11-17
在“javascript珍藏版”这个压缩包中，很可能包含了一系列常用的JavaScript代码片段，供开发者参考和使用。这些代码可能涵盖了各种功能，如DOM操作、事件处理、Ajax请求、函数封装、数据验证、动画效果等。 1. **...
网页制作技巧-珍藏版
08-18
这份"网页制作技巧-珍藏版"压缩包，无疑为学习者提供了一套全面而实用的参考资料。下面，我们将深入探讨其中可能包含的知识点。 1. **HTML基础知识**：HTML（HyperText Markup Language）是网页制作的基础，用于...
ExtJS2.0中文API珍藏版（Include Adobe Air）
06-16
这个"ExtJS2.0中文API珍藏版"提供了一套完整的文档，使开发者能够更方便地理解和使用ExtJS 2.0版本的功能。API（Application Programming Interface）是软件开发中的一个重要概念，它定义了开发者如何与库或框架进行...
晾晾多年珍藏 jQueryAPI_CHM
03-17
6. **插件**：jQuery拥有丰富的第三方插件，如jQuery UI用于创建用户界面，jQuery Validate用于表单验证，Bootstrap和jQuery Mobile用于响应式布局和移动设备开发。 7. **链式操作**：jQuery方法返回的是jQuery对象...
HTML5 Ajax验证的用户注册表单.rar
07-10
HTML5 Ajax验证的用户注册表单，无刷新输入判断的HTML5表单特效，界面风格漂亮，功能简洁实用，表单验证方面包括：用户名、邮箱地址判断、密码字符验证、两次密码是否一致判断、是否同意注册协议等，几个常用的判断，当然其它功能就需要你自己添加了。
ajax使用之验证用户名是否存在
花2不谢
06-14 2万+
ajax使用非常广，比如验证用户名、二级联动等。实现的效果如下： 前台代码如下： <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> ajax用户名验证 window.onload = function() { document.get
Ajax实现简单的登录验证与帐号注册
恰西v的前端开发学习笔记
01-05 2万+
上一篇博客介绍了Ajax的GET和POST方法以及上传文件的进度条展示,这篇博客将介绍一个简单的登录与注册功能的实现
ajax+servlet实现注册验证(验证用户名是否存在)
胡倩萌的博客
04-19 1万+
做项目过程中，需要用到 ajax 实时验证注册的用户名是否已经存在。所以写了一个小例子，经过测试直接可用。主要分为4个文件，分别为 web.xml 文件，login.jsp文件，login.js 以及 LoginServlet.java文件。 在eclipse中新建项目，文件的存放树如下： 注意引进所需的 jar 包.1 . login.jsp<%@ page language="java
ajax 用户注册验证
我是张先生
12-03 515
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>添加商品</title> <script src="https://cdn.bootcss.com/jquery/2.2.2/jquery.js">&l...
Ajax 和 JavaScript 验证用户登录
热门推荐
ruxing.li 的专栏
01-29 3万+
Ajax 和 JavaScript 验证用户登录 index.html 用户登录 .text { width:180px; height:21px; } .userRed { border: 1px solid red; width:180px; height:21px; }
ASP.NET Ajax用户名注册验证
aimcode
03-13 3155
//script处理函数                function send_request(flag)          {              //创建XMLHttpRequest;              http_request = false;              if(window.XMLHttpRequest)         
ajax 用户登录验证
最新发布
07-11
对于用户登录验证，可以使用Ajax来实现异步验证。下面是一个简单的示例代码： HTML部分： ```html <form id="loginForm"> <input type="text" id="username" name="username" placeholder="用户名"> <input type="password" id="password" name="password" placeholder="密码"> <button type="submit">登录</button> </form> <p id="message"></p> ``` JavaScript部分： ```javascript // 监听表单提交事件 document.getElementById('loginForm').addEventListener('submit', function(event) { event.preventDefault(); // 阻止表单默认提交行为 // 获取表单数据 var username = document.getElementById('username').value; var password = document.getElementById('password').value; // 创建XMLHttpRequest对象 var xhr = new XMLHttpRequest(); // 设置请求参数，POST请求，将数据发送到login.php xhr.open('POST', 'login.php', true); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); // 设置回调函数 xhr.onreadystatechange = function() { if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) { // 接收到响应后的处理 var response = JSON.parse(xhr.responseText); document.getElementById('message').textContent = response.message; } }; // 发送请求 xhr.send('username=' + encodeURIComponent(username) + '&password=' + encodeURIComponent(password)); }); ``` 在服务器端的`login.php`文件中，你可以进行用户名和密码的验证，然后返回响应给前端。在上述代码中，通过`xhr.onreadystatechange`回调函数来处理服务器返回的响应，并将验证结果显示在页面上。 请注意，这只是一个简单的示例，实际项目中还需要进行安全性和错误处理等更多的考虑。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值