ajax注册验证

最新推荐文章于 2019-12-03 12:54:02 发布
最新推荐文章于 2019-12-03 12:54:02 发布
阅读量729 收藏 1
点赞数 1
文章标签： ajax function div input email xmlhttprequest
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nycqwert/article/details/7932616
版权

register.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>注册</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script language="javascript" src="js/xmlhttprequest.js"></script>
<script language="javascript" src="js/register.js"></script>
</head>
<body>
<div id="container">
  <div id="rgbgdiv">
    <div id="regnamediv"><b>注册名称：</b>
      <input id="regname" name="regname" type="text" />
      <div id="namediv">请输入用户名</div>
    </div>
    <div id="regpwddiv1"><b>注册密码：</b>
      <input id="regpwd1" name="regpwd1" type="password" />
      <div id="pwddiv1">请输入密码</div>
    </div>
    <div id="regpwddiv2"><b>确认密码：</b>
      <input id="regpwd2" name="regpwd2" type="password" />
      <div id="pwddiv2">请输入确认密码</div>
    </div>
    <div id="regemaildiv"><b>电子邮箱：</b>
      <input id="email" name="email" type="text" />
      <div id="emaildiv">用户激活和找回密码使用</div>
    </div>
    <div id="morediv" style="display:none;">
      <hr id="part" />
      <div id="regquestiondiv"><b>密保问题：</b>
        <input id="question" name="question" type="text" />
        <div id="questiondiv">用户激活和找回密码使用</div>
      </div>
      <div id="reganswerdiv"><b>密保答案：</b>
        <input id="answer" name="answer" type="text" />
        <div id="answerdiv">用户激活和找回密码使用</div>
      </div>
      <div id="regrealnamediv"><b>真实姓名：</b>
        <input id="realname" name="realname" type="text" />
        <div id="realnamediv">用户的真实姓名</div>
      </div>
      <div id="regbirthdaydiv"><b>出生日期：</b>
        <input id="birthday" name="birthday" type="text" />
        <div id="birthdaydiv">用户的出生日期。格式：YYYY-MM-DD</div>
      </div>
      <div id="regtelephonediv"><b>联系电话：</b>
        <input id="telephone" name="telephone" type="text" />
        <div id="telephonediv">用户的联系电话</div>
      </div>
      <div id="regqqdiv"><b>QQ号 码：</b>
        <input id="qq" name="qq" type="text" />
        <div id="qqdiv">用户QQ号</div>
      </div>
    </div>
    <div id="btndiv2">
      <button id="regbtn" disabled="disabled">&nbsp;</button>
      <button id="morebtn">&nbsp;</button>
      <button id="logbtn">&nbsp;</button>
    </div>
  </div>
  <div id="imgdiv" style=" visibility: hidden;">&nbsp;</div>
</div>
</body>
</html>


register.js

// JavaScript Document

function $(id){
    return document.getElementById(id);
}
window.onload = function(){
    $('regname').focus();
    var cname1,cname2,cpwd1,cpwd2,cemail;
    //设置激活按钮
    function chkreg(){
        if((cname1 == 'yes') && (cname2 == 'yes') && (cpwd1 == 'yes') && (cpwd2 == 'yes') && (cemail == 'yes')){
            $('regbtn').disabled = false;
        }else{
            $('regbtn').disabled = true;
        }
    }
    //验证用户名
    $('regname').onkeyup = function (){
        name = $('regname').value;
        cname2 = '';
        if(name.match(/^[a-zA-Z_]*/) == ''){
            $('namediv').innerHTML = '<font color=red>必须以字母或下划线开头</font>';
            cname1 = '';
        }else if(name.length < 2){
            $('namediv').innerHTML = '<font color=red>注册名称必须大于等于2位</font>';
            cname1 = '';
        }else{
            $('namediv').innerHTML = '<font color=green>注册名称符合标准</font>';
            cname1 = 'yes';
        }
        chkreg();
    }
    //验证是否存在该用户
    $('regname').onblur = function(){
        name = $('regname').value;
        if(cname1 == 'yes'){
            xmlhttp.open('get','chkname.php?name='+name,true);
            xmlhttp.onreadystatechange = function(){
                if(xmlhttp.readyState == 4){
                    if(xmlhttp.status == 200){
                        var msg = xmlhttp.responseText;
                        if(msg == '1'){
                            $('namediv').innerHTML="<font color=green>恭喜您，该用户名可以使用!</font>";
                            cname2 = 'yes';
                        }else if(msg == '2'){
                            $('namediv').innerHTML="<font color=red>用户名被占用！</font>";
                            cname2 = '';
                        }else{
                            $('namediv').innerHTML="<font color=red>"+msg+"</font>";
                            cname2 = '';
                        }
                    }
                }
                chkreg();
            }
            xmlhttp.send(null);
        }
    }
    //验证密码
    $('regpwd1').onkeyup = function(){
        pwd = $('regpwd1').value;
        pwd2 = $('regpwd2').value;
        if(pwd.length < 6){
            $('pwddiv1').innerHTML = '<font color=red>密码长度最少需要6位</font>';
            cpwd1 = '';
        }else if(pwd.length >= 6 && pwd.length < 12){
            $('pwddiv1').innerHTML = '<font color=green>密码符合要求。密码强度：弱</font>';
            cpwd1 = 'yes';
        }else if((pwd.match(/^[0-9]*$/)!=null) || (pwd.match(/^[a-zA-Z]*$/) != null )){
            $('pwddiv1').innerHTML = '<font color=green>密码符合要求。密码强度：中</font>';
            cpwd1 = 'yes';
        }else{
            $('pwddiv1').innerHTML = '<font color=green>密码符合要求。密码强度：高</font>';
            cpwd1 = 'yes';
        }
        if(pwd2 != '' && pwd != pwd2){
            $('pwddiv2').innerHTML = '<font color=red>两次密码不一致!</font>';
            cpwd2 = '';
        }else if(pwd2 != '' && pwd == pwd2){
            $('pwddiv2').innerHTML = '<font color=green>密码输入正确</font>';
            cpwd2 = 'yes';
        }
        chkreg();
    }
    //验证确认密码
    $('regpwd2').onkeyup = function(){
        pwd1 = $('regpwd1').value;
        pwd2 = $('regpwd2').value;
        if(pwd1 != pwd2){
            $('pwddiv2').innerHTML = '<font color=red>两次密码不一致!</font>';
            cpwd2 = '';
        }else{
            $('pwddiv2').innerHTML = '<font color=green>密码输入正确</font>';
            cpwd2 = 'yes';
            chkreg();
        }
    }
    //验证email
    $('email').onkeyup = function(){
        emailreg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
        $('email').value.match(emailreg);
        if($('email').value.match(emailreg) == null){
            $('emaildiv').innerHTML = '<font color=red>错误的email格式</font>';
            cemail = '';
        }else{
            $('emaildiv').innerHTML = '<font color=green>输入正确</font>';
            cemail = 'yes';
            
        }
        chkreg();
    }

    //显示/隐藏详细信息
    $('morebtn').onclick = function(){
        
        if($('morediv').style.display == ''){
            $('morediv').style.display = 'none';
        }else{
            $('morediv').style.display = '';
        }
    }
    //登录按钮
    $('logbtn').onclick = function(){
        window.open('login.php','_parent','',false);
    }
    //正式注册
    $('regbtn').onclick = function(){
        $('imgdiv').style.visibility = 'visible';
        url = 'register_chk.php?name='+$('regname').value+'&pwd='+$('regpwd1').value+'&email='+$('email').value;
        url += '&question=' +$('question').value+'&answer='+$('answer').value;
        url += '&realname=' +$('realname').value+'&birthday='+$('birthday').value;
        url += '&telephone='+$('telephone').value+'&qq='+$('qq').value;
        xmlhttp.open('get',url,true);
        xmlhttp.onreadystatechange = function(){
            if(xmlhttp.readyState == 4){
                if(xmlhttp.status == 200){
                    msg = xmlhttp.responseText;
                    if(msg == '1'){
                        alert('注册成功，请到您的邮箱中获取激活码！');
                        location='index.php';
                    }else if(msg == '-1'){
                        alert('您的服务器不支持Zend_mail，或者邮箱填写错误。请仔细检查！！');
                    }else{
                        alert(msg);
                    }
                    $('imgdiv').style.visibility = 'hidden';
                }
            }
        }
        xmlhttp.send(null);
    }

}


xmlhttprequest.js

var xmlhttp = false;
if (window.XMLHttpRequest) {                                     //Mozilla、Safari等浏览器
    xmlhttp = new XMLHttpRequest();
}
else if (window.ActiveXObject) {                                 //IE浏览器
    try {
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
        try {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
       } catch (e) {}
    }
}

chkname.php

<?php
include_once "conn/conn.php";
$sql = "select * from tb_member where name='".$_GET['name']."'";
$num = $conne->getRowsNum($sql);
if($num == 1){
    echo '2';
}else if($num == 0){
    echo '1';
}else{
    echo $conne->msg_error();
}
?>






小池编程的博客
关注
JAVA——AJAX注册验证
z1427094386的博客
06-19 767
JAVA AJAX注册验证 整体架构为 后端代码 dao层 的接口 package cn.hp.dao; import cn.hp.model.Teacher; public interface TeacherInfoDao { /** * 根据账号来查找教师 * @param name 教师账号 * @return 教师信息 */ public Teacher FindTeacherByName(String name); } imp
ajax实现简单注册验证
Today's Role
10-28 979
jQuery的ajax小实例
AJAX实现注册验证的例子
03-28
AJAX实现注册验证的例子 基础的AJAX 、适合 初学者学习 。注释很详细。
注册（Ajax验证）
wanwu_fusu的博客
10-19 603
&lt;html&gt;   &lt;head&gt;     &lt;script&gt;           function checkage(){          var age=document.getElementById("age").value;          if(age&lt;16||age&gt;24){          alert("输入年龄范围应该为1...
AJAX注册用户验证（珍藏版）
刘海闯的专栏
11-17 8173
reg.html (注册页面) ajax用户验证 Ajax用户注册验证 method=post>                       用户名:               name="username">             *                     email:
一个简单的ajax验证注册用户名
I_love_Dotnet的专栏
09-27 766
          function $(str)//方法         {           return document.getElementById(str);          //返回  text1  =  ctl00_ContentPlaceHolder1_AjaxRegist1_text1         }           function checkUsername
Ajax注册验证
12-27
### Ajax注册验证技术详解 #### 一、引言 在Web开发中，用户体验是至关重要的。传统的表单提交方式在用户填写完表单并点击提交后，整个页面会重新加载，这种方式不仅耗时而且用户体验较差。为了改善这一点，Ajax...
Ajax注册验证.rar
01-29
Ajax注册验证技术是现代Web开发中的一个重要组成部分，它允许网页在不刷新整个页面的情况下与服务器进行数据交互，提升用户体验。这个“Ajax注册验证.rar”压缩包文件包含了一份关于如何使用Ajax进行用户注册验证的...
asp ajax注册验证之 防止用户名输入空格
10-29
注册验证是互联网应用中一项基础且重要的功能。它确保用户输入的信息符合特定规则，比如用户名和密码的复杂度、邮箱格式等。在这个文件中，我们关注的是如何在注册验证过程中防止用户名输入空格。这通常是为了确保...
HTML5 Ajax验证的用户注册表单.rar
07-10
HTML5 Ajax验证的用户注册表单，无刷新输入判断的HTML5表单特效，界面风格漂亮，功能简洁实用，表单验证方面包括：用户名、邮箱地址判断、密码字符验证、两次密码是否一致判断、是否同意注册协议等，几个常用的判断，当然其它功能就需要你自己添加了。
ajax无刷新注册验证实例
09-06
一个简单的ajax无刷新注册验证实例的源码，值得新手学习。
Ajax注册验证[借鉴].pdf
10-19
在Ajax注册验证中，主要涉及了两个核心技术：客户端的JavaScript（包括AJAX）和服务器端的Servlet。这里我们将深入解析这两个部分以及它们如何协同工作来实现注册时的用户名验证。 1. **客户端JavaScript (AJAX)** ...
ajax 用户注册验证
我是张先生
12-03 524
<!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...
Jquery_Ajax 注册验证（Struts2）<学习随笔>
强强强子的博客
08-28 3823
action public String ajaxYanZheng() throws Exception{   String name=ServletActionContext.getRequest().getParameter("name");         //查询是否存在 要查询的账号  如果不存在 返回 true 否则 false      Boolean b= us.byFin
ajax注册页面异步验证
学习的路上
03-06 243
ajax的原理大家可以看上图 如何获得Ajax对象？ XMLHttpRequest没有标准化，要区分浏览器。 function getXhr(){ var xhr = null; if(window.XMLHttpRequest){ //非ie浏览器 xhr = new XMLHttpRequest(); }else{ //ie浏览器 xhr = new ActiveXOb...
Ajax验证用户名是否已经注册（Servlet实现）
摊开零乱的滋味
01-18 692
客户端：提供一个输入框，当发生keyup事件时，调用函数isExist()，向服务器端发送请求，在readyStateChangeHandle()中得到服务器端的返回值并设置到result中。 index.html ajax验证用户名是否已经注册 var xmlHttp; //创建XMLHttpRequest对象
Ajax学习笔记——实现注册界面用户名的验证
ashleyjun的博客
09-06 533
Ajax（Asynchronous JavaScript and XML，异步的 JavaScript 和 XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 传统的网页（不使用Ajax），如果需要更新内容必须重新加载整个网页，较麻烦，用户体验差。 Ajax主要用于创建快速动态网页；应用实例：新浪微博、Google 地图、开心网等等。 JSON（JavaScript Objec...
Ajax之简单验证登录注册
Welkin_qing的博客
12-20 938
一、 传统Ajax注册登录 html主页： &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;Document&amp
史上最强大ASP+AJAX注册验证程序
ASP+AJAX注册即时提示程序代码，用于增强用户注册时的验证功能，提供用户名、密码、邮箱、验证码、中文字符、QQ号码和身份证号码等多方面的检查。 在网页开发中，用户注册是必不可少的一个环节。为了提高用户体验并...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值