注册框

淡淡的烟草味﹌ 2022-06-09 09:09 148阅读 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);
    }

现在只是写的比较简单的，等学到后面再来改改

发表评论取消回复

表情：

评论列表（有 0 条评论，148人围观）

还没有评论，来说两句吧...

相关阅读

相关 Selenium处理授权框,登录框,握手框

在Web自动化中，常常遇到三种弹框： 1. JavaScript警告框，如alert,confirm,prompt等，如下图：处理方法为driver.swit

梦里梦外;/ 2023年10月09日 10:14/ 0 赞/ 46 阅读

相关 HTML/CSS 新浪注册框

HTML/CSS 新浪登录框代码： <!DOCTYPE html> <html lang="en"> <head> <

柔光的暖阳◎/ 2022年12月31日 13:18/ 0 赞/ 85 阅读

相关 WinEdt 6.0 注册提示框（转）

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] 解决方法：在options菜单下点options..

客官°小女子只卖身不卖艺/ 2022年10月02日 05:44/ 0 赞/ 183 阅读

相关可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框。

[js][]弹出警告框|js弹出折行警告框|js确认按钮|js提示按钮：可以在 [ JavaScript][js] 中创建三种消息框：警告框、确认框、提示框。警告框

秒速五厘米/ 2022年06月11日 02:18/ 0 赞/ 295 阅读

相关注册框

HTML部分 <!DOCTYPE html> <html> <head> <meta charset="utf-8"

淡淡的烟草味﹌/ 2022年06月09日 09:09/ 0 赞/ 149 阅读

相关 JavaScript 弹窗(对话框)警告框、确认框、提示框.

JavaScript 弹窗(对话框) 三种消息框：警告框、确认框、提示框。 1. 警告框警告框经常用于确保用户可以得到某些信息。当警告框出现后，

野性酷女/ 2022年06月08日 02:57/ 0 赞/ 504 阅读

相关注册

注册页面 def register(request): return render(request,'axf/user/register.ht

分手后的思念是犯贱/ 2022年06月03日 06:39/ 0 赞/ 132 阅读

相关 js如何弹出登陆框,注册框等等

方法一：在body中输入如下代码 <div id=win style="display:none; POSITION:absolute; left:50%; to

素颜马尾好姑娘i/ 2022年03月11日 20:14/ 0 赞/ 341 阅读

相关 JS警告框和确认框

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>BOM

太过爱你忘了你带给我的痛/ 2021年12月12日 16:25/ 0 赞/ 324 阅读

相关消息框-提示框

今天找到一个非常简单的提示消息弹出框直接上代码 html ![1500786-20181012154016519-1839245572.png][] css

迷南。/ 2021年09月29日 23:38/ 0 赞/ 489 阅读