如何实现密码验证器同时展示所有未满足规则的错误提示

解决思路 #

你当前的逻辑大概率是在校验时遇到第一个不符合的规则就直接终止后续校验，或者每次校验都直接覆盖反馈区域的内容，导致只能展示单条错误。按照以下逻辑修改即可实现多条错误同时展示：

• 每次触发密码校验时，先初始化空数组存储所有未满足规则的错误提示
• 逐条运行所有校验规则，只要不满足就把对应提示推入数组
• 所有规则校验完成后，统一把数组内的错误拼接成列表/换行文本渲染到反馈区域，如果数组为空就清空反馈或显示校验通过提示

完整实现代码 #

<!-- 你的原有HTML结构 -->
password: <input type="password" id="password" name="password"> <br>

<input type="checkbox" id="passwordReveal">
<label for="passwordReveal">Show Password</label>

<p id="feedback"></p>

<script>
const passwordInput = document.getElementById('password');
const passwordReveal = document.getElementById('passwordReveal');
const feedbackEl = document.getElementById('feedback');

// 自定义校验规则，可根据需求修改
const rules = [
  {
    test: pwd => pwd.length >= 8,
    msg: '密码长度不能少于8位'
  },
  {
    test: pwd => /[A-Z]/.test(pwd),
    msg: '密码需要包含至少1个大写字母'
  },
  {
    test: pwd => /[a-z]/.test(pwd),
    msg: '密码需要包含至少1个小写字母'
  },
  {
    test: pwd => /[0-9]/.test(pwd),
    msg: '密码需要包含至少1个数字'
  },
  {
    test: pwd => /[!@#$%^&*]/.test(pwd),
    msg: '密码需要包含至少1个特殊字符(!@#$%^&*)'
  }
];

// 校验函数
function validatePassword() {
  const pwd = passwordInput.value;
  const errors = [];
  // 遍历所有规则收集错误
  rules.forEach(rule => {
    if (!rule.test(pwd)) {
      errors.push(rule.msg);
    }
  });
  // 渲染反馈
  if (errors.length === 0) {
    feedbackEl.innerHTML = '<span style="color:green">密码符合要求</span>';
  } else {
    feedbackEl.innerHTML = errors.map(msg => `- ${msg}`).join('<br>');
    feedbackEl.style.color = 'red';
  }
}

// 密码显示切换功能
passwordReveal.addEventListener('change', () => {
  passwordInput.type = passwordReveal.checked ? 'text' : 'password';
});

// 输入时实时校验
passwordInput.addEventListener('input', validatePassword);
</script>

扩展说明 #

如果需要调整错误展示样式，可以修改渲染逻辑，比如把错误拼接成<ul>列表来展示，视觉效果更清晰。

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