<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.lv0{
width: 10px;
height: 5px;
background-color:white;
}
.lv1{
width: 40px;
height: 5px;
background-color:red;
}
.lv2{
width: 80px;
height: 5px;
background-color:orangered;
}
.lv3{
width: 120px;
height: 5px;
background-color:green;
}
</style>
</head>
<body>
<input type="password" id="pwd">
<div id="lv">
<script>
var pwd = document.getElementById("pwd");
var lv = document.getElementById("lv");
pwd.onkeyup = function () {
var lvl = getPawLvl(this.value);
if(pwd.value.length<6){
;
}
else{
if(1==lvl){
lv.className="lv1";
}else if(2==lvl){
lv.className="lv2";
}else if(3==lvl){
lv.className="lv3";
}else{
lv.className = "lv0";
}
}
}
function getPawLvl(password){
var lvl = 0;
if(/[0-9]/.test(password)){
lvl++;
}
if(/[a-zA-Z_]/.test(password)){
lvl++;
}
if(/[^0-9a-zA-Z_]/.test(password)){
lvl++;
}
return lvl;
}
</script>
</body>
</html>
原文：https://www.cnblogs.com/programfield/p/11067774.html