注册框

最新推荐文章于 2024-09-12 18:02:32 发布

R_March

最新推荐文章于 2024-09-12 18:02:32 发布

阅读量526

点赞数

分类专栏： js案例之注册文章标签： html 登陆注册

本文链接：https://blog.csdn.net/cainiao_xiao_bai/article/details/77776632

版权

js案例之注册专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML部分

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>简单的注册</title>
        <link rel="stylesheet" type="text/css" href="css/reset.css" />
        <link rel="stylesheet" type="text/css" href="css/index-style-1.0.0.css" />
        <script type="text/javascript" src="js/index.js"></script>
    </head>
    <body>
        <span id="shade"></span>
        <button id="rgBtn">注册</button>
        <div id="register">
            <h3>We need a few details</h3>
            <form name="" method="" action="">
                <span>
                    Username:
                    <input type="text" value="" id="username"/>
                </span>
                <span>
                    E-mail Address:
                    <input type="text" id="email"  />
                </span>
                <span>
                    tel-number:
                    <input type="text"  id="tel-number"/>
                </span>
                <span>
                    Password:
                    <input type="password"  id="password"/>
                </span>
                <input id="register-sub" type="submit" value="Finish Account Setup" />
            </form>
        </div>
    </body>
</html>

CSS部分

@charset "utf-8";
button{
    height: 50px;
    width: 100px;
    background: green;
    color: #fff;
    outline: none;
}
#shade{
    height: 100%;
    width: 100%;
    background: #5f6677;
    position: fixed;
    z-index: -1;
    opacity: 0.8;
    filter: alpha(opacity=80);
    display: none;
}
#register{
    width: 414px;
    height: 716px;
    border: solid 10px #aaacb5;
    border-radius: 27px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    display: none;
    padding:0 24px 0 28px;
    background: #FFFFFF;

}

#register h3{
    height: 78px;
    width: 100%;
    font-size: 28px;
    border-bottom: solid 1px #e8e8e8;
    text-align: center;
    line-height: 78px;
    font-weight: 900;
    color: #434d66;
}
#register form{
    font-size: 14px;
}
#register span{
    display: block;
    font-size: 14px;
    font-weight: 900;
    margin-top: 26px;
    position: relative;
}
#register span input{
    display: block;
    outline: none;
    height: 57px;
    width: 344px;
    border: solid 1px #b0b1b1;
    border-radius: 8px;
    padding: 0 34px 0 34px;
    margin-top: 15px;
}
#register #register-sub{
    padding: 0 34px 0 34px;
    margin-top: 77px;
    display: block;
    height: 57px;
    width: 414px;
    background: #386b9d;
    color: #FFFFFF;
    font-weight: 900;
    font-size: 16px;
    border-radius: 8px;

}

#register span .hint{
    color: red;
    font-size: 12px;
    position: absolute;
    top: 72px;

}

js部分

window.onload = function(){
    var rgBtn = $('rgBtn');
    var sheet = document.styleSheets[1];
    var rules = sheet.cssRules || sheet.rules;
    var count = 0;  //判断用户输入信息是否完全正确
    //注册按钮点击事件
    rgBtn.onclick = function(){
        rules[1].style.display = 'block';
        rules[2].style.display = 'block';

    };  

    //用户名格式判断
    var userName = $('username');
    userName.onfocus = judgeUserFocus;
    userName.onblur = judgeUserBlur;
    //邮箱格式判断
    var email = $('email');
    email.onfocus = judgeEmailFocus;
    email.onblur = judgeEmailBlur;
    //手机号判断
    var telNumber = $('tel-number');
    telNumber.onfocus = judgeTelNumberFocus;
    telNumber.onblur = judgeTelNumberBlur;
    //密码格式判断
    var oPassword = $('password');
    oPassword.onfocus = judgePasswordFocus;
    oPassword.onblur = judgePasswordBlur;

    //点击注册按钮
    var registerSub = $('register-sub');
    registerSub.onclick = function(){
        if(count == 4){
            alert("恭喜您注册成功");
        }else{
            alert("请填写完信息");
        }
    }
//·由字母a～z(不区分大小写)、数字0～9、点、减号或下划线组成
//·只能以字母开头，包含字符 数字 下划线，例如：beijing.2008
//·用户名长度为4～18个字符
//用户名判断
    function judgeUserBlur(){
        var userValue = userName.value;
        var pattern = /^[a-z][\w.-]{3,17}$/gi;
        if(!pattern.test(userValue)){
            var oSpan = document.createElement('span');
            userName.parentNode.appendChild(oSpan); 
            oSpan.innerHTML = '您输入的有户名不合法，请重新输入'
            oSpan.className = 'hint';
        }else{
            count++;
        }

    }
    function judgeUserFocus(){
        var parent = userName.parentNode;
        if(parent.lastChild.className == 'hint'){
            var childrens = userName.parentNode;
            userName.parentNode.removeChild(userName.parentNode.lastChild);
        }   
    }
//邮箱格式判断    
    function judgeEmailBlur(){
        var emailValue = email.value;
        var pattern = /^[1-9a-z]+(\.\w+)*@(\w)+(\.\w+)*(\.\w+)$/gi;
        if(!pattern.test(emailValue)){
            var oSpan = document.createElement('span');
            email.parentNode.appendChild(oSpan);    
            oSpan.innerHTML = '您输入的邮箱不合法，请重新输入'
            oSpan.className = 'hint';
        }else{
            count++;
        }

    }
    function judgeEmailFocus(){
        var parent = email.parentNode;
        if(parent.lastChild.className == 'hint'){
            var childrens = email.parentNode;
            email.parentNode.removeChild(email.parentNode.lastChild);
        }
    }

//手机号判断
    function judgeTelNumberBlur(){
        var telNumberValue = telNumber.value;
        var pattern = /^[1]\d{10}$/g;
        if(!pattern.test(telNumberValue)){
            var oSpan = document.createElement('span');
            telNumber.parentNode.appendChild(oSpan);    
            oSpan.innerHTML = '您输入的手机号长度不正确，请重新输入'
            oSpan.className = 'hint';
        }else{
            count++;
        }

    }
    function judgeTelNumberFocus(){
        var parent = telNumber.parentNode;
        if(parent.lastChild.className == 'hint'){
            var childrens = telNumber.parentNode;
            telNumber.parentNode.removeChild(telNumber.parentNode.lastChild);
        }   

    }
//密码格式判断
    function judgePasswordBlur(){
        var oPasswordValue = oPassword.value;
        var pattern = /.{6,}/gi;
        if(!pattern.test(oPasswordValue)){
            var oSpan = document.createElement('span');
            oPassword.parentNode.appendChild(oSpan);    
            oSpan.innerHTML = '您输入的密码不足6位，请重新输入'
            oSpan.className = 'hint';
        }else{
            count ++;
        }


    }
    function judgePasswordFocus(){
        var parent = oPassword.parentNode;
        if(parent.lastChild.className == 'hint'){
            var childrens = oPassword.parentNode;
            oPassword.parentNode.removeChild(oPassword.parentNode.lastChild);
        }   
    }


    //移动注册框
    var registerBox = $('register');
    registerBox.onmousedown = function(ev){
        var e = ev || window.event;
        this.style.cursor = 'move';

        var boxOffsetX = e.clientX - this.offsetLeft;  //保存当前事件位置，至包含元素的位置（包含边框），IE中新有的offsetX 和 offsetY是包含块元素内容的偏移量（不包含边框）
        var boxOffsetY = e.clientY - this.offsetTop;
        document.onmousemove = function(evt){
            document.body.style.overflow = 'hidden';
            var e = evt || window.event;

            registerBox.style.margin = 0;
            registerBox.style.top = e.clientY - boxOffsetY + 'px';
            registerBox.style.left = e.clientX - boxOffsetX + 'px';
        };

    }
    registerBox.onmouseup = function(){
            document.onmousemove = null;  //消除移动，否则还会登录框还是跟着鼠标移动
            registerBox.style.cursor = 'default';

    }


};



function $(id){
    return document.getElementById(id);
}