JS验证密码强度——正则表达式进行判断

实现效果

HTML

<!-- 验证密码强度S -->
    <div class="pswContainer">
      <h1>验证密码强度</h1>
      <label for="">密码</label>
      <input type="text" id="inp1" maxlength="16">
      <div class="pass_wrap">
        <em>密码强度：</em>
        <em id="strength">高</em>
        <div id="strengthLevel" class="strengthLv0"></div>
      </div>
    </div>
    <!-- 验证密码强度E -->

CSS

/* 验证密码强度S */
.strengthLv1 {
  background-color: red;
  height: 6px;
  width: 40px;
  border: 1px solid #ccc;
  padding: 2px;
}

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

.strengthLv3 {
  background-color: green;
  height: 6px;
  width: 120px;
  border: 1px solid #ccc;
  padding: 2px;
}
/* 验证密码强度E */

JS

// 验证密码强度S
// 有小写字母，数字，其他字符，级别+1
var inp1 = document.getElementById("inp1");
var strength = document.getElementById("strength");
var strengthLevel = document.getElementById("strengthLevel");
var arr = ["", "低", "中", "高"];
inp1.onkeyup = function () {
  // 获取用户输入内容
  // 记录安全级别
  var level = 0;
  // 正则表达式判断输入的东西
  // 小写字母，级别+1
  if (/[a-z]/.test(this.value)) {
    level++;
  }
  // 数字+1
  if (/[0-9]/.test(this.value)) {
    level++;
  }
  // 其他+1
  if (/[^a-z0-9]/.test(this.value)) {
    level++;
  }
  strength.innerHTML = arr[level];
  strengthLevel.className = "strengthLv" + level;
};
// 验证密码强度E