注册验证框(css+div+jquery)

来源：互联网发布：王向远知乎编辑：程序博客网时间：2024/06/05 11:02
效果不错的注册验证框

最近做项目需要用到注册这一模块，所以花了两天的时间手工css+div写了注册框，参考了不少网站，总算写完了，脚本使用的是jquery，验证方式采用正则表达式，写得比较乱，以后有时间再改，先顶着用吧~~~ -
下面的原代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head>  <title> 注册框 </title>  <meta name="Generator" content="EditPlus">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content="">     <script type="text/javascript" src="jquery-1.9.js"></script>    <script type="text/javascript">     $(document).ready(function(){       //关闭事件       $(".close").click(function(){      $("#reg").css("display","none");         });         //用户名验证   $("#username").focus(function(){             if($(this).val()=='')     {    $("#reg dl dd span.message_user").css("display","block");                $("#reg dl dd span.error_user").css("display","none");             }                });        $("#username").blur(function(){                            if(!(/^(\w){3,10}$/).test($(this).val()))       {                $("#reg dl dd span.error_user").css("display","block");                $("#reg dl dd span.succ_user").css("display","none");                $("#reg dl dd span.message_user").css("display","none");       }    else   {                 $("#reg dl dd span.succ_user").css("display","block");                 $("#reg dl dd span.error_user").css("display","none"); $("#reg dl dd span.message_user").css("display","none");   }   });   //密码验证        $("#password").focus(function(){             if($(this).val()=='') {$("#reg dl dd span.message_pass").css("display","block");$("#reg dl dd span.error_pass").css("display","none"); }                 });        $("#password").blur(function(){             $("#reg dl dd span.message_pass").css("display","none");               if(!(/^[A-Za-z0-9_]{6,18}$/gi).test($(this).val()))       {                $("#reg dl dd span.error_pass").css("display","block");                $("#reg dl dd span.succ_pass").css("display","none");$("#reg dl dd span.message_pass").css("display","none");       }    else   {                 $("#reg dl dd span.succ_pass").css("display","block");                 $("#reg dl dd span.error_pass").css("display","none"); $("#reg dl dd span.message_pass").css("display","none");   }   });       //确定密码验证   $("#notpassword").blur(function(){              if($(this).val()!=$("#password").val())      {                 $("#reg dl dd span.succ_notpass").css("display","none");                 $("#reg dl dd span.error_notpass").css("display","block");         }  else     {                 $("#reg dl dd span.error_notpass").css("display","none"); $("#reg dl dd span.succ_notpass").css("display","block");     }                  });       //电话验证          $("#telephone").blur(function(){              if(!(/^1\d{10}$|^(0\d{2,3}-?|\(0\d{2,3}\))?[1-9]\d{4,7}(-\d{1,8})?$/gi).test($(this).val()))     {                  $("#reg dl dd span.error_telephone").css("display","block");                  $("#reg dl dd span.succ_telephone").css("display","none");     } else    {                  $("#reg dl dd span.succ_telephone").css("display","block");  $("#reg dl dd span.error_telephone").css("display","none");                  }       });   //真实姓名        $("#relname").blur(function(){              if(!(/[\u4E00-\u9FA5]{2,4}/gi).test($(this).val()) )     {                  $("#reg dl dd span.error_relname").css("display","block");                  $("#reg dl dd span.succ_relname").css("display","none");     } else    {                  $("#reg dl dd span.succ_relname").css("display","block");  $("#reg dl dd span.error_relname").css("display","none");                  }       });   //身份证号        $("#identity").blur(function(){              if(!(/^(\d{17})([0-9]|X)$/gi).test($(this).val()))     {                  $("#reg dl dd span.error_identity").css("display","block");                  $("#reg dl dd span.succ_identity").css("display","none");     } else    {                  $("#reg dl dd span.succ_identity").css("display","block");  $("#reg dl dd span.error_identity").css("display","none");                  }       });       //电子邮件       $("#email").blur(function(){              if(!(/^[A-Za-z0-9_]+@([A-Za-z0-9-]*\.){1,3}[A-Za-z]*$/gi).test($(this).val()))     {                  $("#reg dl dd span.error_email").css("display","block");                  $("#reg dl dd span.succ_email").css("display","none");     } else    {                  $("#reg dl dd span.succ_email").css("display","block");  $("#reg dl dd span.error_email").css("display","none");                  }       });});  </script>  <style type="text/css">    #reg{  width:600px;  height:550px;  border:1px solid #ccc;  position:absolute;  z-index:9999;  background:#fff;     }#reg h2 {  height:40px;  line-height:40px;  text-align:center;  font-size:14px;  letter-spacing:1px;  color:#666;  background:url(login_header.png) repeat-x;  margin:0;  padding:0;  border-bottom:1px solid #ccc;  margin:0 0 20px 0;    }    #reg h2 img {  float:right;  position:relative;  top:14px;  right:8px;  cursor:pointer;    }#reg dl {  font-size:14px;  color:#666;  margin:20px;  padding:0 0 0 10px;  position:relative;    }#reg dl dd{        margin-top:20px;        margin-left:40px;}#reg dl dd input.text{  width:200px;  height:25px;  border:1px solid #ccc;  background:#fff;  font-size:14px;  color:#666;    }       #reg dl dd input.submit {  margin-top:20px;  width:143px;  height:33px;  background:url(reg.png) no-repeat;  border:none;  cursor:pointer;    }#reg dl dd span{   display:none;   font-size:12px;   color:#333;   width:165px;   height:32px;   line-height:32px;   padding:0 0 0 35px;   position:absolute;   letter-spacing:1px;    }    #reg dl dd span.error_user,#reg dl dd span.error_pass,#reg dl dd span.error_notpass,    #reg dl dd span.error_telephone,#reg dl dd span.error_relname,#reg dl dd span.error_identity,    #reg dl dd span.error_email{  background:url(reg_error.png) no-repeat;  display:none;    }    #reg dl dd span.succ_user, #reg dl dd span.succ_pass ,#reg dl dd span.succ_notpass,#reg dl dd span.succ_telephone,#reg dl dd span.succ_relname,#reg dl dd span.succ_identity,    #reg dl dd span.succ_email{  height:14px;  line-height:14px;  background:url(reg_succ.png) no-repeat;  padding:0 0 0 20px;  display:none;      }    #reg dl dd span.error_user{  top:0px;  left:330px;      }    #reg dl dd span.succ_user {  top:10px;  left:350px;      }    #reg dl dd span.message_user,span.message_pass {  top:15px;  margin-left:80px;      }#reg dl dd span.error_pass{  top:50px;  left:330px;      }    #reg dl dd span.succ_pass{  top:60px;  left:350px;      }#reg dl dd span.error_notpass{  top:100px;  left:330px;      }    #reg dl dd span.succ_notpass{  top:110px;  left:350px;      }#reg dl dd span.error_telephone{  top:185px;  left:330px;      }    #reg dl dd span.succ_telephone{  top:195px;  left:350px;      }    #reg dl dd span.error_relname{  top:235px;  left:330px;      }    #reg dl dd span.succ_relname{  top:245px;  left:350px;      } #reg dl dd span.error_identity{  top:285px;  left:330px;      }    #reg dl dd span.succ_identity{  top:295px;  left:350px;      } #reg dl dd span.error_email{  top:335px;  left:330px;      }    #reg dl dd span.succ_email{  top:345px;  left:350px;      }#reg dl dd .message_user{    margin-top:-20px;    left:260px;}#reg dl dd .message_pass{       top:40px;   left:260px;     }  </style> </head> <body>    <div id="reg">  <h2><img src="close.png" alt="" class="close" />会员注册</h2>  <form name="reg">    <dl><dd>用 户 名： <input type="text" name="user" id="username" class="text" /><span class="error_user">输入不合法，请重新输入!</span><span class="succ_user"></span><br><span class="message_user"> 请输入用户名，2~20位，由字母、数字和下划线组成！</span></dd><dd>密　　码： <input type="password" name="pass" id="password" class="text" />    <span class="error_pass">输入不合法，请重新输入!</span><span class="succ_pass"></span><br><span class="message_pass">只能包含大小写字母、数字和非空格字符</span></dd><dd>密码确认： <input type="password" name="notpass" class="text" id="notpassword"/>    <span class="error_notpass">两次密码输入不同</span><span class="succ_notpass"></span><br></dd>        <dd>    性  别： 男性：<input type="radio" checked="checked" name="Sex" value="male">                  女性：<input type="radio" name="Sex" value="female">        </dd>        <dd>    电话： <input type="text" name="telephone" class="text" id="telephone"/>     <span class="error_telephone">输入不合法，请重新输入</span> <span class="succ_telephone"></span><br></dd><dd>真实姓名： <input type="text" name="relname" class="text" id="relname"/>     <span class="error_relname">输入不合法，请重新输入</span> <span class="succ_relname"></span><br></dd>        <dd>身份证号： <input type="text" name="identity" class="text" id="identity"/>     <span class="error_identity">输入不合法，请重新输入</span> <span class="succ_identity"></span><br></dd> <dd>电子邮件： <input type="text" name="email" class="text" autocomplete="off" id="email"/>     <span class="error_email">输入不合法，请重新输入</span> <span class="succ_email"></span><br></dd><dd style="padding:0 0 0 80px;"><input type="button" class="submit" /></dd>    </dl>   </form></div> </body></html>
效果图：
ps:写得不好，不少重复的代码，以后有得改了，身份证的验证有一定的算法，不是我写得这么简单，我偷懒，简化了