验证提交的表单并优雅地显示错误

Question

我正在尝试验证用户提交的表单并显示有意义的错误，但我遇到了很多问题。首先是我的表格(event_form.ejs):

<% if (typeof errors !== 'undefined') { %>
    <div class="message"><%= errors %></div>
<% } %> 

<form method="POST" action="/submit-create-event" id="create-event">
  <input type="text" class="title" name="title" placeholder="title">
  <input type="text" class="date" autocomplete="off" name="date" placeholder="date">
  <select class="type" name="type">
    <option value="road">Road</option>
    <option value="mtb">MTB</option>
  </select>
  <input type="text" class="city" name="city" placeholder="city">
  <select class="level" name="level">
      <option value="beginner">Beginner</option>
      <option value="advanced">Advanced</option>
      <option value="pro">Pro</option>
  </select>
  <input type="text" class="start-time timepicker" autocomplete="off" data-time-format="H:i" name="startTime" placeholder="start time">
  <input type="text" class="start_location" name="startLocation" placeholder="start location">
  <input type="text" class="distance" name="distance" placeholder="distance">
  <input type="submit" class="create-event-submit">
</form>

关于提交，在我的 eventController.js 我有处理提交的功能。

//Helper function to handle event form submit.
module.exports.submitEventForm = function(req, res) {

  const event = new eventModel.event({
    title: req.body.title,
    date: req.body.date,
    type: req.body.type,
    city: req.body.city,
    level: req.body.level,
    start_time: req.body.startTime,
    start_location: req.body.startLocation,
    distance: req.body.distance
  });

  event.save(function(err, data) {
    if (err) {
      console.log(err);
      //I tried this, kinda works but pretty sure a bad practice
      res.render('forms/create_event_form', {errors: err})
    } else {
      res.render('status/success');
    }
  });
};

如您所见，在 event.save() 上，如果我有错误，我现在 console.log() 它们。我尝试做的是再次呈现我的 event creation 表单并显示错误（在我的 .ejs 文件中可见）。很确定不应该那样做。

这是我的 model 文件，其中有一个 validator

var mongoose = require('mongoose')
var validate = require('mongoose-validator')
var Schema = mongoose.Schema;


var titleValidator = [
  validate({
    validator: 'isAlphanumeric',
    message: 'Title should be alphanumeric'
  })
]

var eventSchema = new Schema({
  title: {type: String, required: true, validate: titleValidator},
  date: {type: String },
  type: {type: String },
  city: {type: String },
  level: {type: String },
  start_time: {type: String },
  start_location: {type: String },
  distance: {type: Number },
});

var Event = mongoose.model('Event', eventSchema);

module.exports.eventSchema = eventSchema;
module.exports.event = Event;

我创建了 titleValidator，如果我的表单失败，它会打印出如下内容：

我的问题是：如何正确地将我的 validator 消息发送到模板并显示它？如何处理再次创建多个消息 validators，因为错误不会以 array 方式返回，这意味着我无法遍历它们？

Answer 1

有点找到解决办法了。为了使错误消息更具可读性和可用性，我使用 Mongoose error helper. It prints out all error messages neatly. However, when getting package via npm there is a bug in code and a pull request is created for a solution，但从未合并过。只需手动进行那个小改动。

我找不到另一种方法来呈现相同的错误表单，所以我坚持这样做：

event.save(function(err) {
    if (err) {
      res.render('forms/create_event_form', {errors: errorHelper(err, next)});
    } else {
      res.render('status/success');
    }
  });

在我的 .ejs 模板中，我打印出如下错误：

<% if (typeof errors !== 'undefined') { 
   errors.forEach(function(err) { %>
    <div class="message"><%= err %></div>
<% })} %>

希望这对某人有所帮助，干杯。

验证提交的表单并优雅地显示错误

Validate submitted form and display errors gracefully

ejs

mongoose

express

mongoose-schema