建立良好体验度的Web注册系统ajax


Posted in Javascript onJuly 09, 2007

*项目名称:具有良好体验度的Web注册系统
*作者:草履虫
*联系:caolvchong@gmail.com
*时间:2007-6-29
*起因和版权说明:
  1.蓝色理想上有位会员发布了个类似的系统,提问说验证码不支持firefox的刷新,于是萌生念头做一个.本系统外观(按钮取色等)借鉴了该系统,但细节实现原理并不相同(该文地址:http://bbs.blueidea.com/thread-2761325-1-4.html).
  2.另外,自己做的这个注册系统中利用了网络上的无组件验证码(作者sipo)
  3.至于密码强度的算法借鉴了蓝色理想的一篇文章(http://www.blueidea.com/tech/web/2006/4324.asp),但该算法并不十分理想,如果有更好算法的朋友不妨交流一下
*特点和知识点:
  1.AJAX验证用户名和验证码,同时异步进行用户名注册(都属于AJAX的很基础部分)
  2.支持验证码刷新(包括firefox平台下)
  3.密码,邮箱,用户名等即时检测(利用javascript DOM)
  4.HTML通过W3C Strict验证,CSS也通过W3C CSS验证(其实这个有点多余,并不完全必要)
*开发平台:Windows2003 IIS6.0 Access数据库
*工具:DreamWeaver(写ASP),Aptana(写Javascript,HTML和CSS),Emeditor(写这篇文章),Access2003(数据库)
*测试平台:Firefox2.0,Opera9.21,IE6.0,IE7.0
*演示地址:http://finish.3322.org/reg/reg.htm(短期有效,在本机上,可能访问不顺畅)
*原文地址:http://cceer.xmu.edu.cn/blog/view.asp?id=52
*补充:
  如果你使用这个注册系统,请务必注意下列问题:
    本系统没有对密码进行加密,如果需要,可以搜索MD5加密
    本系统没有进行防注入设置,如果需要,可以搜索SQL防注入
  限于本人水平上的限制,错误和不足在所难免,如果你有问题或者建议,请联系我,感谢!
*这里是效果图
限于文章长度的限制,只帖出两个js文件和一个显示注册页面,至于后台处理页面以及css文件等,请在压缩包中查看
1.reg.htm(由于BLOG会过滤,分开三个部分写) 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312"> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<title>草履虫---简易AJAX注册页面</title>
  <link href="reg.css" type="text/css" rel="stylesheet" />
  <script src="detect.js" type="text/javascript"></script>
  <script src="ajax.js" type="text/javascript"></script>
</head>
<body onload="check_data();">

view plaincopy to clipboardprint?
<UL>  
<LI id=title>草履虫---Web注册系统   
<LI class=underline>  
    <LABEL>注册用户名:   
        <INPUT onblur=check_id(this.value); maxLength=16>  
    </LABEL>  
    <SPAN>支持汉字,单词,数字,敏感字符屏蔽</SPAN>  

<LI>  
    <LABEL>注册密码:   
        <INPUT onblur=check_password(); type=password value="">  
    </LABEL>  
    <SPAN>密码在6-16位之间,敏感字符屏蔽</SPAN>  

<LI class=underline>  
    <LABEL>重复密码:   
        <INPUT onblur=check_pw(); type=password maxLength=16 value="">  
    </LABEL>  
    <SPAN></SPAN>  

<LI class=underline>  
    <LABEL>邮箱:   
        <INPUT onblur=check_email(this.value)>  
    </LABEL>  
    <SPAN>email是联系重要手段</SPAN>  

<LI class=underline>验证码:   
    <INPUT onblur=checkcode(this.value); maxLength=5>  
    <LABEL>  
        <IMG id=src onclick="this.src=this.src+'?'+Math.random();" height=18 alt=看不清楚?请点击刷新 src="getcode.asp">  
        <SPAN>看不清楚?请点击验证码刷新</SPAN>  
    </LABEL>  

<LI class=underline>  
    相关协议:   
        <LABEL onclick=accept_info();><INPUT type=radio name=info>接受</LABEL>  
        <LABEL onclick=refuse_info();><INPUT type=radio name=info>不接受</LABEL>    
        <INPUT class=button type=button value=阅读协议>  

<LI class=underline>  
    <INPUT class="button setleft" onclick="sendinfo($('input')[0].value,$('input')[1].value,$('input')[3].value)" type=submit value=注册>  
    <INPUT class=button onclick=reset_info() type=reset value=重置>  
    <SPAN></SPAN>  

<LI class=copyright>作者:草履虫   
<LI class=copyright>时间:2007-6-28   
<LI class=copyright>联系:caolvchong@gmail.com   
<LI class=copyright>Blog---Web2.0之路:<A href="http://cceer.xmu.edu.cn/blog/">http://cceer.xmu.edu.cn/blog/</A>  
/LI></UL>  

     
        草履虫---Web注册系统

            注册用户名:

            
            支持汉字,单词,数字,敏感字符屏蔽

        
            注册密码:

            
            密码在6-16位之间,敏感字符屏蔽

        
            重复密码:

            

        

            邮箱:

            
            email是联系重要手段

        验证码:

            

                看不清楚?请点击验证码刷新

        

            相关协议:
                接受
                不接受 

        

            

            

        作者:草履虫
        时间:2007-6-28
        联系:caolvchong@gmail.com
        Blog---Web2.0之路:http://cceer.xmu.edu.cn/blog/

</body>
</html>

2.detect.js view plaincopy to clipboardprint?
    var flag=[0,0,0,0,0,0];   
    var $=function(tagName){   
        return document.getElementsByTagName(tagName);   
    }   
//----------接受协议   
    function accept_info(){   
        flag[0]=1;   
        check_data();   
    }   
//----------拒绝协议   
    function refuse_info(){   
        flag[0]=0;   
        check_data();   
    }   
//----------重置   
    function reset_info(){   
        var info=["支持汉字,单词,数字,敏感字符屏蔽","密码在6-16位之间,敏感字符屏蔽","","email是联系重要手段","看不清楚?请点击验证码刷新"]   
        for(var i=0;i<$("span").length;i++){   
            $("span")[i].innerHTML=info[i];   
            flag[i]=0;   
        }   
        for(var i=0;i<$("input").length-3;i++){   
            $("input")[i].value="";   
        }   
        check_data();   
    }   
//----------邮箱检测   
    function check_email(email){   
        var reEmail=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;   
        var b_email=reEmail.test(email);   
        if(b_email){   
            $("span")[3].innerHTML="<IMG src="yesok.gif"> 邮箱可用";   
            flag[1]=1;   
            check_data();   
        }   
        else{   
            $("span")[3].innerHTML="<IMG src="yesno.gif"> 邮箱错误";   
            flag[1]=0;   
            check_data();   
        }   
    }   
//----------密码检测   
    function check_password(obj){   
        var pwd=$("input")[1].value;   
        var reChinese=/[\u0391-\uFFE5]+/;   
        var b_chinese=reChinese.test(pwd);   
        var reSpace=/\s+/;   
        var b_space=reSpace.test(pwd);   
        //-------长度测试   
        if(pwd.length<6){   
            $("span")[1].innerHTML="<IMG src="yesno.gif"> 密码长度不能小于6";   
            flag[2]=0;   
            check_data();   
        }   
        //-------合法性检测:不能包含汉字   
        else if(b_chinese){   
            $("span")[1].innerHTML="<IMG src="yesno.gif"> 密码不能包含中文";   
            flag[2]=0;   
            check_data();   
        }   
        //-------合法性检测:不能包含空格   
        else if(b_space){   
            $("span")[1].innerHTML="<IMG src="yesno.gif"> 密码不能包含空格";   
            flag[2]=0;   
            check_data();   
        }   
        //-------合法时显示密码强度   
        else{   
            //定义对应的消息提示   
            var num=getResult(pwd);   
            var msg=new Array("<IMG src="bad.gif"> 密码强度差","<IMG src="comm.gif"> 密码强度一般","<IMG src="good.gif"> 密码强度强壮");   
            $("span")[1].innerHTML=msg[num];   
            if($("input")[2].value!=""){   
                check_pw();   
                }   
            return flag[2]=1;   
            check_data();   
            }   
        }   
        //定义检测函数,返回0/1/2分别代表差/一般/强   
        function getResult(s){   
            var ls =-1;   
            if (s.match(/[a-z]/ig)){   
                ls++;   
            }   
            if (s.match(/[0-9]/ig)){   
                ls++;   
            }   
            if (s.match(/(.[^a-z0-9])/ig)){   
                ls++;   
            }   
            return ls;   
        }   
    //---------密码一致性检测     
        function check_pw(){   
            var pwd=$("input")[1].value.toString();   
            var check_pwd=$("input")[2].value.toString();   
            if(flag[2]==1){   
                if(pwd==check_pwd){   
                    $("span")[2].innerHTML="<IMG src="yesok.gif"> 密码可以使用";   
                    flag[3]=1;   
                    check_data();   
                }   
                else{   
                    $("span")[2].innerHTML="<IMG src="yesno.gif"> 两次密码不相同";   
                    flag[3]=0;   
                    check_data();   
                }   
            }   
        }   
    //---------用户名合法性检测   
        function check_id(id_name){//只能字母和数字,是否相同用AJAX判断   
            var reId=/^[\w\u0391-\uFFE5]+$/;   
            var b_id=reId.test(id_name);   
            if(!b_id){   
                $("span")[0].innerHTML="<IMG src="yesno.gif"> ID命名非法";   
                flag[4]=0;   
                check_data();   
            }   
            else{//合法用户名用ajax的checkid()检测是否被注册过   
                checkid(id_name);   
            }   
        }   
    //---------检查数据,使提交按钮是否生效   
        function check_data(){   
            if(flag[0]==1 && flag[1]==1 && flag[2]==1 && flag[3]==1 && flag[4]==1 && flag[5]==1){   
                $("input")[8].disabled=false;   
            }   
            else{   
                $("input")[8].disabled=true;   
            }   
        }   

//--------------------------------------------------------------------  

        var flag=[0,0,0,0,0,0];
        var $=function(tagName){
            return document.getElementsByTagName(tagName);
        }
    //----------接受协议
        function accept_info(){
            flag[0]=1;
            check_data();
        }
    //----------拒绝协议
        function refuse_info(){
            flag[0]=0;
            check_data();
        }
    //----------重置
        function reset_info(){
            var info=["支持汉字,单词,数字,敏感字符屏蔽","密码在6-16位之间,敏感字符屏蔽","","email是联系重要手段","看不清楚?请点击验证码刷新"]
            for(var i=0;i<$("span").length;i++){
                $("span")[i].innerHTML=info[i];
                flag[i]=0;
            }
            for(var i=0;i<$("input").length-3;i++){
                $("input")[i].value="";
            }
            check_data();
        }
    //----------邮箱检测
        function check_email(email){
            var reEmail=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
            var b_email=reEmail.test(email);
            if(b_email){
                $("span")[3].innerHTML=" 邮箱可用";
                flag[1]=1;
                check_data();
            }
            else{
                $("span")[3].innerHTML=" 邮箱错误";
                flag[1]=0;
                check_data();
            }
        }
    //----------密码检测
        function check_password(obj){
            var pwd=$("input")[1].value;
            var reChinese=/[\u0391-\uFFE5]+/;
            var b_chinese=reChinese.test(pwd);
            var reSpace=/\s+/;
            var b_space=reSpace.test(pwd);
            //-------长度测试
            if(pwd.length<6){
                $("span")[1].innerHTML=" 密码长度不能小于6";
                flag[2]=0;
                check_data();
            }
            //-------合法性检测:不能包含汉字
            else if(b_chinese){
                $("span")[1].innerHTML=" 密码不能包含中文";
                flag[2]=0;
                check_data();
            }
            //-------合法性检测:不能包含空格
            else if(b_space){
                $("span")[1].innerHTML=" 密码不能包含空格";
                flag[2]=0;
                check_data();
            }
            //-------合法时显示密码强度
            else{
                //定义对应的消息提示
                var num=getResult(pwd);
                var msg=new Array(" 密码强度差"," 密码强度一般"," 密码强度强壮");
                $("span")[1].innerHTML=msg[num];
                if($("input")[2].value!=""){
                    check_pw();
                    }
                return flag[2]=1;
                check_data();
                }
            }
            //定义检测函数,返回0/1/2分别代表差/一般/强
            function getResult(s){
                var ls =-1;
                if (s.match(/[a-z]/ig)){
                    ls++;
                }
                if (s.match(/[0-9]/ig)){
                    ls++;
                }
                 if (s.match(/(.[^a-z0-9])/ig)){
                    ls++;
                }
                return ls;
            }
        //---------密码一致性检测    
            function check_pw(){
                var pwd=$("input")[1].value.toString();
                var check_pwd=$("input")[2].value.toString();
                if(flag[2]==1){
                    if(pwd==check_pwd){
                        $("span")[2].innerHTML=" 密码可以使用";
                        flag[3]=1;
                        check_data();
                    }
                    else{
                        $("span")[2].innerHTML=" 两次密码不相同";
                        flag[3]=0;
                        check_data();
                    }
                }
            }
        //---------用户名合法性检测
            function check_id(id_name){//只能字母和数字,是否相同用AJAX判断
                var reId=/^[\w\u0391-\uFFE5]+$/;
                var b_id=reId.test(id_name);
                if(!b_id){
                    $("span")[0].innerHTML=" ID命名非法";
                    flag[4]=0;
                    check_data();
                }
                else{//合法用户名用ajax的checkid()检测是否被注册过
                    checkid(id_name);
                }
            }
        //---------检查数据,使提交按钮是否生效
            function check_data(){
                if(flag[0]==1 && flag[1]==1 && flag[2]==1 && flag[3]==1 && flag[4]==1 && flag[5]==1){
                    $("input")[8].disabled=false;
                }
                else{
                    $("input")[8].disabled=true;
                }
            }

    //--------------------------------------------------------------------
3.ajax.js view plaincopy to clipboardprint?
function checkcode(regcode){       
    var xmlhttp;   
    try{   
        xmlhttp=new XMLHttpRequest();   
        }   
    catch(e){   
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");   
        }   
    xmlhttp.onreadystatechange=function(){   
    if (xmlhttp.readyState==4){   
        if (xmlhttp.status==200){   
            var data=xmlhttp.responseText;   
            code_result(data);   
            }   
        else{   
            $("span")[4].innerHTML="验证码校验失败,请联系管理员";   
            }   
        }   
    else{   
        $("span")[4].innerHTML="正在进行验证码校验...";   
        }   
    }   
    xmlhttp.open("post", "check_code.asp", true);   
    xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');   
    xmlhttp.send("regcode="+escape(regcode));   
}   
function code_result(data){   
    var resultbox=$("span")[4];   
    if(data==1){   
        resultbox.innerHTML='<IMG src="yesok.gif"> 验证码正确';   
        flag[5]=1;   
        check_data();   
        }   
    else{   
        resultbox.innerHTML='<IMG src="yesno.gif"> 验证码错误';   
        flag[5]=0;   
        check_data();   
        }   
}   

//--------------------------------------------------------------------   
function checkid(regid){       
    var xmlhttp;   
    try{   
        xmlhttp=new XMLHttpRequest();   
        }   
    catch(e){   
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");   
        }   
    xmlhttp.onreadystatechange=function(){   
    if (xmlhttp.readyState==4){   
        if (xmlhttp.status==200){   
            var data=xmlhttp.responseText;   
            id_result(data);   
            }   
        else{   
            $("span")[0].innerHTML="用户名检测失败,请联系管理员";   
            }   
        }   
    else{   
        $("span")[0].innerHTML="正在进行用户名校验...";   
        }   
    }   
    xmlhttp.open("post", "check_id.asp", true);   
    xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');   
    xmlhttp.send("regid="+escape(regid));   
}   
function id_result(data){   
    var resultbox=$("span")[0];   
    if(data==1){   
        resultbox.innerHTML='<IMG src="yesok.gif"> 用户名可用';   
        flag[4]=1;   
        check_data();   
        }   
    else{   
        resultbox.innerHTML='<IMG src="yesno.gif"> 该用户名已经被注册';   
        flag[4]=0;   
        check_data();   
    }   
}   

//--------------------------------------------------------------------   
function sendinfo(regname,pwd,email){   
    var xmlhttp;   
    try{   
        xmlhttp=new XMLHttpRequest();   
        }   
    catch(e){   
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");   
        }   
    xmlhttp.onreadystatechange=function(){   
    if (xmlhttp.readyState==4){   
        if (xmlhttp.status==200){   
            var data=xmlhttp.responseText;   
            reg_result(data);   
            }   
        else{   
            $("span")[5].innerHTML="注册失败,请联系管理员";   
            }   
        }   
    else{   
        $("span")[5].innerHTML="正在进行用户名注册...";   
        }   
    }   
    xmlhttp.open("post", "reg.asp", true);   
    xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');   
    xmlhttp.send("regname="+escape(regname)+"&pwd="+escape(pwd)+"&email="+escape(email));   
}   
function reg_result(data){   
    if(data==1){   
        $("span")[5].innerHTML='<A href="http://cceer.xmu.edu.cn/blog/" target=_blank>'+$("input")[0].value+",您好.请点击这里登陆</A>";   
        }   
    else{   
        $("span")[5].innerHTML="注册失败,请联系管理员";   
    }   
    }  
*这里是所有文件的打包下载(包括所有文件,图片,数据库等,解压后请在IIS下测试)
良好体验度的注册系统.rar

Javascript 相关文章推荐
jQuery中将函数赋值给变量的调用方法
Mar 23 Javascript
通过JQuery将DIV的滚动条滚动到指定的位置方便自动定位
May 05 Javascript
基于iScroll实现下拉刷新和上滑加载效果
Jul 18 Javascript
Three.js利用Detector.js插件如何实现兼容性检测详解
Sep 26 Javascript
基于JavaScript实现简单的音频播放功能
Jan 07 Javascript
11行JS代码制作二维码生成功能
Mar 09 Javascript
react中fetch之cors跨域请求的实现方法
Mar 14 Javascript
vue悬浮可拖拽悬浮按钮的实例代码
Aug 20 Javascript
Vue3.x源码调试的实现方法
Oct 13 Javascript
深入解读VUE中的异步渲染的实现
Jun 19 Javascript
js仿京东放大镜效果
Aug 09 Javascript
ant design 日期格式化的实现
Oct 27 Javascript
HTML中事件触发列表与解说
Jul 09 #Javascript
建议大家看下JavaScript重要知识更新
Jul 08 #Javascript
Javascript 个人笔记(没有整理,很乱)
Jul 07 #Javascript
使用户点击后退按钮使效三行代码
Jul 07 #Javascript
WordPress 插件——CoolCode使用方法与下载
Jul 02 #Javascript
syntaxhighlighter 使用方法
Jul 02 #Javascript
javascript之dhDataGrid Ver2.0.0代码
Jul 01 #Javascript
You might like
PHP实现异步调用方法研究与分享
2011/10/27 PHP
php地址引用(php地址引用的效率问题)
2012/03/23 PHP
php把session写入数据库示例
2014/02/26 PHP
完善CodeIgniter在IDE中代码提示功能的方法
2014/07/19 PHP
Mac下php 5升级到php 7的步骤详解
2017/04/26 PHP
PHP双向链表定义与用法示例
2018/01/31 PHP
PHP标准库(PHP SPL)详解
2019/03/16 PHP
PHP使用观察者模式处理异常信息的方法详解
2019/09/24 PHP
php7 参数、整形及字符串处理机制修改实例分析
2020/05/25 PHP
Open and Print a Word Document
2007/06/15 Javascript
js解析与序列化json数据(三)json的解析探讨
2013/02/01 Javascript
javascript实现TreeView 无刷新展开的实例代码
2013/07/13 Javascript
Javascript delete 引用类型对象
2013/11/01 Javascript
JavaScript字符串对象toLowerCase方法入门实例(用于把字母转换为小写)
2014/10/17 Javascript
javascript事件委托的方式绑定详解
2015/06/10 Javascript
AngularJS手动表单验证
2016/02/01 Javascript
浅谈JS原型对象和原型链
2016/03/02 Javascript
Laravel整合Bootstrap 4的完整方案(推荐)
2018/01/25 Javascript
JavaScript中set与get方法用法示例
2018/08/15 Javascript
详解Vue.js在页面加载时执行某个方法
2018/11/20 Javascript
JS大坑之19位数的Number型精度丢失问题详解
2019/04/22 Javascript
微信小程序自定义导航栏(模板化)
2019/11/15 Javascript
python实现划词翻译
2020/04/23 Python
Python数据类型之Dict字典实例详解
2019/05/07 Python
Pycharm+django2.2+python3.6+MySQL实现简单的考试报名系统
2019/09/05 Python
TensorFlow的环境配置与安装教程详解(win10+GeForce GTX1060+CUDA 9.0+cuDNN7.3+tensorflow-gpu 1.12.0+python3.5.5)
2020/06/22 Python
欧洲著名的珠宝和手表网上商城:uhrcenter
2017/04/10 全球购物
Java平台和其他软件平台有什么不同
2015/06/05 面试题
Linux如何压缩可执行文件
2014/03/27 面试题
船舶专业个人求职信范文
2014/01/02 职场文书
计算机应用应届生求职信
2014/07/12 职场文书
法院四风对照检查材料思想汇报
2014/10/06 职场文书
单位接收函范文
2015/01/30 职场文书
政协工作总结2015
2015/05/20 职场文书
一文搞清楚MySQL count(*)、count(1)、count(col)区别
2022/03/03 MySQL
python中Pyqt5使用Qlabel标签播放视频
2022/04/22 Python