Node+Express中重定向回表单时如何保留非空字段数据？

这个场景太常见了，核心思路就是把用户已经输入的有效数据暂存在Session里，重定向回注册页后再从Session里把数据取出来回显到表单中，最后清理掉Session里的旧数据避免残留。具体分这几步操作：

1. 在验证失败时，将用户提交的表单数据存入Session #

修改你现有的/save路由代码，在保存错误信息的同时，把用户提交的req.body也存到Session中：

router.post('/save', [
  body('name').not().isEmpty().withMessage('name empty'),
  body('surname').not().isEmpty().withMessage('surname empty'),
  body('email').not().isEmpty().withMessage('email empty'),
  body('password').not().isEmpty().withMessage('password empty')
], (req, res)=>{
  let errors = validationResult(req);
  if (!errors.isEmpty()) {
    req.session.msgs = errors.array({ onlyFirstError: true });
    // 新增：把用户提交的表单数据暂存到session
    req.session.formData = req.body;
    return res.redirect('/signup');
  }
  // 表单验证成功后，清空session里的旧数据（避免残留）
  req.session.formData = null;
  req.session.msgs = null;
  // save form data......
});

2. 在渲染注册页的路由中，传递Session里的表单数据给模板 #

假设你渲染/signup页面的路由是这样的，需要把formData从Session里取出并传给模板引擎：

router.get('/signup', (req, res) => {
  // 从session取表单数据，没有的话设为空对象
  const formData = req.session.formData || {};
  // 取出错误提示信息
  const msgs = req.session.msgs || [];
  
  // 清空session里的旧数据，防止刷新页面还显示之前的内容
  req.session.formData = null;
  req.session.msgs = null;
  
  // 把数据传给模板（这里以ejs为例，其他模板引擎逻辑类似）
  res.render('signup', { formData, msgs });
});

3. 在注册页HTML模板中，回显表单数据 #

给每个表单字段的value属性设置对应的值，这样重定向回来后，已填写的内容就会自动保留：

<form action="/save" method="POST">
  <div>
    <label>Name:</label>
    <!-- 回显name字段，无数据则显示空字符串 -->
    <input type="text" name="name" value="<%= formData.name || '' %>">
    <!-- 显示对应错误提示 -->
    <% msgs.forEach(msg => { if(msg.param === 'name') { %>
      <span class="error"><%= msg.msg %></span>
    <% }}) %>
  </div>
  
  <div>
    <label>Surname:</label>
    <input type="text" name="surname" value="<%= formData.surname || '' %>">
    <% msgs.forEach(msg => { if(msg.param === 'surname') { %>
      <span class="error"><%= msg.msg %></span>
    <% }}) %>
  </div>
  
  <div>
    <label>Email:</label>
    <input type="email" name="email" value="<%= formData.email || '' %>">
    <% msgs.forEach(msg => { if(msg.param === 'email') { %>
      <span class="error"><%= msg.msg %></span>
    <% }}) %>
  </div>
  
  <div>
    <label>Password:</label>
    <!-- 密码是敏感信息，不建议回显，保持为空即可 -->
    <input type="password" name="password">
    <% msgs.forEach(msg => { if(msg.param === 'password') { %>
      <span class="error"><%= msg.msg %></span>
    <% }}) %>
  </div>
  
  <button type="submit">Sign Up</button>
</form>

额外注意点 #

• 确保你的Express应用已经正确配置了Session中间件（比如express-session），不然req.session会是undefined，无法存储数据。
• 表单成功提交后一定要清空Session里的formData和msgs，避免用户后续访问注册页还看到旧的表单内容或错误提示。

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