在 express js 中使用 flash 消息进行表单验证

Question

在将表单发布到我用作后端的 mongodb 之前，我正在尝试验证 express js 中的表单。我用于注册页面的 user.js 看起来像这样 -

router.post('/register', (req, res) => {
userreg.register(
// eslint-disable-next-line new-cap
new userreg({
  firstname: req.body.firstname,
  lastname: req.body.lastname,
  username: req.body.email,
  usn: req.body.usn, // validate so that no space is taken or else request modal wont work
  course: req.body.course,
}),
req.body.password,
(err) => {
  if (err) {
    console.log(err);
    res.render('register', { user: 'error' });
  } else {
    console.log('no error');
    res.render('submit-success', { username: req.body.firstname });
  }
}
);
});

我的 register.ejs 看起来像这样 -

<form class="user" action = '/users/register' method="POST">
            <div class="form-group row">
              <div class="col-sm-6 mb-3 mb-sm-0">
                <input type="text" class="form-control form-control-user" id="exampleFirstName" name="firstname" placeholder="First Name">
              </div>
              <div class="col-sm-6">
                <input type="text" class="form-control form-control-user" id="exampleLastName" name="lastname" placeholder="Last Name">
              </div>
            </div>
            <div class="form-group">
              <input type="email" class="form-control form-control-user" id="exampleInputEmail" name="email" placeholder="Email Address">
            </div>
              <div class="form-group">
                <input type="text" class="form-control form-control-user" id="exampleInputUSN" name="usn"  placeholder="USN">
              </div>
              <div class="form-group">
                <select class=" form-control selectpicker" name="course">
                  <optgroup label="Course"></optgroup>
                    <option selected hidden disabled>Course</option>
                    <option value="mca">Computer Applications</option>
                    <option value="mba">Business Administration</option>
                  </optgroup>
                </select>
              </div>
            <div class="form-group">
                <input type="password" class="form-control form-control-user" id="exampleInputPassword" name="password" placeholder="Password">
            </div>
            <div class="text-center">
              <input type="submit" class = "btn btn-primary btn-user" value="Register">
            </div>
          </form>

通过浏览互联网上的许多资源（因为我对表达 js 非常陌生，并且我将它作为我大学项目的一部分，并且因为在锁定期间我无法向任何老师寻求帮助），我知道验证部分必须在 user.js 中实现。请帮助我验证代码并在至少一个字段的字段为空时显示闪存消息，以便我至少可以开始。

提前谢谢你

编辑：

我使用了 express-validator 并最终进行了以下更改 -

var flash = require('connect-flash');
var app = express();

app.configure(function () {
app.use(express.cookieParser('keyboard cat'));
app.use(express.session({ cookie: { maxAge: 60000 } }));
app.use(flash());
});




app.get('/flash', function (req, res) {
// Set a flash message by passing the key, followed by the value, to 
req.flash().
req.flash('info', 'There is an Error!')
res.redirect('/');
});

app.get('/', function (req, res) {
// Get an array of flash messages by passing the key to req.flash()
res.render('index', { messages: req.flash('info') });
});

const { check, validationResult } = require('express-validator');

router.post('/register', [
check('firstname', 'Please enter your first 
name').exists().trim().escape().not().isEmpty(),
check('lastname', 'Please enter your last 
name').exists().trim().not().isEmpty(),
check('username', 'Please enter an 
email').exists().trim().not().isEmpty(),
check('usn', 'Please enter USN').exists().trim().not().isEmpty(),
check('course', 'Please enter Course').exists().trim().not().isEmpty(),
check('password', 'Please enter 
password').exists().trim().not().isEmpty(),

], (req, res) => {
const errors = validationResult(req);
if (!errors.isEmpty()) {
req.flash('message', `${errors}`);
res.redirect('/users/register');
} else {
userreg.register(
  // eslint-disable-next-line new-cap
  new userreg({
    firstname: req.body.firstname,
    lastname: req.body.lastname,
    username: req.body.email,
    usn: req.body.usn, // validate so that no space is taken or else 
    request modal wont work
    course: req.body.course,
    })),


  res.render('submit-success', { username: req.body.firstname });
  }

  }
  );

结果，if (!errors.isEmpty()) 被调用，但没有显示闪现消息。我还缺少其他东西吗？

Answer 1

我假设您使用的是connect-flash。

const { check, validationResult } = require('express-validator');
    
router.post('/register', [
    check('firstname', 'Please enter your first name').exists().trim().escape().not().isEmpty(),
    check('lastname', 'Please enter your last name').exists().trim().not().isEmpty(),
    check('email', 'Please enter an email').exists().trim().not().isEmpty(),
    // ...
], (req, res) => {
    const errors = validationResult(req);
    if (!errors.isEmpty()) {
       req.flash('message', `${errors}`);
       res.redirect('register');
    }
    else {
        // your code here!
    }
});

您可能需要考虑创建中间件来处理验证错误，以使您的代码更简洁。