[教程+分享]具有良好体验度的Web注册系统

*项目名称:具有良好体验度的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防注入
限于本人水平上的限制,错误和不足在所难免,如果你有问题或者建议,请联系我,感谢!
*这里是效果图

这里是所有文件的打包下载(包括所有文件,图片,数据库等,解压后请在IIS下测试)
本地下载
限于文章长度的限制,只帖出两个js文件和一个显示注册页面,至于后台处理页面以及css文件等,请在压缩包中查看 
注册页面reg.htm 


代码如下:

<!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" c />
    <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 >
   <ul>
  <li id="title">草履虫---Web注册系统</li>
  <li class="underline">
   <label>注册用户名:
    <input type="text" maxlength="16" />
   </label>
   <span>支持汉字,单词,数字,敏感字符屏蔽</span>
  </li>
  <li>
   <label>注册密码:
    <input type="password"  />
   </label>
   <span>密码在6-16位之间,敏感字符屏蔽</span>
  </li>
  <li class="underline">
   <label>重复密码:
    <input type="password" maxlength="16" />
   </label>
   <span></span>
  </li>
  <li class="underline">
   <label>邮箱:
    <input type="text" />
   </label>
   <span>email是联系重要手段</span>
  </li>
  <li class="underline">验证码:
   <input type="text" maxlength="5" />
   <label>
    <img src="getcode.asp" id="src" height="18" alt="看不清楚?请点击刷新" />
    <span>看不清楚?请点击验证码刷新</span>
   </label>
  </li>
  <li class="underline">
   相关协议:
    <label ><input type="radio" name="info"/>接受</label>
    <label ><input type="radio" name="info"/>不接受</label> 
    <input type="button" value="阅读协议" class="button" />
  </li>
  <li class="underline">
   <input type="submit" value="注册" class="button setleft" />
   <input type="reset" value="重置" class="button"  />
   <span></span>
  </li>
  <li class="copyright">作者:草履虫</li>
  <li class="copyright">时间:2007-6-28</li>
  <li class="copyright">联系:caolvchong@gmail.com</li>
  <li class="copyright">Blog---Web2.0之路:<a href="[url=http://cceer.xmu.edu.cn/blog/%22%3Ehttp://cceer.xmu.edu.cn/blog/%3C/a%3E%3C/li]http://cceer.xmu.edu.cn/blog/">http://cceer.xmu.edu.cn/blog/<;/a></li[/url]>
</ul>
  </body>
</html>

2.数据合法性检测detect.js 


代码如下:

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").innerHTML=info;
    flag=0;
   }
   for(var i=0;i<$("input").length-3;i++){
    $("input").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;
    }
   }

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

3.关于ajax数据交互ajax.js 


代码如下:

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="注册失败,请联系管理员";
}
}

(0)

相关推荐

  • [教程+分享]具有良好体验度的Web注册系统

    *项目名称:具有良好体验度的Web注册系统 *作者:草履虫 *联系:caolvchong@gmail.com *时间:2007-6-29 *起因和版权说明: 1.蓝色理想上有位会员发布了个类似的系统,提问说验证码不支持firefox的刷新,于是萌生念头做一个.本系统外观(按钮取色等)借鉴了该系统,但细节实现原理并不相同(该文地址:http://bbs.blueidea.com/thread-2761325-1-4.html). 2.另外,自己做的这个注册系统中利用了网络上的无组件验证码(作者si

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

    *项目名称:具有良好体验度的Web注册系统 *作者:草履虫 *联系:caolvchong@gmail.com *时间:2007-6-29 *起因和版权说明:   1.蓝色理想上有位会员发布了个类似的系统,提问说验证码不支持firefox的刷新,于是萌生念头做一个.本系统外观(按钮取色等)借鉴了该系统,但细节实现原理并不相同(该文地址:http://bbs.blueidea.com/thread-2761325-1-4.html).   2.另外,自己做的这个注册系统中利用了网络上的无组件验证码(

  • 页面利用渐进式JPEG来提升用户体验度

    今天才认识到原来JPEG文件有两种保存方式他们分别是Baseline JPEG(标准型)和Progressive JPEG(渐进式).两种格式有相同尺寸以及图像数据,他们的扩展名也是相同的,唯一的区别是二者显示的方式不同. Baseline JPEG 这种类型的JPEG文件存储方式是按从上到下的扫描方式,把每一行顺序的保存在JPEG文件中.打开这个文件显示它的内容时,数据将按照存储时的顺序从上到下一行一行的被显示出来,直到所有的数据都被读完,就完成了整张图片的显示.如果文件较大或者网络下载速度较

  • 基于移动端真机调试的图文教程(分享)

    最近要分析web页面,在安卓和ios上的性能差异,除了操作系统本身不同之外,应该还多地方要探究的,第一步就是要在真机上分析.所以总结一下几个方法. 1.Mac+iPhone+ Lightning+Safari 浏览器 步骤: 1)用:Lighting线将mac与iphone相连 2)iphone打开Web检查器(设置->Safari->高级->Web检查器) 3)iphone用safari打开要进行分析的页面 4)mac打开safari浏览器(菜单->开发->对应的手机名称-

  • python 包之 Pillow 图像处理教程分享

    目录 一.安装 二.打开图片 三.转换格式并保存 四.创建缩略图 五.获取图片属性 六.图片信息 七.调色板 八.画板 九.图片模式 十.模式转换 十一.矩阵模式转换 十二.图片尺寸 十三.通道分离 十四.复制.裁剪.粘贴.合并 十五.几何变换 十六.高级图片处理 十七.滤波器处理 十八.设置透明度合成两张图 十九.设置模式合成两张图 二十.草稿模式 二十一.获取通道名称 二十二.获取包围盒 二十三.获取像素值 二十四.获取图片极值 二十五.指定位置像素值 二十六.获取图像直方图 二十七.内存分

  • Go语言学习之golang-jwt/jwt的教程分享

    目录 一.介绍 二.代码实现 -对称加密 hsa(hash加密) 2.1 加密生成token 2.2 解密token得到原始数据 三.代码实现 -非对称加密 rsa(我们这里使用rsa256) 2.1 生成 rsa 私钥和公钥 2.2 加密生成token 2.2 解密token 一.介绍 jwt是 json web token的简称. go使用jwt目前,主流使用的jwt库是golang-jwt/jwt 1.1 如何安装 go get -u github.com/golang-jwt/jwt/v

  • Python中Scrapy框架的入门教程分享

    目录 前言 安装Scrapy 创建一个Scrapy项目 创建一个爬虫 运行爬虫 结论 前言 Scrapy是一个基于Python的Web爬虫框架,可以快速方便地从互联网上获取数据并进行处理.它的设计思想是基于Twisted异步网络框架,可以同时处理多个请求,并且可以使用多种处理数据的方式,如提取数据.存储数据等. 本教程将介绍如何使用Scrapy框架来编写一个简单的爬虫,从而让您了解Scrapy框架的基本使用方法. 安装Scrapy 首先,您需要在您的计算机上安装Scrapy框架.您可以使用以下命

  • Git安装和使用图文教程(分享)

    实际项目开发中,我们经常会用一些版本控制器来托管自己的代码,今天就来总结下Git的相关用法,废话不多说,直接开写. 目的:通过Git管理github托管项目代码 一.下载安装Git 1.下载Git 官方地址为:https://git-scm.com/download/win 2.下载完之后,双击安装 3.选择安装目录 4.选择组件 5.开始菜单目录名设置 6.选择使用命令行环境 7.以下三步默认,直接点击下一步 8.安装完成 9.检验是否安装成功 回到电脑桌面,鼠标右击如果看到有两个git单词则

  • PHP服务端环境搭建的图文教程(分享)

    一.PHP服务端环境搭建 1.php 服务端环境 安装套件 xampp(apach+mysql+php解释器) F:\MyDoc文件(重要)\DL_学习\download重要资源\apache服务器组件 安装 此时进入xmapp面板显示成功运行 测试本地Apache服务器是否开启:浏览器中输入127.0.0.1 回车即可进入xmapp官网 4.修改浏览器中默认出现的dashboard文件夹 打开xmapp下htdocs文件夹下 index.php文件 配置文件中默认跳转到本文件夹 解决办法:将h

  • ubuntu用 vmware 安装win10系统的教程(分享)

    1,下载 VMware Workstation 14 Pro 官网:https://www.vmware.com/cn.html 需要注册一下才能下载,当然你也可以在其他网站下载.需要下载VMware Workstation 14.0.0 Pro for Linux 这个版本,下载结束之后的文件是:VMware-Workstation-Full-14.0.0-6661328.x86_64.bundle 永久激活密钥: CG54H-D8D0H-H8DHY-C6X7X-N2KG6 ZC3WK-AFX

随机推荐