最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

Express js中带有Flash消息的表单验证

网站源码admin14浏览0评论

Express js中带有Flash消息的表单验证

Express js中带有Flash消息的表单验证

我正在尝试在Express js中验证表单,然后再将其发布到我用作后端的mongodb上。我的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中实现。请为我提供验证代码,如果至少一个字段为空,则还显示Flash消息,以便我可以至少有一个开始。

提前谢谢您

回答如下:

https://express-validator.github.io/docs/check-api.html

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');
   <Your Code Here>
})

我假设您正在使用connect-flash

附加说明:您可能想创建中间件来处理验证,以使代码更整洁。

发布评论

评论列表(0)

  1. 暂无评论