首页 > 代码库 > 做了一个密码强度输入测试

做了一个密码强度输入测试

2024-07-06 10:11:10   225人阅读

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>密码强度输入测试</title>
<style type="text/css">
.cont { margin-left:300px; margin-top:50px; border:solid 1px #ccc; width:520px; padding:20px;}
.passwd {
    
    margin-bottom: 10px;
}
table td p { display:block; border-top:solid 4px #ccc; text-align:center; margin-right:10px; line-height:22px;}
.red { border-top-color:#e00;}
.green { border-top-color:#3C3;}
.blue { border-top-color:#0CF;}
.passwd span {
    font-size: 13px;
    color: #888;
    
}
.passwd span em { color:#f00; font-style:normal;}
</style>
</head>

<body>
<div class="cont">
  <div class="passwd">密码：<input name="" type="password" id="passwd" /> <span><em>*</em>6-16位，由字母（区分大小写）、数字、符号组成</span>
  </div>
  <table width="200" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td><p>弱</p></td>
      <td><p>中</p></td>
      <td><p>强</p></td>
    </tr>
  </table>
</div>

<script type="text/javascript">
var reg = /[^A-z0-9]|[\^\[\]]/ ;
var s = reg.test("ds33");
console.log(s);
var pass = document.getElementById("passwd");
var zt  = document.querySelectorAll("table tr p");
pass.addEventListener("focus",jiance);
pass.addEventListener("blur",shifang);

function shifang (e){
    ceshi(e);
    pass.removeEventListener("keyup",ceshi);
    }
function jiance (){
    
    pass.addEventListener("keyup",ceshi);
    
    
}

function ceshi (e){
        var txt = e.target.value ;
        if(txt.length>16){
            e.target.value = txt.substr(0,16);    
        }
        if(txt){
            var qiangdu = AuthPasswd(txt);
            switch (qiangdu){
                case 0:
                zt[0].className = "red";
                zt[1].className = ""; 
                zt[2].className = ""; 
                break;
                case 1:
                zt[0].className = "red"; 
                zt[1].className = "green";
                zt[2].className = "";  
                break;
                case 2:
                zt[0].className = "red"; 
                zt[1].className = "green"; 
                zt[2].className = "blue";
                break;
                }        
        }
    else {
                zt[0].className = ""; 
                zt[1].className = ""; 
                zt[2].className = "";
        }
}


function AuthPasswd(string) {
    if(string.length >=6) {
        if(/[a-zA-Z]/.test(string) && /[0-9]/.test(string) && /[^A-z0-9]|[\^\[\]]/.test(string)) {
            return 2 ;
        }else if(/[a-zA-Z]/.test(string) || /[0-9]/.test(string) || /[^A-z0-9]|[\^\[\]]/.test(string)) {
            if(/[a-zA-Z]+/.test(string) && /[0-9]/.test(string)) {
                return 1 ;
            }else if(/\[a-zA-Z]/.test(string) && /[^A-z0-9]|[\^\[\]]/.test(string)) {
                return 1 ;
            }else if(/[0-9]/.test(string) && /[^A-z0-9]|[\^\[\]]/.test(string)) {
                return 1 ;
            }else{
                return 0 ;
            }
        }
    }else{
        return 0 ;
    }
}
</script>
</body>
</html>

直接写一个代码吧，没什么技术含量。


联系
我们