前端 - 密码强度校验

题记：在注册页面常有校验密码强度的功能，分享一种自己的写法

规则

  //密码的强弱的问题
  //六位数以上
  // 数字  字母 特殊符号 
  //任意的一种组合 -----弱
  //任意的两种组合------中
  //任意的三种组合------强

html

<div id="dv">
  <label for="pwd">密码</label>
  <input type="text" id="pwd" maxlength="16">
  <div>
    <em>密码强度：</em>
    <em id="strength"></em>
    <div id="strengthLevel" class="strengthLv0"></div>
  </div>
</div>

css

//strengthLv0 代表为达到校验规则时的样式
//strengthLv1 代表密码强度弱时的样式
//strengthLv2 代表密码强度中等时的样式
//strengthLv3 代表密码强度强时的样式
<style type="text/css">
  #dv {
    width: 300px;
    height: 200px;
    position: absolute;
    left: 300px;
    top: 100px;
  }

  .strengthLv0 {
    height: 6px;
    width: 120px;
    border: 1px solid #ccc;
    padding: 2px;
  }

  .strengthLv1 {
    background: red;
    height: 6px;
    width: 40px;
    border: 1px solid #ccc;
    padding: 2px;
  }

  .strengthLv2 {
    background: orange;
    height: 6px;
    width: 80px;
    border: 1px solid #ccc;
    padding: 2px;
  }

  .strengthLv3 {
    background: green;
    height: 6px;
    width: 120px;
    border: 1px solid #ccc;
    padding: 2px;
  }
</style>

js

function getLvl(txt) {
      //默认级别是0
      var lvl = 0;
      //判断这个字符串中有没有数字
      if (/[0-9]/.test(txt)) {
          lvl++;
      }
      //判断字符串中有没有字母
      if (/[a-zA-Z]/.test(txt)) {
          lvl++;
      }
      //判断字符串中有没有特殊符号
      if (/[^0-9a-zA-Z_]/.test(txt)) {
          lvl++;
      }
      return lvl;
  }
  document.querySelector('#pwd').onkeyup = function () {
      document.querySelector('#strengthLevel').className = "strengthLv" + (this.value.length <6 ? 0:getLvl(this.value));
  };