javascript 在登录/注册表单中传输请求体中的数据时面临的问题

ukxgm1gy  于 2023-05-12  发布在  Java
关注(0)|答案(2)|浏览(133)

我已经使用NodeJS创建了登录/注册页面和相应的路由。我面临的问题是,在点击提交按钮,注册路由是调用,但数据没有在请求体传输。显示此错误消息
{“message”:“用户验证失败:用户名:路径username是必需的。,密码:路径password是必需的。"},我也在postman上运行过此路由。一切都正常。数据被正确地存储在数据库中。
这是注册表。

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

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

这是后端代码

app.post('/signup', async (req, res) => {
  try {
    console.log('inside');
    const { username, password } = req.body;
    const user = await User.create({ username, password });
    res.status(201);
  } catch (error) {
    res.status(400).json({ message: error.message });
  }
});
nlejzf6q

nlejzf6q1#

你在HTML代码中犯了一个小错误。当您提交表单时,主体将由输入字段的name属性获取。
但是
您已将for属性添加到input字段。并且缺少name属性。
所以问题是。
将代码更改为:

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

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

这将解决这个问题。

sqxo8psd

sqxo8psd2#

你忘了在html表单输入元素中定义名称属性

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

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

相关问题