js small exercise--password strength test

Show results:

Enter less than six digits

Input is more than six digits and contains lowercase letters

Enter less than six digits Enter more than six digits and include lowercase letters Enter more than six digits and include lowercase letters Uppercase letters

html code:

<!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>Sample009 - 验证密码强度</title>
		<link rel="stylesheet" type="text/css" href="css/common.css" />
		<link rel="stylesheet" type="text/css" href="css/index1.css" />
</head>
<body>
    <div class="box">
        <input type="text" maxlength="16" placeholder="密码" id="password">
        <div class="level_0" id="level"></div>
    </div>
</body>
<script src="js/index1.js" type="text/javascript" charset="utf-8"></script>
</html>

css code:

.box{
    width: 300px;
	height: 60px;
    text-align: center;
    margin: 100px auto;
}
input{
    border: 2px  #E0E0E0 solid;
    width: 100%;
	height: 40px;
    -webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
    outline: none;
}
.level_0{
    width: 100%;
    height: 15px;
    background-color: #fff;
}
.level_1{
    width: 33.33%;
    height: 15px;
    background-color: rgb(247, 8, 8);
}
.level_2{
    width: 66.66%; 
    height: 15px;
    background-color: rgb(235, 172, 55);
}
.level_3{
    width: 100%;
    height: 15px;
    background-color: rgb(31, 212, 85);
}

js code:

//获取用户输入
let input=document.getElementById("password");
//获取level
let levle=document.getElementById("level");
input.onkeyup=function(){
    levle.className="level_"+(this.value.length>=6?getLevel(this.value):0);
}
function getLevel(value){
    let level=0;
    if(/[0-9]/.test(value)){
        level++;
    }
    if(/[a-zA-Z]/.test(value)){
        level++;
    }
    if(/[^0-9a-zA-z]/.test(value)){
        level++;
    }
    return level;
}

js small exercise--password strength test

Guess you like