Firebase Authentication与HTML form元素兼容问题求助

你遇到的核心问题是表单的默认提交行为打断了Firebase的异步验证流程：

当按钮放在<form>标签内时，浏览器会默认把这些按钮识别为type="submit"类型——点击它们会触发表单的提交动作，导致页面立即刷新。而Firebase的登录/注册操作是异步的，页面刷新会直接中断这个异步请求，自然无法完成登录流程。把元素移出<form>后，没有了默认提交行为，JS事件就能正常执行了。

另外提一句：控制台里的SDK开发版本警告只是性能优化建议，和你当前的登录失效问题没有关系，不用在意它。

下面给你几个可行的解决办法：

方法1：阻止按钮点击的默认行为 #

在每个按钮的点击事件处理函数里添加e.preventDefault()，手动阻止表单提交：

修改你的JS代码中按钮事件部分：

btnLogin.addEventListener('click', e => {
  e.preventDefault(); // 新增这一行
  const email = txtEmail.value;
  const pass = txtPassword.value;
  const auth = firebase.auth();
  const promise = auth.signInWithEmailAndPassword(email, pass);
  promise.catch(e => console.log(e.message));
});

btnSignUp.addEventListener('click', e => {
  e.preventDefault(); // 新增这一行
  const email = txtEmail.value;
  const pass = txtPassword.value;
  const auth = firebase.auth();
  const promise = auth.createUserWithEmailAndPassword(email, pass);
  promise.catch(e => console.log(e.message));
});

btnLogout.addEventListener('click', e => {
  e.preventDefault(); // 可选，因为logout不需要表单，但加上更严谨
  firebase.auth().signOut();
});

方法2：修改按钮的type属性 #

直接把按钮的type设置为button，这样浏览器就不会把它们当作提交按钮：

修改你的HTML代码：

<form id="app">
  <input type="email" id="txtEmail" placeholder="Email">
  <input type="password" id="txtPassword" placeholder="Password">
  <button type="button" id="btnLogin">Login</button>
  <button type="button" id="btnSignUp">SignUp</button>
  <button type="button" id="btnLogout">Logout</button>
</form>

方法3：阻止表单的submit事件 #

如果想保留表单的结构，也可以给<form>添加submit事件监听，阻止默认行为：

document.getElementById('app').addEventListener('submit', e => {
  e.preventDefault();
});

这三种方法都能解决你的问题，选你觉得最顺手的就行～

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