前端如何正确实现密码强度校验策略？

轩辕奥杰提问于 2026-03-11 12:13:16 阅读 11

安全

我在做用户注册页面，想加个密码强度提示，但不确定哪些规则合理。比如至少8位、包含大小写字母和数字这些，是直接在前端用正则判断吗？

试过用 /^(?=.*[a-z])(?=.*[A-Z])(?=.*d).{8,}$/ 这个正则，但用户反馈说体验不好，输错也不知道具体哪条没满足。有没有更友好的做法？

我来解答赞 2 收藏

反馈

1 条解答

Top丶恒豪 Lv1

密码强度校验别用单个复杂正则，拆成多条规则分别判断，逐条显示状态，用户输入时就能实时看到哪些过了哪些没过，体验好很多。

// 规则配置

const rules = [

  { label: '至少8位', test: pwd => pwd.length >= 8 },

  { label: '包含数字', test: pwd => /d/.test(pwd) },

  { label: '包含小写字母', test: pwd => /[a-z]/.test(pwd) },

  { label: '包含大写字母', test: pwd => /[A-Z]/.test(pwd) },

  { label: '包含特殊字符', test: pwd => /[!@#$%^&*]/.test(pwd) }

];



// 实时校验

function checkPassword(pwd) {

  return rules.map(rule => ({

    label: rule.label,

    passed: rule.test(pwd)

  }));

}



// 使用示例：监听输入框

document.getElementById('password').addEventListener('input', e => {

  const results = checkPassword(e.target.value);

  results.forEach((r, i) => {

    const el = document.getElementById(rule-${i});

    el.className = r.passed ? 'passed' : 'failed';

    el.textContent = r.passed ? '✓ ' + r.label : '○ ' + r.label;

  });

});

HTML部分大概这样：



  ○ 至少8位


  ○ 包含数字


  ○ 包含小写字母


  ○ 包含大写字母


  ○ 包含特殊字符

核心就是别让用户猜哪儿错了，输一个字符就反馈一个规则的状态，他自然知道还缺什么。强度等级同理，满足3条以下弱，4条中，5条全满足强。

2026-03-11 13:00