注册表单无法连接Firebase实时数据库与认证服务问题

核心错误排查 #

1. 事件监听错误：原代码中form.addEventListener('signupform', submitData);存在两个问题：
   • 未定义form变量，应使用获取到的signupform元素
   • 监听的事件名错误，表单提交事件是submit而非表单ID
2. Firebase初始化与脚本加载冲突：HTML中Firebase SDK使用type="module"加载，但signup.js是普通脚本，导致firebase对象在initializeApp中可能未定义
3. 缺失Firebase用户认证流程：仅将数据存入Firestore，未调用Firebase Auth创建用户，不符合需求中的认证系统要求
4. 未实现表单验证与跳转逻辑：缺少邮箱格式校验、密码长度校验，以及注册成功后的跳转功能

修复后的完整代码 #

signup.js #

function initializeApp() {
  const firebaseConfig = {
    apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    authDomain: "xxxxxxxxxxxxxxxxxxxxxxxx",
    databaseURL: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    projectId: "xxxxxxxx",
    storageBucket: "xxxxxxxxxxxxxxxx",
    messagingSenderId: "xxxxxxxx",
    appId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
  };

  // 初始化Firebase
  firebase.initializeApp(firebaseConfig);
  const firestore = firebase.firestore();
  const auth = firebase.auth();

  // 监听表单提交
  const signupform = document.getElementById('signupform');
  signupform.addEventListener('submit', submitData);

  // 表单提交处理
  function submitData(e){
    e.preventDefault();

    // 获取表单值
    const fname = getInputVal('fname');
    const sname = getInputVal('sname');
    const email = getInputVal('email');
    const password = getInputVal('password');

    // 表单验证
    if (!validateEmail(email)) {
      alert('请输入有效的邮箱格式');
      return;
    }
    if (password.length < 6) {
      alert('密码长度必须超过6位');
      return;
    }

    // 创建Firebase用户并存储数据
    auth.createUserWithEmailAndPassword(email, password)
      .then((userCredential) => {
        // 用户创建成功，存储额外信息到Firestore
        const user = userCredential.user;
        return firestore.collection("users").doc(user.uid).set({
          fname,
          sname,
          email,
          createdAt: firebase.firestore.FieldValue.serverTimestamp()
        });
      })
      .then(() => {
        // 显示成功提示
        const alertEl = document.querySelector('.alert');
        alertEl.style.display = 'block';
        
        // 3秒后隐藏提示并清空表单、跳转
        setTimeout(() => {
          alertEl.style.display = 'none';
          signupform.reset();
          // 跳转至登录页
          window.location.href = 'login.html';
        }, 3000);
      })
      .catch((error) => {
        console.error('注册失败:', error.message);
        alert('注册失败：' + error.message);
      });
  }

  // 获取表单输入值
  function getInputVal(id){
    return document.getElementById(id).value.trim();
  }

  // 邮箱格式验证
  function validateEmail(email) {
    const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return re.test(email);
  }
}

signup.html #

调整脚本加载顺序，确保Firebase SDK先于自定义脚本加载：

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 先加载Firebase SDK -->
    <script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-auth.js"></script>
    <script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-firestore.js"></script>
    <script src="signup.js"></script>
    <title>Sign Up | QuizMe</title>
    <link rel="stylesheet" href="signup.css">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
    </style>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Lobster+Two:ital,wght@1,700&display=swap');
    </style>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap');
    </style>
  </head>
  <body onload="initializeApp()">
    <header class="page__header header">
      <div class="header__container container">
        <div class="header__body">
          <div class="header__leftside">
            <a href="index.html" title="" class="header__logo">QuizMe</a>
          </div>
          <div class="header__rightside">
            <div class="header__menu header-menu">
              <ul class="header-menu__list">
                <li class="header-menu__item">
                  <a href="index.html" title="" class="header-menu__link">Home</a>
                </li>
                <li class="header-menu__item">
                  <a href="about.html" title="" class="header-menu__link">About</a>
                </li>
                <li class="header-menu__item">
                  <a href="#" title="" class="header-menu__link">Play</a>
                </li>
                <li class="header-menu__item">
                  <a href="#" title="" class="header-menu__link">Leaderboard</a>
                </li>
                <li class="header-menu__item">
                  <a href="#" title="" class="header-menu__link">Profile</a>
                </li>
              </ul>
            </div>
            <div class="header__mob">
              <div class="header__mob-menu">
                <i class='bx bx-menu' ></i>
              </div>
            </div>
          </div>
        </div>
      </div>
    </header>
    <div class="main-container">
      <div class="left"></div>
      <div class="right">
        <div class="text-content">
          <div class="main_div">
            <div class="wrapper">
              <div class="title">Registration</div>
              <form action="#" id="signupform">
                <div class="alert" style="display:none;">Signup Successful!</div>
                <div class="input-box">
                  <input type="text" class="form-control" id="fname" name="fname" placeholder="Enter your first name" required>
                </div>
                <div class="input-box">
                  <input type="text" class="form-control" id="sname" name="sname" placeholder="Enter your surname" required>
                </div>
                <div class="input-box">
                  <input type="email" class="form-control" id="email" name="email" placeholder="Enter your email" required>
                </div>
                <div class="input-box">
                  <input type="password" class="form-control" id="password" name="password" placeholder="Create password" required>
                </div>
                <div class="policy">
                  <input id="field_terms" onchange="this.setCustomValidity(validity.valueMissing ? 'Please indicate that you accept the Terms and Conditions' : '');" type="checkbox" required name="terms">
                  <h3>By signing up, you agree to our <a href="tc.html">terms and conditions</a></h3>
                </div>
                <div class="input-box button">
                  <input type="submit" id="submitData" name="submitData" value="Register Now">
                </div>
                <div class="text">
                  <h3>Already have an account? <a href="/login.html">Login now</a></h3>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script>document.getElementById("field_terms").setCustomValidity("Please indicate that you accept the Terms and Conditions");</script>
  </body>
</html>

关键改进说明 #

1. 修复事件监听：使用正确的表单元素和submit事件监听
2. 完善Firebase流程：结合firebase.auth()创建用户，同时将用户信息存入Firestore（使用用户UID作为文档ID，符合Firebase最佳实践）
3. 添加表单验证：实现邮箱格式正则校验、密码长度校验
4. 实现跳转逻辑：注册成功后3秒自动跳转至login.html
5. 调整脚本加载顺序：确保Firebase SDK先加载，避免firebase未定义的错误
6. 优化交互：默认隐藏成功提示，仅在注册成功后显示，同时处理错误提示

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