js实现密码强度判定功能

lzsan_

已于 2022-03-31 17:29:50 修改

阅读量1.1k

点赞数 2

文章标签： javascript html5

于 2022-03-31 16:39:45 首次发布

本文链接：https://blog.csdn.net/lzsan_/article/details/123877010

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #txt {
            width: 174px;
        }
        #pwdLevel {
            /* 弹性盒模型 */
            display: flex;
            /* 两端对齐 */
            justify-content: space-around;
            width: 174px;
            height: 16px;
            margin: 10px 0;
            padding:3px 0;
            border: 1px solid #c0c0c0;
            border-radius: 15px;
        }
        #pwdLevel li {
            list-style: none;
            width: 50px;
            background-color: #ddd8d8;
        }
        #tip{
            display: flex;
            justify-content: space-around;
            width: 174px;
            height: 16px;
        }
        #tip {
            visibility: hidden;
        }
    </style>
    <script>
        window.onload=function(){
            var oTxt=document.getElementById("txt");
            var oUl=document.getElementById("pwdLevel");
            var oDiv=document.getElementById("tip");
            //   键盘弹起事件
            oTxt.onkeyup=function(){
                var str=oTxt.value;
                var num=0;
                var string=0;
                var sign=0;
                for(var i=0;i<str.length;i++){
                    // 数字
                    if(str.charCodeAt(i)>=48&&str.charCodeAt(i)<=57){
                        
                        num=1;
                        continue;
                    }
                    //大小写字母
                    if(str.charCodeAt(i)>=65&&str.charCodeAt(i)<=90||str.charCodeAt(i)>=97&&str.charCodeAt(i)<=122){
                       
                        string=1;
                        continue;
                    }
                    // 特殊符号
                    if(!(str.charCodeAt(i)>=48&&str.charCodeAt(i)<=57&&str.charCodeAt(i)>=65&&str.charCodeAt(i)<=90&&str.charCodeAt(i)>=97&&str.charCodeAt(i)<=122)){
                       
                        sign=1;
                        continue;
                    }
                }
                if(num&&string&&sign){
                    oDiv.children[0].style.visibility='hidden';
                    oDiv.children[1].style.visibility='hidden';
                    oDiv.children[2].style.visibility='visible';
                    pwdLevel.children[0].style.background="red";
                    pwdLevel.children[1].style.background="orange";
                    pwdLevel.children[2].style.background="green";
                    
                  
                }else
                if(num&&string||num&&sign||string&&sign){
                    oDiv.children[1].style.visibility='visible';
                    oDiv.children[0].style.visibility='hidden';
                    oDiv.children[2].style.visibility='hidden';
                    pwdLevel.children[0].style.background="red";
                    pwdLevel.children[1].style.background="orange";
                    pwdLevel.children[2].style.background="white";
                }
                else{
                    oDiv.children[0].style.visibility='visible';
                    oDiv.children[2].style.visibility='hidden';
                    oDiv.children[1].style.visibility='hidden';
                    pwdLevel.children[0].style.background="red";
                    pwdLevel.children[1].style.background="white";
                    pwdLevel.children[2].style.background="white";
                }
            }
        }
   
    </script>
</head>
<body>
    <input type="text" id="txt">
    <ul id="pwdLevel"> 
        <li style="border-bottom-left-radius: 8px;border-top-left-radius: 8px;"></li>
        <li></li>
        <li style="border-bottom-right-radius: 8px;border-top-right-radius: 8px;"></li>
    </ul>
    <div id="tip">
        <div>弱</div>
        <div>中</div>
        <div>强</div>
    </div>
</body>
</html>

lzsan_

关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
js实现密码强度判定功能

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &lt...
复制链接

扫一扫