京东登陆界面正则匹配

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>京东登陆表单验证</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div id="box">
    <div class="register">
        <div class="userName same">
            <span class="big">用户名</span>
            <input id="userName" type="text" placeholder="您的账户名和登陆名"/>
        </div>
        <div class="tip">
            <i></i>
            <p></p>
        </div>
    </div>
    <div class="register">
        <div class="setPsd same">
            <span>设置密码</span>
            <input id="psd" type="password" placeholder="建议至少两种字符组合" />
        </div>
        <div class="tip">
            <i></i>
            <p></p>
        </div>
    </div>
    <div class="register">
        <div class="mSpsd same">
            <span>确认密码</span>
            <input id="mSpsd" type="password" placeholder="建议至少两种字符组合"  />
        </div>
        <div class="tip">
            <i></i>
            <p></p>
        </div>
    </div>
    <div class="register">
        <div class="email same">
            <span>邮箱验证</span>
            <input id="email" type="text" placeholder="您的邮箱"  />
        </div>
        <div class="tip">
            <i></i>
            <p></p>
        </div>
    </div>
    <div class="register">
        <div class="mobile same">
            <span>手机号码</span>
            <input id="phone" type="text" placeholder="您的手机号"  />
        </div>
        <div class="tip">
            <i></i>
            <p></p>
        </div>
    </div>
    <div class="check">
        <div>
            <label>
                <input id="ck" type="checkbox" />
                <span>我已阅读并同意<em>《京东注册协议》</em></span>
            </label>
        </div>
        <div class="tip">
            <i></i>
            <p></p>
        </div>
    </div>
    <input class="btn" id="btn" type="button" value="注册" />
</div>
<script type="text/javascript" src="js/login.js"></script>
</body>

</html>

<!--以上为html结构-->


*{
    margin:0;
    padding:0;
    border:0;
}
i,em{
    font-style:normal;
}
body{
    font-size:12px;
}
#box{
    margin:200px auto 0;
    width:420px;
}
.register{
    position:relative;
    margin:23px 40px 33px 30px;
}
.same{
    border:1px solid #ccc;
    height:60px;
}
.right{
    background:url(../images/right.png) no-repeat 330px 22px;
}
.same span{
    display:inline-block;
    width:80px;
    text-indent:10px;
    line-height:60px;
    letter-spacing:5px;
    color:#333;
}
.same input{
    width:240px;
    height:60px;
    border:none;
    text-indent:20px;
}
.tip{
    position:absolute;
    left:0;
    top:70px;
    width:420px;
    height:20px;
}

.hide{
    display:none;
}
.show{
    display:block;
}
.tip i{
    float:left;
    width:18px;
    height:20px;
}
.tip i.ruo{
    background:url(../images/ruo.png);
}
.tip i.zhong{
    background:url(../images/zhong.png);
}
.tip i.qiang{
    background:url(../images/qiang.png);
}
.tip i.gray{
    background:url(../images/default.png);
}
.tip p.gray{
    color:gray;
}
.tip i.red{
    background:url(../images/error.png);
}
.tip p.red{
    color:#f00;
}
.tip p{
    float:left;
    height:20px;
    line-height:20px;
}
.check{
    position:relative;
    margin:0 0 30px 30px;
}
.check .tip{
    top:20px;
}
.btn{
    margin-left:30px;
    width:350px;
    height:60px;
    background:#f00;
    font-size:16px;
    color:#fff;
    letter-spacing:5px;
}

/*以上为css样式*/


/*
 
 点击btn事件  1 、 复选框被选中  ck.checked  当前面五个程序全部为真时  alert 注册成功! 未全部成功时,跟踪显示为假对象     (全) 并清除复选框未选中时显示的样式
 
            2、复选框未被选中  显示 error
 
 
 * 用户名: 不走事件对象时 len为0 显示被跟踪样式  
 *
 *         onfocus事件   len为0  执行提示输入信息   onblur  len为0  清空显示样式     onkeyup即其它类型 事件  len不为0   判断len范围  若不合格 报长度范围   若合格匹配正则规则   匹配 返回right  不匹配 返回  error
 *
 *
 * 密码   : 不走事件对象时 len为0 显示被跟踪样式     onfocus事件   len为0  执行提示输入信息   onblur  len为0  清空显示样式      
 *
 *          onkeyup 事件 执行其它  len 不为0  判断长度  不符合 报长度  error  ;  符合    将密码 遍历 用每个 字符 与正则匹配 ,符合 规则 用开关记下强度  不符合 格式错误    注意样式清空
 *
 *
 * 其它时间原理一致  ,,注意细节即可
 *
 *
 *
 *
 *
 *
 *
 * */



function $(id){
    return document.getElementById(id);//获取有id名称的元素节点对象
}


var regs={                                         //正则规则对象
    userName:/^([\u4e00-\u9fa5]|[a-zA-Z0-9_-])+$/,              //用户名正则
    setPsdNumber:/\d/,                                          //每一个数字密码正则
    setPsdLetter:/[a-zA-Z]/,                                    //每一个字母密码正则
    email:/^[1-9a-zA-Z]{3,11}@(qq|163|126)\.(com|cn)$/,         //邮箱正则
    phone:/^[1](3|5|8)\d{9}$/                                   //手机号正则
}


function getLevel(val){//获得密码强度
    var level=0;
    var nFlag=true;//开关,,,,,负责只记录一个数字或字母或特殊字符,将其他相同字母数字或特殊字符的level++屏蔽
    var lFlag=true;
    var oFlag=true;
    for(var i=0;i<val.length;i++){
        if( regs.setPsdNumber.test( val[i] ) ){//当前的val[i]匹配正则的结果为true  在开关为true 执行++ 赋值开关为false
            if(nFlag){
                level++;
                nFlag=false;
            }
        }else if( regs.setPsdLetter.test( val[i] ) ){
            if(lFlag){
                level++;
                lFlag=false;
                
            }
        }else{
            if(oFlag){
                level++;
                oFlag=false;
                
            }
        }
    }
    return level;                    //便于之后拿到函数getLevel的值
}


window.οnlοad=function(){
    
    var btn = $('btn');
    var userName = $('userName');
    var psd = $('psd');
    var mSpsd = $('mSpsd');
    var email = $('email');
    var phone = $('phone');
    var ck = $('ck');
    var tipCk=ck.parentNode.parentNode.nextElementSibling;//获取元素节点操作对象,通过调用$函数
    
    
    userName.οnfοcus=userName.οnblur=userName.οnkeyup=function(e){   //获焦事件、失焦事件、按键抬起事件共同执行一个事件处理程序
        var _event = window.event||e;                           //事件对象的兼容写法
        checkUserName(_event);                                  //调用检查用户名的函数
    }
    
    /*检测用户名*/
    function checkUserName(_e){
        var type; //e.type返回值可以判断事件类型  ,定义var type 为undefined 区分开  事件对象处理程序  以及单纯事件触发的处理程序
        if(_e){
            type=_e.type;//判断事件类型,并赋值给type
        }
        
        
        var tipUser=userName.parentNode.nextElementSibling;//局部变量,作用于函数内部
        var val=userName.value;
        var ulen=val.length;
        
        //相同对象的事件执行不同的事件处理函数时,后面执行的效果会覆盖之前,hack:将函数写return;
        
        if(type=="focus"){       //获焦事件所执行的处理程序
            if(ulen==0){                               //length为0显示的内容
                tipUser.children[0].className='gray';
                tipUser.children[1].className='gray';
                tipUser.children[1].innerHTML='支持汉字、字母、数字、"-"、"_"、4到20个字符';
                return false;          //返回值 停止当前函数 并给函数返回false
            }
        }
        if(type=="blur"){       //失焦事件所执行的内容 清空所有特殊样式
            if(ulen==0){
                tipUser.children[0].className='';
                tipUser.children[1].className='';
                tipUser.children[1].innerHTML='';
                return false;
            }
        }
        /*其他情况*/
        if(ulen==0){
            tipUser.children[0].className='red';//js运行机制不走事件对象处理程序时所执行的其它情况      //跟踪机制
            tipUser.children[1].className='red';
            tipUser.children[1].innerHTML='请输入用户名';
            return false;
        }else{
            if( regs.userName.test(val) ){           // 正则匹配时 若内容长度符合规则返回right  不符合报错 4-20位字符
                if(ulen<4||ulen>20){
                    tipUser.className='tip show';
                    tipUser.children[0].className='red';
                    tipUser.children[1].className='red';
                    tipUser.children[1].innerHTML='4到20位字符';
                    userName.parentNode.className='userName same';
                    return false;
                }else{
                    userName.parentNode.className='userName same right';
                    tipUser.className='tip hide';
                    return true;
                }
            }else{               //不匹配时  返回格式错误
                tipUser.children[0].className='red';
                tipUser.children[1].className='red';
                tipUser.children[1].innerHTML='格式错误,仅支持数字、字母、汉字、“-”、“_”';
                return false;
            }
        }
    }
    
    psd.οnfοcus=psd.οnblur=psd.οnkeyup=function(e){
        var _event = window.event||e;
        checkPsd(_event);
    }
    
    
    
    
    function checkPsd(_e){
        var type;
        if(_e){
            type=_e.type;
        }
        
        var tipPsd=psd.parentNode.nextElementSibling;
        var val=psd.value;
        var len=val.length;
        
        if(type=="focus"){
            if(len==0){
                tipPsd.children[0].className='gray';
                tipPsd.children[1].className='gray';
                tipPsd.children[1].innerHTML='建议使用字母、数字和符号两种以上的组合,6-20个字符';
                return false;
            }
        }
        if(type=="blur"){
            if(len==0){
                tipPsd.children[0].className='';
                tipPsd.children[1].className='';
                tipPsd.children[1].innerHTML='';
                return false;
            }
        }
        /*其他情况*/
        if(len==0){
            tipPsd.children[0].className='red';
            tipPsd.children[1].className='red';
            tipPsd.children[1].innerHTML='请输入密码';
            return false;
        }else{
            if(len<6||len>20){
                tipPsd.className='tip show';
                tipPsd.children[0].className='red';
                tipPsd.children[1].className='red';
                tipPsd.children[1].innerHTML='6到20位字符';
                psd.parentNode.className='setPsd same';
                return false;
            }else{
                var level=getLevel(val);//调用密码强度判断函数   
                switch(level){
                    case 1:         // 强度为1    
                    tipPsd.children[0].className='ruo';
                    tipPsd.children[1].innerHTML='有被盗风险,建议使用字母、数字和符号两种及以上组合';
                    break;
                    case 2:       //强度为2
                    tipPsd.children[0].className='zhong';
                    tipPsd.children[1].innerHTML='安全强度适中,可以使用三种以上的组合来提高安全强度';
                    break;
                    case 3:          //强度为3
                    tipPsd.children[0].className='qiang';
                    tipPsd.children[1].innerHTML='你的密码很安全';
                    break;
                }
                psd.parentNode.className='setPsd same right';
                return true;
            }
        }
    }
    
    
    mSpsd.οnfοcus=mSpsd.οnblur=mSpsd.οnkeyup=function(e){
        var _event = window.event||e;
        checkmSpsd(_event);
    }
    
    
    function checkmSpsd(_e){
        var type;
        if(_e){
            type=_e.type;
        }
        
        var val=psd.value;
        var tipmSpsd=mSpsd.parentNode.nextElementSibling;
        var val1=mSpsd.value;
        var len=val1.length;
        
        //相同对象的事件执行不同的事件处理函数时,后面执行的效果会覆盖之前,hack:将函数写return;
        
        if(type=="focus"){
            if(len==0){
                tipmSpsd.children[0].className='gray';
                tipmSpsd.children[1].className='gray';
                tipmSpsd.children[1].innerHTML='6到20位字符';
                return false;
            }
        }
        if(type=="blur"){
            if(len==0){
                tipmSpsd.children[0].className='';
                tipmSpsd.children[1].className='';
                tipmSpsd.children[1].innerHTML='';
                return false;
            }
        }
        /*其他情况*/
        if(len==0){
            tipmSpsd.children[0].className='red';
            tipmSpsd.children[1].className='red';
            tipmSpsd.children[1].innerHTML='请确认密码';
            return false;
        }else{
            if( val==val1 ){
                mSpsd.parentNode.className='mSpsd same right';
                tipmSpsd.className='tip hide';
                return true;
            }else{
                mSpsd.parentNode.className='mSpsd same';
                tipmSpsd.className='tip show';
                tipmSpsd.children[0].className='red';
                tipmSpsd.children[1].className='red';
                tipmSpsd.children[1].innerHTML='密码输入不一致!';
                return false;
            }
        }
    }
    
    
    email.οnfοcus=email.οnblur=email.οnkeyup=function(e){
        var _event = window.event||e;
        checkEmail(_event);
    }
    
    
    function checkEmail(_e){
        var type;
        if(_e){
            type=_e.type;
        }
        
        
        var tipEmail=email.parentNode.nextElementSibling;
        var val=email.value;
        var len=val.length;
        
        //相同对象的事件执行不同的事件处理函数时,后面执行的效果会覆盖之前,hack:将函数写return;
        
        if(type=="focus"){
            if(len==0){
                tipEmail.children[0].className='gray';
                tipEmail.children[1].className='gray';
                tipEmail.children[1].innerHTML='绑定邮箱你可以通过它找回密码';
                return false;
            }
        }
        if(type=="blur"){
            if(len==0){
                tipEmail.children[0].className='';
                tipEmail.children[1].className='';
                tipEmail.children[1].innerHTML='';
                return false;
            }
        }
        /*其他情况*/
        if(len==0){
            tipEmail.children[0].className='red';
            tipEmail.children[1].className='red';
            tipEmail.children[1].innerHTML='请输入邮箱名';
            return false;
        }else{
            if(len<9){
                tipEmail.children[0].className='';
                tipEmail.children[1].className='';
                tipEmail.children[1].innerHTML='';
                return false;
            }else{
                if( regs.email.test(val) ){
                    email.parentNode.className='email same right';
                    tipEmail.className='tip hide';
                    return true;
                }else{
                    email.parentNode.className='email same';
                    tipEmail.className='tip show';
                    tipEmail.children[0].className='red';
                    tipEmail.children[1].className='red';
                    tipEmail.children[1].innerHTML='格式3-11位数字或字母+@qq|126|163+.com|cn';
                    return false;
                }
            }
            
        }
    }
    
    
    phone.οnfοcus=phone.οnblur=phone.οnkeyup=function(e){
        var _event = window.event||e;
        checkPhone(_event);
    }
    
    
    function checkPhone(_e){
        var type;
        if(_e){
            type=_e.type;
        }
        
        
        var tipPhone=phone.parentNode.nextElementSibling;
        var val=phone.value;
        var len=val.length;
        
        //相同对象的事件执行不同的事件处理函数时,后面执行的效果会覆盖之前,hack:将函数写return;
        
        if(type=="focus"){
            if(len==0){
                tipPhone.children[0].className='gray';
                tipPhone.children[1].className='gray';
                tipPhone.children[1].innerHTML='绑定手机号你可以通过它找回密码';
                return false;
            }
        }
        if(type=="blur"){
            if(len==0){
                tipPhone.children[0].className='';
                tipPhone.children[1].className='';
                tipPhone.children[1].innerHTML='';
                return false;
            }
        }
        /*其他情况*/
        if(len==0){
            tipPhone.children[0].className='red';
            tipPhone.children[1].className='red';
            tipPhone.children[1].innerHTML='请输入手机号';
            return false;
        }else{
            if( regs.phone.test(val) ){
                phone.parentNode.className='phone same right';
                tipPhone.className='tip hide';
                return true;
            }else{
                phone.parentNode.className='phone same';
                tipPhone.className='tip show';
                tipPhone.children[0].className='red';
                tipPhone.children[1].className='red';
                tipPhone.children[1].innerHTML='11位数字,首位是1、第二位是3或5或8';
                return false;
            }
        }
    }
    
    
    
    btn.οnclick=function(){
        if(ck.checked){
            tipCk.children[0].className='';
            tipCk.children[1].className='';
            tipCk.children[1].innerHTML='';
            if(
                checkUserName()&&checkPsd()&&checkmSpsd()&&checkEmail()&&checkPhone()
            ){
                alert('注册成功!');
            }
        }else{
            tipCk.children[0].className='red';
            tipCk.children[1].className='red';
            tipCk.children[1].innerHTML='请同意注册协议';
        }
    }
    
    






  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值