Express接收POST表单时姓名字段为undefined仅email正常获取问题

架构老林

2026-8-27

问题根因

表单参数取值为undefined的核心原因是后端读取req.body的字段名，和前端表单输入框的name属性值完全不匹配，属于字段命名/拼写不一致导致的取值错误，具体错点：

后端读取姓名字段时写的是req.body.firsName，本身就存在拼写错误（first少写了字母t），同时前端对应名字输入框的name属性值为fName，两边字段名不对应
后端读取姓氏字段时写的是req.body.lastName，但前端对应姓氏输入框的name属性值为lName，字段名同样不对应
只有邮箱字段前后端都统一用email作为字段名，所以可以正常打印取值

修复方案

两种修改方式二选一即可，核心原则是保证后端读取的字段名和前端input的name属性值完全一致：

方式一：修改后端代码对齐前端现有字段

将POST路由的取值逻辑修改为如下内容，和前端现有name属性匹配：

app.post("/", function(req , res){
    var firstName = req.body.fName;
    var lastName = req.body.lName;
    var email = req.body.email;
    console.log(firstName, lastName , email );
    res.send("提交成功"); // 补充响应逻辑，避免请求挂起
})

方式二：修改前端表单name属性对齐后端字段

修正前端两个文本输入框的name属性，同时修复后端代码里的拼写错误：
首先修改HTML部分的input标签：

<input type="text" name="firstName" class="form-control top" placeholder="first name">
<input type="text" name="lastName" class="form-control middle"  placeholder="last name">
<input type="email" name="email" class="form-control buttom"  placeholder="Email">

再修正后端POST路由里的拼写错误：

app.post("/", function(req , res){
    var firstName = req.body.firstName; // 补全漏写的t，修正拼写
    var lastName = req.body.lastName;
    var email = req.body.email;
    console.log(firstName, lastName , email );
    res.send("提交成功");
})