JavaScript密码强度效果实例

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";
    }

　　思路  就是根据正则来判断是否存在某些字符。。。页面不美观 请担待  第一次写