Express中POST数据为空时向同表单页面传递错误信息的实现求助

1. 确保配置POST请求体解析中间件 #

在你的app.js（或项目主入口文件）中添加以下代码，保证能正确获取表单提交的数据：

app.use(express.urlencoded({ extended: true }));

2. 修改POST路由逻辑 #

替换原来返回空白页的逻辑，改为渲染表单所在页面，同时传递错误提示和用户之前的输入内容：

router.post('/create', function(req, res, next) {
  // 严格验证：排除空字符串和纯空格的情况
  const inputText = req.body.text?.trim() || '';
  if (!inputText) {
    // 渲染表单页面，传入错误信息和用户原始输入
    res.render('index', { 
      title: 'Add Content',
      error: '文本内容不能为空！',
      inputText: req.body.text || ''
    });
  } else {
    contents.push({ text: inputText });
    res.redirect('/');
  }
});

3. 更新Pug模板，添加错误展示和输入回显 #

修改表单模板，增加错误信息的判断展示，并回显用户之前的输入内容，提升交互体验：

extends layout

block content
  form(action="/create", method="POST") 
    h2= title 
    <!-- 显示错误提示 -->
    if error
      .error-message= error
    p 
      | Text :
      input(type="text", name="text", value=inputText || '')
    input(type="submit")

你可以给.error-message添加CSS样式（比如设置文字颜色为红色），让错误提示更醒目。

4. 确保GET路由传递必要变量 #

在展示表单的GET路由中，默认传入空的错误信息和输入值，避免模板渲染报错：

router.get('/', function(req, res, next) {
  res.render('index', { 
    title: 'Add Content',
    error: '',
    inputText: '',
    contents: contents // 用于展示已添加的内容
  });
});

这样处理后，当用户提交空表单（或仅输入空格）时，页面会返回表单页并显示错误提示，同时保留用户之前输入的内容，无需重新填写。

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