NodeJS登录/注册表单请求体数据传递失败问题排查

核心问题 #

你的HTML表单未给输入框设置name属性，浏览器提交表单时依赖name字段识别并传递数据，缺少该属性会导致请求体为空，触发Mongoose的必填字段验证错误。另外提交按钮上的onclick事件会打断表单提交流程，也是潜在问题。

修复后的表单代码 #

<div id="signup-form">
        <h2>Signup</h2>
        <form method="post" action="/signup">
            <div class="form-floating mb-3">
                <input type="text" class="form-control" id="username" name="username">
                <label for="username">Username</label>
            </div>
            <div class="form-floating">
                <input type="password" class="form-control" id="password" name="password">
                <label for="password">Password</label>
            </div>

            <button type="submit" class="btn btn-primary">Signup</button>
        </form>
        <div class="instead-button">
            <button class="btn btn-primary" onclick="showLoginForm()">Login instead</button>
        </div>
    </div>

修改点说明：

• 给两个输入框添加name="username"和name="password"，这是表单传递数据的核心要求
• 将输入框上错误使用的for属性改为id，与<label>的for属性对应，符合HTML规范
• 移除提交按钮上的onclick="showLoginForm()"，避免打断表单提交流程

额外确认项 #

确保后端已配置解析表单数据的中间件（Postman测试正常说明JSON解析中间件已配置，但表单提交需要urlencoded解析）：

// 需在路由定义前添加
app.use(express.urlencoded({ extended: true })); // 解析浏览器默认的表单编码格式
app.use(express.json()); // 解析JSON格式请求体

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