PugJS form表单提交POST请求返回空body数据{}问题求助

问题根因排查 #

你的表单提交返回空对象是因为以下2个问题：

• 核心原因：表单提交时，浏览器只会携带带有name属性的输入框内容，你当前的邮箱、密码输入框都只声明了id属性，没有添加name属性，所以提交时请求体没有对应字段，express解析后就会返回空对象
• 次要语法问题：密码输入框的labelfor属性拼写错误，你写的是passowordInput，实际输入框id是passwordInput，虽然不影响提交逻辑，但会导致点击label无法自动聚焦到密码输入框

修复后的Pug代码 #

form(name='signup' action='/auth/signup' method='post')
.form-floating.mb-3
    input#emailInput.form-control(type='email' name='email' placeholder='name@example.com')
    label(for='emailInput') Email address 
.form-floating.mb-3
    input#passwordInput.form-control(type='password' name='password' placeholder='Password')
    label(for='passwordInput') Password
input#btnSignin.btn.btn-secondary(type='submit' value='Sign In')

你原有express的解析中间件配置无需修改，修复后重新提交表单即可正常拿到输入的字段内容。

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