注册表单验证_正则

最新推荐文章于 2022-05-28 15:31:21 发布

pj1653_9

最新推荐文章于 2022-05-28 15:31:21 发布

阅读量91

点赞数

本文链接：https://blog.csdn.net/pj1653_9/article/details/106643752

版权

html部分
在这里插入图片描述
css部分

#div1 {
                width:250px;
                height:250px;
                border:1px solid black;
                padding:50px;
                text-align: center;
                margin:100px auto;
                background-color:lightgray;
            }
            #div1 input {
                width:250px;
                height:30px;
                font-size:18px;
                margin-top:20px;
            }
            #div1 span {
                margin-top:5px;
                font-size:14px;
                color:gray;
            }
            #div1 .testCode {
                width:70px;
                height:30px;
                line-height:30px;
                background-color: gray;
                color:white;
                float: left;
                margin-left:10px;
                margin-top:6px;
            }

js部分

 window.onload = function(){
                var oUsername = document.getElementById("username");
                var oUsername_span = document.getElementById("username_span");
                var oPassword = document.getElementById("password");
                console.log(oPassword);
                var oDiv1 = document.getElementById("div1");
                var aDivs = oDiv1.getElementsByClassName("testCode");

                //添加失去焦点事件
                oUsername.onblur = function(){
                    var oValue = oUsername.value;
                    //1、用户名长度是否符合要求
                    if(oValue.length<6 || oValue.length>18){
                        oUsername_span.innerHTML = "! 长度应为6~18个字符";
                        oUsername_span.style.color = "red";

                        //2、判断首字母是否是字母
                    }else if(!/[a-zA-Z]/.test(oValue[0])){
                        oUsername_span.innerHTML = "! 邮件地址必须以因为字母开头";
                        oUsername_span.style.color = "red";
                    }else if(/\W/.test(oValue)){
                        oUsername_span.innerHTML = "! 邮件地址需由字母、数字或下划线组成";
                        oUsername_span.style.color = "red";
                    }else{
                        oUsername_span.innerHTML = "✔该用户名可注册";
                        oUsername_span.style.color = "green";
                    }

                    //给密码输入框，添加键盘事件
                    /*
                       keydown事件触发的时间是文本输入之前
                       keyup 

                       密码强度归类：
                         1、弱  纯数字 纯小写  纯大写
                         2、中  两两混合
                         3、强  三种都有
                    */
                    oPassword.onkeyup = function(){
                        var oValue = this.value;
                        
                        //每次触发之前，都要将上一次样式全部清空

                        for(var i=0;i<aDivs.length;i++){
                            aDivs[i].style.backgroundColor = "gray";
                        }
                        if(oValue.length>=6){
                            //开始密码强度验证
                            if(/^\d+$/.test(oValue) || /^[a-z]+$/.test(oValue) || /^[A-Z]+$/.test(oValue)){
                                aDivs[0].style.backgroundColor = "orange";
                            }else if(/\d/.test(oValue) && /[a-z]/.test(oValue) && /[A-Z]/.test(oValue)){
                                aDivs[2].style.backgroundColor = "orange";
                            }else{
                                aDivs[1].style.backgroundColor = "orange";

                            }
                        }
                        
                    }

                }
            }