账号注册，密码安全级别提示（弱、中、强）代码

依照惯例先让各位看官看下效果，然后再看代码

1 <input id="passw" type="password" />
2      <div class="maxdiv" >
3         <div></div>
4         <div></div>
5         <div></div>
6      </div>
7  <span></span>
1 .maxdiv div{
2             height:10px;
3             width:20px;
4             border:1px solid #000;
5             float:left;
6             margin:20px 2px 0px 5px;
7         }

下面就看js啦...

$(function(){
            $(".maxdiv").hide();
            $("#passw").keyup(function(){
                var yell=/^\w+$/;
                var vhtml=$("#passw").val();
                if(yell.test(vhtml)==true && vhtml.length>=6 && vhtml.length<8 )
                {
                    $(".maxdiv").show();
                    $(".maxdiv :first").attr("style","background:red");
                    $(".maxdiv :gt(0)").attr("style","");
                    $('span').text("弱");
                }else if(yell.test(vhtml)==true && vhtml.length>=8 && vhtml.length<10 || vhtml.indexOf("@")>0 && vhtml.indexOf(".")<0)
                {
                    $(".maxdiv").show();
                    $(".maxdiv :lt(2)").attr("style","background:yellow");
                    $(".maxdiv :last").attr("style","");
                    $('span').text("中");
                }else if (yell.test(vhtml)==true && vhtml.length>=8 && vhtml.length<10 || vhtml.indexOf(".")>0 && vhtml.indexOf("@")<0 )
                {
                    $(".maxdiv").show();
                    $(".maxdiv :lt(2)").attr("style","background:yellow");
                    $(".maxdiv :last").attr("style","");
                    $('span').text("中");
                }
                else if (vhtml.indexOf("@")>0 && vhtml.indexOf(".")>0 || vhtml.indexOf("*")>0  &&  vhtml.length>=10 )
                {
                    $(".maxdiv").show();
                    $(".maxdiv div").attr("style","background:green");
                    $('span').text("强");
                }
                if(vhtml.length<6)
                {
                    $(".maxdiv").hide();
                    $(".maxdiv div").attr("style","");
                    $('span').html("");
                }
            });
        })

 

posted @ 2014-02-24 16:50  张三的编码生活  阅读(1318)  评论(1)  编辑  收藏  举报