如何将Firebase格式校验错误以Alert弹窗形式展示给用户

方案1：前端预校验（推荐） #

提前在表单提交环节拦截错误，减少不必要的接口请求：

• 邮箱格式通过正则判断，推荐使用通用邮箱校验规则/^[^\s@]+@[^\s@]+\.[^\s@]+$/
• 密码长度直接读取输入字段的length属性判断是否≥6
• 校验不通过直接调用alert()方法弹出对应提示即可
  示例代码：

// 表单提交回调函数
function handleFormSubmit(emailInput, passwordInput) {
  const email = emailInput.trim()
  const password = passwordInput.trim()
  // 校验邮箱格式
  const emailRule = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
  if (!emailRule.test(email)) {
    alert('输入的邮箱格式不正确，请重新输入')
    return
  }
  // 校验密码长度
  if (password.length < 6) {
    alert('密码长度不能少于6位，请重新设置')
    return
  }
  // 校验通过后再调用Firebase相关接口
}

方案2：捕获Firebase接口返回错误处理 #

如果不需要前端预校验，或者需要覆盖Firebase返回的所有错误场景，可以在接口请求的异常捕获块中根据错误码匹配提示：
Firebase Auth固定错误码对应关系：

• 邮箱格式错误：auth/invalid-email
• 密码长度不足6位：auth/weak-password
  示例代码（以注册场景为例，登录场景邮箱格式错误的错误码通用）：

import { getAuth, createUserWithEmailAndPassword } from "firebase/auth";

const auth = getAuth();
createUserWithEmailAndPassword(auth, email, password)
  .then((userCredential) => {
    // 注册成功后续逻辑
  })
  .catch((error) => {
    const errorCode = error.code;
    switch(errorCode) {
      case 'auth/invalid-email':
        alert('输入的邮箱格式不正确，请重新输入')
        break
      case 'auth/weak-password':
        alert('密码长度不能少于6位，请重新设置')
        break
      default:
        alert('操作失败，请稍后再试')
    }
  });

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