在引导的 ejs 表单上显示服务器端验证错误消息

Question

如果用户在引导表单字段中输入的 URL 字符串不是有效的 URL，我会尝试有条件地显示错误消息。

根据 express-validator 文档，我从 validationResult 将错误作为错误对象数组发送到 EJS 模板。我还验证了其他表单字段，因此数组中可能存在多个错误。

app.post('/create', [
  body('imgURL').isURL()
    .withMessage(‘Must be valid URL’)
], (req, res) => {
  const errors = validationResult(req);
  if (!errors.isEmpty()) {
    return res.render(‘form’, { errors: errors.array() });
  }
})

在我的 EJS 模板中，我使用标准引导客户端验证，但也希望能够显示服务器错误。如何有条件地使用服务器消息呈现无效反馈 div。还要切换输入元素类“is-invalid”吗？

由于错误可能是一个数组，我是否必须遍历数组并检查错误对象参数字段（即 error.param === ‘imgURL’）？我是否必须为每个表单字段重复此循环？

<div>
 <label for="imgURL">Image URL</label>
 <input type="text" class="form-control is-invalid" id="imgURL" required>
  <div class="invalid-feedback">  
    Message sent from server here.   
  </div>
</div>

或者有更好的方法吗？ 谢谢！

Answer 1

是的，你必须这样做。但不是在模板文件中循环，您可以在controller 文件（js 文件）中进行。

创建一个函数，该函数将通过输入id检查输入是否有效，然后将函数传递给模板文件。

  const getInputError = (inputName) => {
    return errors.array().find(i => i.param === inputName || i.body === inputName);
  }
  res.render('form', { getInputError });

在模板文件中，调用函数并查看结果：

  <div>
    <label for="imgURL">Image URL</label>
    <% const imgURLError = getInputError('imgURL'); %>
      <input type="text" class="form-control <%= imgURLError ? 'is-invalid' : '' %>" id="imgURL" required>
      <% if (imgURLError) { %> 
      <div class="invalid-feedback">
        <%= imgURLError.msg %> 
      </div>
      <% } %>
  </div>

您已经对另一个输入字段执行相同操作。