React.js注册页使用RegEx正则实现强密码强度校验问题

当前密码校验逻辑存在3个核心错误，导致强密码规则完全无法生效：

• 正则使用方式完全错误：把正则规则存为普通字符串后，直接用===将用户输入的密码和该字符串做相等比较，这种写法永远不可能得到匹配结果。JS中正则匹配需要调用正则实例的test()方法，检测传入的字符串是否符合规则。
• 正则转义失效：写在普通字符串里的\d属于未正确转义的特殊字符，JS解析时会直接将其识别为普通字符d，根本无法匹配数字。
• 状态初始值不合理：strongpassword状态初始值设为's'，会导致页面刚加载时密码强度条默认按照字符串s计算强度，和实际输入状态不匹配。

1. 替换提交校验逻辑 #

将原有onSubmit方法替换为以下代码，调整校验顺序、修正正则写法，所有校验不通过的分支直接return终止后续流程，避免逻辑混乱：

const onSubmit = e => {
  e.preventDefault();

  // 优先校验两次密码输入是否一致
  if (password !== re_password) {
    setAlert('两次输入的密码不匹配', 'error');
    return;
  }

  // 正确定义强密码正则：匹配规则与后端要求完全对齐
  const strongPasswordPattern = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;

  // 调用正则test方法检测密码是否符合强度要求
  if (!strongPasswordPattern.test(password)) {
    setAlert('密码强度不足，需至少8位，同时包含大小写字母、数字和指定特殊字符(@$!%*?&)', 'error');
    return;
  }

  // 所有校验通过后执行注册逻辑
  signup(name, email, password, re_password);
  setAccountCreated(true);
};

2. 修正状态初始值 #

将strongpassword的初始值从's'改为空字符串，避免密码强度条初始显示异常：

const [ strongpassword, setStrongpassword ] = useState('');

修正后的正则严格匹配后端要求的强密码标准：

• 密码总长度不小于8位
• 必须包含至少1个小写英文字母
• 必须包含至少1个大写英文字母
• 必须包含至少1个数字
• 必须包含至少1个指定特殊字符：@/$/!/%/*/?/&
• 密码中不能出现上述允许范围外的其他字符

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