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

问题描述

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

根据 express-validator 文档，我将验证结果中的错误作为错误对象数组发送到 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>

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

解决方法

是的，你必须这样做。但是，您可以在 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>

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