用js来实现密码低中高强度显示

小天天天天    前端    689 次    2017-05-08 03:22:31


用js来实现密码强度显示

分别提示低,中,高强度

全部代码如下:

代码写的是真丑,将就看

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <style type="text/css">
        .div1{
            display:inline;
            float: left;
            height: 20px;
            width: 50px;
            margin-left: 5px;
            border: 1px solid red;
            text-align: center;
        }
    </style>
    <body>
        <script type="text/javascript">
            function check () {
                var pwdstr=document.getElementById("pwd").value;
                var arr=pwdstr.split('');
                var num=0;
                var zm=0;
                var fh=0;
                for (var i = 0,len=arr.length; i < len; i++) {
                    if (/[0-9]+/.test(arr[i])) {
                        num=1;
                    } else if (/[a-zA-Z]+/.test(arr[i])){
                        zm=1;
                    }else{
                        fh=1;
                    }
                }
                var sum=num+zm+fh;
                if (sum==1) {
                    document.getElementById('di').style.backgroundColor='#FF0000';
                    return;
                }else if(sum==2){
                    document.getElementById('di').style.backgroundColor='yellow';
                    document.getElementById('zhong').style.backgroundColor='yellow';
                    return;
                }else if(sum==3){
                    document.getElementById('di').style.backgroundColor='green';
                    document.getElementById('zhong').style.backgroundColor='green';
                    document.getElementById('gao').style.backgroundColor='green';
                    return;
                }else{
                    document.getElementById('di').style.backgroundColor='white';
                    document.getElementById('zhong').style.backgroundColor='white';
                    document.getElementById('gao').style.backgroundColor='white';
                    return;
                }
                
            }
        </script>
        <p>
            <form action="" method="post">
                密码:<input type="text" id="pwd" value="" onkeyup="check();"/>
                <input type="reset" value="清空"/>
            </form>
        </p>
        <div>
                <div class="div1" id="di">低</div>
                <div class="div1" id="zhong">中</div>
                <div class="div1" id="gao">高</div>
            </div>
    </body>
</html>


也算勉强实现了吧,



如果你觉得本篇文章对您有帮助,请打赏作者

最新评论

暂无评论
网站数据

网站文章数:301

注册用户数:18

TOP