前端如何正确验证密码强度并实时反馈？

程序员国玲提问于 2026-03-21 00:17:20 阅读 67

安全

我在做用户注册页的密码输入，想实现实时提示密码是否符合策略（比如至少8位、含大小写字母和数字），但现在的逻辑好像不太对，输完后提示信息没更新。

我用的是React的useState来跟踪密码和错误状态，但校验函数可能写得有问题。试过在onChange里调validatePassword，但UI没反应。下面是我的代码：

const [password, setPassword] = useState('');
const [passwordError, setPasswordError] = useState('');

const validatePassword = (pwd) => {
  const strongRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*d).{8,}$/;
  return strongRegex.test(pwd);
};

const handlePasswordChange = (e) => {
  const pwd = e.target.value;
  setPassword(pwd);
  if (!validatePassword(pwd)) {
    setPasswordError('密码需至少8位，包含大小写字母和数字');
  } else {
    setPasswordError('');
  }
};

我来解答赞 7 收藏

反馈

1 条解答

Top丶东焕 Lv1

懒人方案，你的正则表达式写错了，d应该加反斜杠变成d。还有，确保你的输入框绑定了handlePasswordChange。这样改了应该就没问题了。

const validatePassword = (pwd) => {

  const strongRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*d).{8,}$/;

  return strongRegex.test(pwd);

};

2026-03-21 01:00