<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
span{
display: none;
}
</style>
</head>
<body>
<input type="password" class="mm">
<span class="r">弱</span>
<span class="z">中</span>
<span class="q">强</span>
<script>
var mm=document.querySelector(".mm");
var sp=document.querySelectorAll("span")
mm.onblur=function () {
var flag=0;
if(/[0-9]/.test(this.value)){
flag++;
console.log("数字")
}
if(/[a-zA-Z_]/.test(this.value)){
flag++;
console.log("字母")
}
if(/\W/.test(this.value)){
flag++;
console.log("特殊")
}
function hide(){
for(var i=0;i<sp.length;i++){
sp[i].style.display="none";
}
}
switch (flag) {
case 1:
hide();
document.querySelector(".r").style.display="block"
break;
case 2:
hide();
document.querySelector(".z").style.display="block"
break;
case 3:
hide();
document.querySelector(".q").style.display="block"
break;
}
}
function hide() {
for (var i=0;i<sp.length;i++) {
sp[i].style.display="none";
}
}
</script>
</body>
</html>