关闭

js学习入门教程笔记:css+html+js用户注册代码实现

标签: javascriptjavascript学习笔记html用户注册javascript用户注册
1484人阅读 评论(0) 收藏 举报
分类:

原文:js学习入门教程笔记:css+html+js用户注册代码实现


运行截图:如下:

用户注册:结构层:html;表现层:css;行为层:javascript;

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

<body>
     <div id="reg">
       <form>
        <div class="reg_title"><h1>用户注册</h1></div>
         <ul class="reg_con">
           <li>
              <ul class="def">
                <li><span>用户帐号:</span><input type="text" id="uname"/></li>
                <li><p><i></i>给自己起个名字吧,它将成为您登录本站的用户名</p></li>
              </ul>
           </li>
           <li>
              <ul class="def">
                <li><span>电子邮箱:</span><input type="text" id="email"/></li>
                <li><p><i></i>请输入您的常用邮箱地址,此邮箱地址将作为修改密码</p></li>
              </ul>
           </li>
           <li>
              <ul class="def">
                <li><span>手机号码:</span><input type="text" id="mobile"/></li>
                <li><p><i></i>请输入您的手机号码,方便我们之间的联系</p></li>
              </ul>
           </li>
           <li>
              <ul class="def">
                <li><span>安全密码:</span><input id="pwd" type="password"/></li>
                <li><p><i></i>请输入安全密码,它将作为您的登录密码</p></li>
              </ul>
           </li>
           <li>
              <ul class="def ">
                <li><span>确认密码:</span><input type="password" id="qrpwd"/></li>
                <li><p><i></i>请将上面的密码再输入一次</p></li>
              </ul>
           </li>
           <li>
              <ul>
                <li><span></span></li>
                <li id="reg_sub"><a href="javascript:void(0)" id="enter">立即注册</a></li>
              </ul>
           </li>
         </ul>
       </form>
     </div>
  </body>

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

/*reset重置代码开始*/
复制代码

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


        /*闭包*/
        (
                function(){
                         var $=function(_id){
                                 return document.getElementById(_id);
                                 }
                        var inpStyle=function(){
                                var inp=document.getElementsByTagName("input");//获得id为inpList 中的所有的input
                                for(i=0;i<inp.length;i++){
                                        inp[i].onfocus=function(){
                                                var par=this.parentNode.parentNode;
                                                var msg=par.getElementsByTagName("p")[0];
                                                par.className="point";
                                                check.focus[this.id](par,this,msg);
                                                }
                                        inp[i].onblur=function(){
                                                var par=this.parentNode.parentNode;
                                                var msg=par.getElementsByTagName("p")[0];
                                                par.className="def";
                                                check.blurs[this.id](par,this,msg);
                                                }
                                        }
                                    $("enter").onclick=function(){
                                                subback(inp);
                                                }
                                }
                                var check={
                                        focus:{
                                                uname:function(_ul,_this,_p){
                                                        _ul.className="point";
                                                        _p.innerHTML="<i></i>给自己起个名字吧,它将成为您登录本站的用户名";
                                                        },
                                                        email:function(_ul,_this,_p){
                                                        _ul.className="point";
                                                        _p.innerHTML="<i></i>请输入您的常用邮箱地址,此邮箱地址将作为修改密码";
                                                        },
                                                        mobile:function(_ul,_this,_p){
                                                        _ul.className="point";
                                                        _p.innerHTML="<i></i>请输入您的手机号码,方便我们之间的联系";
                                                        },
                                                        pwd:function(_ul,_this,_p){
                                                        _ul.className="point";
                                                        _p.innerHTML="<i></i>请输入安全密码,它将作为您的登录密码";
                                                        },
                                                        qrpwd:function(_ul,_this,_p){
                                                        _ul.className="point";
                                                        _p.innerHTML="<i></i>请将上面的密码再输入一次";
                                                        }
                                                },
                                        blurs:{
                                                uname:function(_ul,_this,_p){//ul标签、当前输入框、错误的信息
                                                 _ul.className="error";        
                                                 var flag=false;
                                                    if(_this.value==""){        
                                                                                                          
                                                                _p.innerHTML="<i></i>用户名不能为空!";
                                                        }else if(_this.value.length<3 || _this.value.length>16){                                                                        
                                                                        _p.innerHTML="<i></i>用户名长度应控制在3-16位字符之间!";
                                                        }else if(!/^[\w_-\u4e00-\u9fa5]+$/.test(_this.value)){                                                                                
                                                                                _p.innerHTML = "<i></i>用户名只能由大小写字母,数字,下划线,中横线和中文组成!";
                                                        }else{
                                                                                        _ul.className="ok";
                                                                                        _p.innerHTML="<i></i>";
                                                                                        flag=true;
                                                                                        
                                                        }
                                                        
                                                        return flag;
                                                        },
                                                email:function(_ul,_this,_p){
                                                         _ul.className="error";
                                                          var flag=false;
                                                      if(_this.value==""){
                                                                 
                                                                  _p.innerHTML="<i></i>邮箱不能为空!";
                                                                  }else if(!/\w+((-w+)|(\.\w+))*\@[\w]+((\.|-)[\w]+)*\.[\w]+/.test(_this.value)){                                                                        
                                                                          _p.innerHTML="<i></i>请输入正确的邮箱地址!";
                                                                          }
                                                                          else{
                                                                                  _ul.className="ok";
                                                                                  _p.innerHTML="<i></i>";
                                                                                  flag=true;
                                                                                  }
                                                                                  return flag=false;
                                                        }
                                                ,
                                                mobile:function(_ul,_this,_p){
                                                       _ul.className="error";
                                                           var flag=false;
                                                      if(_this.value==""){
                                                                 
                                                                  _p.innerHTML="<i></i>电话号码不能为空!";
                                                                  }else if(!/0?(13|14|15|18)[0-9]{9}/.test(_this.value)){                                                                        
                                                                          _p.innerHTML="<i></i>请输入正确的电话号码!";
                                                                          }
                                                                          else{
                                                                                  _ul.className="ok";
                                                                                        _p.innerHTML="<i></i>";
                                                                                        flag=true;
                                                                                  }
                                                                                  return flag;
                                                        }
                                                        ,
                                                pwd:function(_ul,_this,_p){
                                                       _ul.className="error";
                                                           var flag=false;
                                                      if(_this.value==""){
                                                                 
                                                                  _p.innerHTML="<i></i>密码不能为空!";
                                                                  }else if(_this.value.length<6 || _this.value.length>16){
                                                                          
                                                                          _p.innerHTML="<i></i>密码应该在6-16位之间!";
                                                                          }else if(!/^[\w_-]+$/.test(_this.value)){                                                                        
                                                                          _p.innerHTML="<i></i>密码只能由大小字母、数字、下划线组成!";
                                                                          }
                                                                          else{
                                                                                  _ul.className="ok";
                                                                                        _p.innerHTML="<i></i>";
                                                                                        flag=true;
                                                                                  }
                                                                                  return flag;
                                                        }
                                                        ,
                                                qrpwd:function(_ul,_this,_p){
                                                        _ul.className="error";
                                                                var flag=false;
                                                      if(_this.value==""){
                                                                  _p.innerHTML="<i></i>为了保证您输入的密码准确无误,请再次输入密码!!";
                                                                  
                                                                  }else if(_this.value!=$("pwd").value){
                                                                          
                                                                          _p.innerHTML="<i></i>密码两次输入不一致,请重新输入!";
                                                                          }
                                                                          else{
                                                                                  _ul.className="ok";
                                                                                        _p.innerHTML="<i></i>";
                                                                                        flag=true;
                                                                                  }
                                                                                  return flag;
                                                        }
                                                }
                                        }
                                        var subback=function(inps){
                                                for(var i=0;i<inps.length;i++){
                                                        //inps[i].focus();
                                                        
                                                        var flag=true;
                                                        var par=inps[i].parentNode.parentNode;
                                                        var msg=par.getElementsByTagName("p")[0];
                                                        
                                                        
                                                        if(!check.blurs[inps[i].id](par,inps[i],msg)){
                                                                flag=false;
                                                                break;
                                                                }
                                                        }
                                                        if(flag){
                                                                        alert("可提交");
                                                                        }<span style="background-color: rgb(255, 255, 255); line-height: 1.5;">    else{</span>

最代码官方编辑于2014-5-23 13:32:47


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    About Me
    扫描关注最代码微信公众号。

    自由、简单、快乐
    学习网站:java源代码学习
    个人资料
    • 访问:3885686次
    • 积分:36505
    • 等级:
    • 排名:第122名
    • 原创:665篇
    • 转载:89篇
    • 译文:1篇
    • 评论:1257条
    友情链接
    博客专栏