Firebase V9中HTML/JS表单数据无法写入数据库的问题排查及代码请求

错误原因 #

• 未导入Firebase Realtime Database核心模块：Firebase V9采用模块化架构，不能直接调用database()方法，必须显式导入对应操作函数
• 表单元素ID匹配错误：用户名输入框ID为user，但代码中用getInputVal('username')获取值，导致拿到空值
• 缺少密码一致性验证：未检查两次输入的密码是否相同，可能提交无效数据
• 无数据库操作错误处理：没有捕获写入失败的异常，无法定位问题

需要修改的内容 #

1. 补充导入Firebase数据库的getDatabase、ref、push、set函数
2. 修正用户名获取的ID参数，从username改为user
3. 添加两次密码一致的验证逻辑
4. 正确初始化数据库实例并引用数据节点
5. 给数据库写入操作添加错误捕获，方便调试

完整可运行代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Investors Hub</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="home.css"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
</head>
<body>
    <div class="signupdiv">
        <div class="container">
            <form action="" id="signform">
                <h1>Sign Up</h1>
                <p>Please fill in this form to create an account.</p>
                <hr>
                <label for="name"><b>Name</b></label>
                <input class="signin" type="text" placeholder="Enter Name" id="name" required>
                <label for="age"><b>Age</b></label>
                <input class="signin" type="text" placeholder="Enter Age" id="age" required>
                <label for="email"><b>Email</b></label>
                <input class="signin" type="text" placeholder="Enter Email" id="email" required>
                <label for="mobile"><b>Mobile Number</b></label>
                <input class="signin" type="text" placeholder="Enter Mobile No." id="mobile" required>
                <label for="user"><b>Username</b></label>
                <input class="signin" type="text" placeholder="Enter Username" id="user" required>
                <label for="psw"><b>Password</b></label>
                <input class="signin" type="password" placeholder="Enter Password" id="psw" required>
                <label for="psw-repeat"><b>Repeat Password</b></label>
                <input class="signin" type="password" placeholder="Repeat Password" id="psw-repeat" required>
                <button style="background-color: rgb(34, 156, 9); margin-left: 50px;"class="loginbutton">Sign Up</button>
            </form>
        </div>
    </div>
    
    <script type="module">
        // 导入Firebase核心及数据库模块
        import { initializeApp } from "https://www.gstatic.com/firebasejs/9.17.1/firebase-app.js";
        import { getDatabase, ref, push, set } from "https://www.gstatic.com/firebasejs/9.17.1/firebase-database.js";

        const firebaseConfig = {
            apiKey: "AIzaSyBJhHYCreSFrPNK6sU0O6IVv0a49C5EeRQ",
            authDomain: "projectfirebase-4cbe6.firebaseapp.com",
            projectId: "projectfirebase-4cbe6",
            storageBucket: "projectfirebase-4cbe6.appspot.com",
            messagingSenderId: "250201013862",
            appId: "1:250201013862:web:01d5b87765bb91d99937a7"
        };

        const app = initializeApp(firebaseConfig);
        const db = getDatabase(app);
        const messagesRef = ref(db, 'Collected Data');
        
        document.getElementById('signform').addEventListener('submit', submitForm);

        function submitForm(e) {
            e.preventDefault();

            // 获取表单值
            var name = getInputVal('name');
            var age = getInputVal('age');
            var email = getInputVal('email');
            var mobile = getInputVal('mobile');
            var username = getInputVal('user');
            var pass = getInputVal('psw');
            var passRepeat = getInputVal('psw-repeat');

            // 验证密码一致性
            if (pass !== passRepeat) {
                alert('两次输入的密码不一致，请重新输入');
                return;
            }

            saveMessage(name, age, email, mobile, username, pass);
            document.getElementById('signform').reset();
        }

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

        // 保存数据到Firebase
        function saveMessage(name, age, email, mobile, username, pass) {
            const newMessageRef = push(messagesRef);
            set(newMessageRef, {
                name: name,
                age: age,
                email: email,
                mobile: mobile,
                username: username,
                pass: pass
            })
            .then(() => {
                alert('账号注册成功');
            })
            .catch((error) => {
                alert(`注册失败：${error.message}`);
            });
        }
    </script>
    
</body>
</html>

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