---恢复内容开始---
HTML代码
<input type="text" type="password" id="ipt"> <br> <br> <br> <h2>密码强度</h2> <span></span> <span></span> <span></span>
CSS代码
input{
width: 400px;
height: 50px;
font-size: 22px;
}
span{
display: inline-block;
width: 100px;
height: 25px;
border: 1px solid #333;
}
JavaScript代码
//获得密码框
let ipt=document.querySelector(‘#ipt‘);
ipt.onkeyup=function(){
let val=ipt.value; //获取输入的值
let numReg=RegExp(/[0-9]/); //判断是否存在数字
let aaaReg=RegExp(/[a-z]/); //判断是否存在小写字符
let AAAReg=RegExp(/[A-Z]/); //判断是否存在大写字符
//正则判断
let num,aaa,AAA;
numReg.test(val) ? num=true : num=false;
aaaReg.test(val) ? aaa=true : aaa=false;
AAAReg.test(val) ? AAA=true : AAA=false;
//将结果做成一个数组
let result=[num,aaa,AAA];
let len=result.length;
//定义有几种类型
let type=0;
for(let i=0;i<len;i++){
if(result[i]){
type++;
}
}
//渲染span
let span=document.getElementsByTagName(‘span‘);
span[type-1].style.backgroundColor="#ff6600";
}
思路 就是根据正则来判断是否存在某些字符。。。页面不美观 请担待 第一次写
---恢复内容结束---
原文：https://www.cnblogs.com/banyuege/p/9321046.html