如何在Express.js中分离错误并在对应输入框下方显示

这个需求非常实用，能让用户一眼就知道哪个字段出了问题。咱们只需要把原来的错误数组改成键值对形式的错误对象，然后在模板里对应字段位置精准渲染即可，具体步骤如下：

1. 修改后端错误存储逻辑 #

把原来的errorMessages数组换成一个对象，用字段名作为键、错误信息作为值，这样就能和每个输入框一一对应：

router.post("/registration",(req,res)=>{
  // 改成对象存储，键对应表单字段名
  const errors = {};
  // 保留用户输入的字段值，用于回显（避免用户重新填写）
  const form = {
    nameholder: req.body.yourName,
    emailholder: req.body.email
  };

  // 姓名空值验证：给对应字段的错误属性赋值
  if(!req.body.yourName) {
    errors.name = "You must enter your name";
  }
  // 邮箱空值验证
  if(!req.body.email) {
    errors.email = "You must enter an email.";
  }

  // 检查是否有错误：如果有，返回注册页面并传递错误和用户输入
  if(Object.keys(errors).length > 0) {
    return res.render('你的注册页面模板名', { errors, form });
  }

  // 没有错误的话，继续执行注册逻辑（比如存数据库、跳转首页等）...
});

2. 在模板中对应位置渲染错误 #

删掉原来的集中展示循环，换成在每个输入框下方判断对应字段的错误是否存在，存在则显示：

<!-- 姓名输入框区域 -->
<div class="form-item">
  <label>Your Name</label>
  <input type="text" name="yourName" value="{{form.nameholder}}">
  <!-- 只渲染姓名字段的错误 -->
  {{#if errors.name}}
    <div class="error-text">{{errors.name}}</div>
  {{/if}}
</div>

<!-- 邮箱输入框区域 -->
<div class="form-item">
  <label>Email</label>
  <input type="email" name="email" value="{{form.emailholder}}">
  <!-- 只渲染邮箱字段的错误 -->
  {{#if errors.email}}
    <div class="error-text">{{errors.email}}</div>
  {{/if}}
</div>

额外优化小细节 #

• 我保留了form对象传递给模板，这样用户输入错误后，已经填写的内容不会丢失，体验更友好；
• 用!req.body.yourName代替判断空字符串，能覆盖空字符串、undefined等多种空值情况，验证更严谨；
• 可以给错误信息加个CSS类（比如.error-text），设置红色字体、小字号样式，让错误提示更醒目。

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