JS验证密码强度——正则表达式进行判断_js密码强度正则表达式-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44584059/article/details/108847804

这篇博客展示了如何使用HTML、CSS和JavaScript创建一个实时评估密码强度的简单应用。通过正则表达式检查密码中是否包含小写字母、数字和其他字符，根据匹配情况动态调整密码强度等级，显示为不同颜色的进度条。用户输入密码时，页面会即时更新显示密码强度为‘低’、‘中’或‘高’。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

借助正则表达式，实现对用户输入的密码进行等级评定

实现效果
HTML
CSS
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