js小练习--密码强度测试

效果展示：

输入为六位以下

输入为六位以上且包含小写字母

输入为六位以下输入为六位以上且包含小写字母输入为六位以上且包含小写字母大写字母

html代码：

<!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代码：

.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代码：

//获取用户输入
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小练习--密码强度测试

猜你喜欢