React.js结合Firebase实现注册密码大小写合规校验

大小写规则的校验必须前置到Firebase认证接口调用之前，因为Firebase原生仅会检测密码长度是否满足最低6位要求，不会识别大小写合规性要求，这类纯规则校验完全可以在本地快速完成，不需要等待服务端响应。

• 长度校验：判断密码长度是否小于6位，不满足则提示长度不足
• 大写字符校验：通过正则/[A-Z]/匹配密码内容，不匹配则提示缺少大写字母
• 小写字符校验：通过正则/[a-z]/匹配密码内容，不匹配则提示缺少小写字母

只要任意一项校验不通过，就直接将对应错误信息赋值给passwordError状态，终止注册流程，不调用Firebase的创建用户接口。

const handleSignup = () => {
  // 先清空历史密码错误提示
  setPasswordError('')

  // 逐项执行自定义密码校验
  if (password.length < 6) {
    setPasswordError('密码长度不能少于6位')
    return
  }
  if (!/[A-Z]/.test(password)) {
    setPasswordError('密码必须包含至少1个大写英文字符')
    return
  }
  if (!/[a-z]/.test(password)) {
    setPasswordError('密码必须包含至少1个小写英文字符')
    return
  }

  // 本地校验通过后，再调用Firebase注册接口
  fire
    .auth()
    .createUserWithEmailAndPassword(email, password)
    .catch((err) =>{
      switch (err.code){
        case "auth/invalid-email":
        case "auth/email-already-in-use":
          setEmailError(err.message);
          break;
        // 保留原弱密码错误分支做兜底，防止本地校验被绕过
        case "auth/weak-password":
          setPasswordError(err.message)
          break;
      }
    })
}

• 这套本地校验逻辑可以抽离成独立函数，复用到输入框实时校验场景，用户输入过程中就能同步提示规则要求，不需要等到点击提交才反馈
• 原有的auth/weak-password错误分支需要保留，作为服务端兜底逻辑：如果用户通过浏览器控制台修改前端状态绕过本地校验，Firebase返回的长度不足错误依然能被正常捕获处理

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