如何用JavaScript为密码输入框添加强度指示器及校验规则

核心逻辑 #

• 预先定义好所有需要的密码校验规则，每条规则对应独立的判断函数
• 给新密码输入框绑定输入事件，用户输入时实时校验所有规则，统计通过数量
• 根据规则通过比例计算密码强度等级，同步更新强度条样式、提示文本，标记已满足/未满足的规则
• 表单提交时做最终校验，不满足要求则阻止提交并提示

具体实现步骤 #

1. 补充页面结构 #

完全保留你原有代码的所有属性、类名和逻辑，仅在新密码输入框的input-group块闭合后，插入强度条和规则提示模块，修改后新密码部分的代码如下：

<p class="">
  <label class="t2" for="password_1">请输入新密码</label>
  <div class="input-group">
   <input type="password" class="field-settings" name="password_1" id="password_1" autocomplete="off" />
   <input type="checkbox" class="togglePw" id="pw_1" onclick="showPassword('password_1')"/>
   <label for="pw_1" class="fa"></label>
  </div>
  <!-- 新增以下代码 -->
  <div class="pw-strength-bar">
    <div class="pw-strength-level"></div>
  </div>
  <span class="pw-strength-text"></span>
  <ul class="pw-rule-list">
    <li data-rule="minLength">密码长度不小于8位</li>
    <li data-rule="lowercase">包含小写字母</li>
    <li data-rule="uppercase">包含大写字母</li>
    <li data-rule="number">包含数字</li>
    <li data-rule="special">包含特殊字符(!@#$%^&*等)</li>
  </ul>
</p>

2. 新增配套样式 #

把以下CSS代码追加到你原有样式表末尾即可，风格和现有表单保持统一：

/* 密码强度指示器样式 */
.pw-strength-bar {
  width: 100%;
  height: 6px;
  background: #efefef;
  border-radius: 3px;
  margin: 8px 0;
  overflow: hidden;
}
.pw-strength-level {
  height: 100%;
  width: 0;
  transition: all 0.3s ease;
  border-radius: 3px;
}
.pw-strength-text {
  font-size: 12px;
  display: block;
  margin-bottom: 8px;
}
.pw-rule-list {
  list-style: none;
  padding: 0;
  margin: 0 0 12px 0;
  font-size: 12px;
  color: #8C9099;
}
.pw-rule-list li {
  margin: 4px 0;
  padding-left: 18px;
  position: relative;
}
.pw-rule-list li::before {
  content: "\f00d";
  font: var(--fa-font-solid);
  position: absolute;
  left: 0;
  color: #ff4d4f;
}
.pw-rule-list li.passed {
  color: #52c41a;
}
.pw-rule-list li.passed::before {
  content: "\f00c";
  color: #52c41a;
}
/* 强度等级配色 */
.strength-weak .pw-strength-level { background: #ff4d4f; width: 25%; }
.strength-medium .pw-strength-level { background: #faad14; width: 50%; }
.strength-good .pw-strength-level { background: #52c41a; width: 75%; }
.strength-strong .pw-strength-level { background: #1E70EB; width: 100%; }

3. 新增交互逻辑 #

把以下JS代码追加到你原有脚本末尾，不需要修改你之前写的showPassword函数：

// 密码校验规则配置，可按需修改
const pwRules = {
  minLength: (val) => val.length >= 8,
  lowercase: (val) => /[a-z]/.test(val),
  uppercase: (val) => /[A-Z]/.test(val),
  number: (val) => /[0-9]/.test(val),
  special: (val) => /[!@#$%^&*(),.?":{}|<>]/.test(val)
}

// 获取关联DOM元素
const newPwInput = document.getElementById('password_1');
const confirmPwInput = document.getElementById('password_2');
const strengthBarWrap = newPwInput.closest('p').querySelector('.pw-strength-bar');
const strengthText = newPwInput.closest('p').querySelector('.pw-strength-text');
const ruleItems = newPwInput.closest('p').querySelectorAll('.pw-rule-list li');

// 监听新密码输入，实时更新校验状态和强度显示
newPwInput.addEventListener('input', function() {
  const pwVal = this.value;
  let passedCount = 0;
  // 逐条校验规则
  ruleItems.forEach(item => {
    const ruleKey = item.dataset.rule;
    const isPassed = pwRules[ruleKey](pwVal);
    if (isPassed) {
      item.classList.add('passed');
      passedCount++;
    } else {
      item.classList.remove('passed');
    }
  })
  // 重置强度状态
  strengthBarWrap.classList.remove('strength-weak', 'strength-medium', 'strength-good', 'strength-strong');
  if (!pwVal) {
    strengthText.textContent = '';
    return;
  }
  // 匹配对应强度等级
  let strengthLevel = '';
  let levelText = '';
  switch(true) {
    case passedCount <= 2:
      strengthLevel = 'strength-weak';
      levelText = '弱';
      break;
    case passedCount === 3:
      strengthLevel = 'strength-medium';
      levelText = '中等';
      break;
    case passedCount === 4:
      strengthLevel = 'strength-good';
      levelText = '良好';
      break;
    case passedCount === 5:
      strengthLevel = 'strength-strong';
      levelText = '强';
      break;
  }
  strengthBarWrap.classList.add(strengthLevel);
  strengthText.textContent = `密码强度：${levelText}`;
})

// 表单提交校验（可选，根据需求保留）
document.querySelector('form')?.addEventListener('submit', function(e) {
  const pwVal = newPwInput.value;
  // 新密码为空时代表不修改密码，直接放行
  if (!pwVal) return;
  // 校验所有规则是否满足
  const allRulePassed = Object.values(pwRules).every(checkFn => checkFn(pwVal));
  // 校验两次密码输入一致
  const pwMatch = pwVal === confirmPwInput.value;
  if (!allRulePassed || !pwMatch) {
    e.preventDefault();
    alert('请检查密码是否满足所有规则，且两次输入内容一致');
  }
})

/* 原有密码显示/隐藏逻辑 无需修改 */
function showPassword(targetID) {
  var pw = document.getElementById(targetID);
  if (pw.type === "password") {
    pw.type = "text";
  } else {
    pw.type = "password";
  }
}

自定义调整方法 #

• 修改最小长度要求：直接调整pwRules里minLength的判断数值，比如要求最少10位就改为val.length >= 10
• 增删校验规则：在pwRules对象里新增/删除校验函数，同时在HTML的规则列表里新增/删除对应data-rule属性的<li>项即可
• 修改强度阈值/配色：调整JS中switch判断的passedCount区间，或者修改CSS中对应强度类的宽度、颜色属性即可

内容的提问来源于stack exchange，提问作者Snorlax