代码改变世界

js学习笔记：用户注册

2014-05-23 22:06  Pretty丶Boy  阅读(390)  评论(0)  编辑  收藏  举报

用户注册：结构层：html;表现层：css;行为层：javascript;
html利用ul,li来构造：
    注意事项：1、每个Input都要有相应的id,这是在js中去调用的。
                  2、<a href="javascript:void(0)"></a>，添加javascript:void(0)是为了阻止链接的跳转。

  1. <body>
  2.      <div id="reg">
  3.        <form>
  4.         <div class="reg_title"><h1>用户注册</h1></div>
  5.          <ul class="reg_con">
  6.            <li>
  7.               <ul class="def">
  8.                 <li><span>用户帐号：</span><input type="text" id="uname"/></li>
  9.                 <li><p><i></i>给自己起个名字吧，它将成为您登录本站的用户名</p></li>
  10.               </ul>
  11.            </li>
  12.            <li>
  13.               <ul class="def">
  14.                 <li><span>电子邮箱：</span><input type="text" id="email"/></li>
  15.                 <li><p><i></i>请输入您的常用邮箱地址，此邮箱地址将作为修改密码</p></li>
  16.               </ul>
  17.            </li>
  18.            <li>
  19.               <ul class="def">
  20.                 <li><span>手机号码：</span><input type="text" id="mobile"/></li>
  21.                 <li><p><i></i>请输入您的手机号码，方便我们之间的联系</p></li>
  22.               </ul>
  23.            </li>
  24.            <li>
  25.               <ul class="def">
  26.                 <li><span>安全密码：</span><input id="pwd" type="password"/></li>
  27.                 <li><p><i></i>请输入安全密码，它将作为您的登录密码</p></li>
  28.               </ul>
  29.            </li>
  30.            <li>
  31.               <ul class="def ">
  32.                 <li><span>确认密码：</span><input type="password" id="qrpwd"/></li>
  33.                 <li><p><i></i>请将上面的密码再输入一次</p></li>
  34.               </ul>
  35.            </li>
  36.            <li>
  37.               <ul>
  38.                 <li><span></span></li>
  39.                 <li id="reg_sub"><a href="javascript:void(0)" id="enter">立即注册</a></li>
  40.               </ul>
  41.            </li>
  42.          </ul>
  43.        </form>
  44.      </div>
  45.   </body>
复制代码

表现层：css
   注意事项：1、页面开始一般都写上重置代码。
                 2、针对用户名、输入框、提示图标要写一组本身的样式、一组def默认的样式、一组point获得焦点的样式、一组error错误样式、一组ok输入正确的样式。

  1. /*reset重置代码开始*/

行为层：js
js编写的主体思路：1、中心点：每一个input框，也就是获取的inp=document.getElementsByTagName("input");
                         2、针对input输入框会有点击即获得焦点的状态，和失去焦点的状态。
                         3、当获得焦点的时候，会给用户名、输入框、提示图标（改变背景图片的位置）变成蓝色，即添加point样式。
                         4、当input输入框失去焦点时，会给用户名、输入框、提示图标变成红色，即添加error样式。
                         5、当input输入框内容正确后，会给用户名、输入框变成。

  2.         /*闭包*/
  3.         (
  4.                 function(){
  5.                          var $=function(_id){
  6.                                  return document.getElementById(_id);
  7.                                  }
  8.                         var inpStyle=function(){
  9.                                 var inp=document.getElementsByTagName("input");//获得id为inpList 中的所有的input
  10.                                 for(i=0;i<inp.length;i++){
  11.                                         inp[i].onfocus=function(){
  12.                                                 var par=this.parentNode.parentNode;
  13.                                                 var msg=par.getElementsByTagName("p")[0];
  14.                                                 par.className="point";
  15.                                                 check.focus[this.id](par,this,msg);
  16.                                                 }
  17.                                         inp[i].onblur=function(){
  18.                                                 var par=this.parentNode.parentNode;
  19.                                                 var msg=par.getElementsByTagName("p")[0];
  20.                                                 par.className="def";
  21.                                                 check.blurs[this.id](par,this,msg);
  22.                                                 }
  23.                                         }
  24.                                     $("enter").onclick=function(){
  25.                                                 subback(inp);
  26.                                                 }
  27.                                 }
  28.                                 var check={
  29.                                         focus:{
  30.                                                 uname:function(_ul,_this,_p){
  31.                                                         _ul.className="point";
  32.                                                         _p.innerHTML="<i></i>给自己起个名字吧，它将成为您登录本站的用户名";
  33.                                                         },
  34.                                                         email:function(_ul,_this,_p){
  35.                                                         _ul.className="point";
  36.                                                         _p.innerHTML="<i></i>请输入您的常用邮箱地址，此邮箱地址将作为修改密码";
  37.                                                         },
  38.                                                         mobile:function(_ul,_this,_p){
  39.                                                         _ul.className="point";
  40.                                                         _p.innerHTML="<i></i>请输入您的手机号码，方便我们之间的联系";
  41.                                                         },
  42.                                                         pwd:function(_ul,_this,_p){
  43.                                                         _ul.className="point";
  44.                                                         _p.innerHTML="<i></i>请输入安全密码，它将作为您的登录密码";
  45.                                                         },
  46.                                                         qrpwd:function(_ul,_this,_p){
  47.                                                         _ul.className="point";
  48.                                                         _p.innerHTML="<i></i>请将上面的密码再输入一次";
  49.                                                         }
  50.                                                 },
  51.                                         blurs:{
  52.                                                 uname:function(_ul,_this,_p){//ul标签、当前输入框、错误的信息
  53.                                                  _ul.className="error";        
  54.                                                  var flag=false;
  55.                                                     if(_this.value==""){        
  56.                                                                                                           
  57.                                                                 _p.innerHTML="<i></i>用户名不能为空！";
  58.                                                         }else if(_this.value.length<3 || _this.value.length>16){                                                                        
  59.                                                                         _p.innerHTML="<i></i>用户名长度应控制在3-16位字符之间！";
  60.                                                         }else if(!/^[\w_-\u4e00-\u9fa5]+$/.test(_this.value)){                                                                                
  61.                                                                                 _p.innerHTML = "<i></i>用户名只能由大小写字母，数字，下划线，中横线和中文组成！";
  62.                                                         }else{
  63.                                                                                         _ul.className="ok";
  64.                                                                                         _p.innerHTML="<i></i>";
  65.                                                                                         flag=true;
  66.                                                                                         
  67.                                                         }
  68.                                                         
  69.                                                         return flag;
  70.                                                         },
  71.                                                 email:function(_ul,_this,_p){
  72.                                                          _ul.className="error";
  73.                                                           var flag=false;
  74.                                                       if(_this.value==""){
  75.                                                                  
  76.                                                                   _p.innerHTML="<i></i>邮箱不能为空！";
  77.                                                                   }else if(!/\w+((-w+)|(\.\w+))*\@[\w]+((\.|-)[\w]+)*\.[\w]+/.test(_this.value)){                                                                        
  78.                                                                           _p.innerHTML="<i></i>请输入正确的邮箱地址！";
  79.                                                                           }
  80.                                                                           else{
  81.                                                                                   _ul.className="ok";
  82.                                                                                   _p.innerHTML="<i></i>";
  83.                                                                                   flag=true;
  84.                                                                                   }
  85.                                                                                   return flag=false;
  86.                                                         }
  87.                                                 ,
  88.                                                 mobile:function(_ul,_this,_p){
  89.                                                        _ul.className="error";
  90.                                                            var flag=false;
  91.                                                       if(_this.value==""){
  92.                                                                  
  93.                                                                   _p.innerHTML="<i></i>电话号码不能为空！";
  94.                                                                   }else if(!/0?(13|14|15|18)[0-9]{9}/.test(_this.value)){                                                                        
  95.                                                                           _p.innerHTML="<i></i>请输入正确的电话号码！";
  96.                                                                           }
  97.                                                                           else{
  98.                                                                                   _ul.className="ok";
  99.                                                                                         _p.innerHTML="<i></i>";
  100.                                                                                         flag=true;
  101.                                                                                   }
  102.                                                                                   return flag;
  103.                                                         }
  104.                                                         ,
  105.                                                 pwd:function(_ul,_this,_p){
  106.                                                        _ul.className="error";
  107.                                                            var flag=false;
  108.                                                       if(_this.value==""){
  109.                                                                  
  110.                                                                   _p.innerHTML="<i></i>密码不能为空！";
  111.                                                                   }else if(_this.value.length<6 || _this.value.length>16){
  112.                                                                           
  113.                                                                           _p.innerHTML="<i></i>密码应该在6-16位之间！";
  114.                                                                           }else if(!/^[\w_-]+$/.test(_this.value)){                                                                        
  115.                                                                           _p.innerHTML="<i></i>密码只能由大小字母、数字、下划线组成！";
  116.                                                                           }
  117.                                                                           else{
  118.                                                                                   _ul.className="ok";
  119.                                                                                         _p.innerHTML="<i></i>";
  120.                                                                                         flag=true;
  121.                                                                                   }
  122.                                                                                   return flag;
  123.                                                         }
  124.                                                         ,
  125.                                                 qrpwd:function(_ul,_this,_p){
  126.                                                         _ul.className="error";
  127.                                                                 var flag=false;
  128.                                                       if(_this.value==""){
  129.                                                                   _p.innerHTML="<i></i>为了保证您输入的密码准确无误，请再次输入密码！！";
  130.                                                                   
  131.                                                                   }else if(_this.value!=$("pwd").value){
  132.                                                                           
  133.                                                                           _p.innerHTML="<i></i>密码两次输入不一致，请重新输入！";
  134.                                                                           }
  135.                                                                           else{
  136.                                                                                   _ul.className="ok";
  137.                                                                                         _p.innerHTML="<i></i>";
  138.                                                                                         flag=true;
  139.                                                                                   }
  140.                                                                                   return flag;
  141.                                                         }
  142.                                                 }
  143.                                         }
  144.                                         var subback=function(inps){
  145.                                                 for(var i=0;i<inps.length;i++){
  146.                                                         //inps[i].focus();
  147.                                                         
  148.                                                         var flag=true;
  149.                                                         var par=inps[i].parentNode.parentNode;
  150.                                                         var msg=par.getElementsByTagName("p")[0];
  151.                                                         
  152.                                                         
  153.                                                         if(!check.blurs[inps[i].id](par,inps[i],msg)){
  154.                                                                 flag=false;
  155.                                                                 break;
  156.                                                                 }
  157.                                                         }
  158.                                                         if(flag){
  159.                                                                         alert("可提交");
  160.                                                                         ｝<span style="background-color: rgb(255, 255, 255); line-height: 1.5;">    else{</span>