Question

使用node.js并使用express-form表达（2.5.9）。

我应该如何使用提交的值重新填充表单字段？

我有get和post路线。如果在发布表单时存在验证错误，我将用户重定向回到get，问题是重新填充的本地人没有显示（我确实有autoLocals：true，所以我认为这是因为我重定向和{ {1}}已重置。）

那么你们如何重新填充以及你的申请流程是什么，你是res而不是res.send并再次设置整个事情？这似乎是重复的。

以下是我的邮寄路线示例：

res.redirect

Answer 1

我正在使用expressjs4.0在验证后重新填充表单字段：

router.route('/posts/new')
 .get(function(req, res) {
 res.render('posts/new', new Post({}));
});

下面res.render中的第二个参数将在视图中设置一些变量。

res.render('posts/new', new Post({}));

在我看来，我按照以下方式设置表单字段：

...
<input type="text" name="title" value="<%- post.title %>">
<textarea name="article"><%- post.article %></textarea>
...

当您提交此表单时，它应该被路由器捕获，如下所示：

router.route('/posts')
  .post(function(req, res) {
    var post = new Post(req.body)
      post.save(function(err) {
       if (err) {
         res.locals.errors = err.errors;
         res.locals.post = post;
         return res.render('posts/new');
       }
      return res.redirect('/posts');
  });
  ...
})

这行代码会重置视图中的表单字段

res.locals.post = post;

我希望有人觉得这很有用;）

Answer 2

不确定这是否是最佳做法，但是当我有验证失败时，我不重定向我只是重新渲染视图（通常通过将控制传递给'get'回调）。有点像这样：

function loadProject(req,res, id){ /* fetch or create logic, storing as req.model or req.project */} 

function editProject(req,res){ /* render logic */ }

function saveProject(req,res){ 
    if(!req.form.isValid){ 
        editProject(req,res);
    }else{
        saveToDb(req.project);
        res.redirect('/project'+req.project.id+'/edit');
    }
}

app.param('id', loadProject);
app.get('/projects/:id/edit', editProject);
app.post('/projects/:id', saveProject);

Answer 3

我最近不得不处理类似的问题并使用了两个节点模块：validator和flashify。

在表单视图中，我按如下方式配置了表单字段：

div.control-group
        label.control-label Description
        div.controls
          textarea(name='eventForm[desc]', id='desc', rows='3').input-xxlarge= eventForm.desc

      div.control-group
        label.control-label Tag
        div.controls
          select(id='tag', name='eventForm[tag]')
            tags = ['Medjugorje', 'Kibeho', 'Lourdes', 'Fatima']
            for tag in tags
              option(selected=eventForm.tag == tag)= tag

请注意表单字段的命名约定。然后在我的配置文件中，我设置了一个全局变量，它实际上只是表单首次加载时的占位符：

//locals
app.locals.eventForm = []; // placeholder for event form repopulation

验证逻辑在我的路由器文件中，如下所示：

 app.post('/posts', function(req, res){
    var formData = req.body.eventForm;
    var Post = models.events;
    var post = new Post();

    post.text          = formData.desc;
    post.tag           = formData.tag;

    // run validations before saving
    var v = new Validator();
    var isPostValid = true;

    // custom error catcher for validator, which uses flashify
    v.error = function(msg) {
     res.flash('error', msg);
     isPostValid = false;
    }

    v.check(post.text, "Description field cannot be empty").notEmpty();
    v.check(post.tag, "Tag field cannot be empty").notEmpty();

然后我检查是否有错误，如果是，则将表单数据传递回视图：

  // reject it
  res.render('Event.jade', {page: req.session.page, eventForm: formData});

请注意，这个evenForm数据会传回视图，从而重新填充默认值。

最后一步是在表单视图中包含flashify组件。

div(style='margin-top: 60px').container-fluid
      include flashify

flashify视图的代码如下所示：

if (flash.error != undefined)
div.container
    div.alert.alert-error
        b Oops!
        button(type='button', data-dismiss='alert').close &times;
        ul
            each error in flash.error
                li= error
if (flash.success != undefined)
div.container
    div.alert.alert-success
        b Success!
        button(type='button', data-dismiss='alert').close &times;
        ul
            each success in flash.success
                li= success

如何使用快递形式在验证错误后重新填充表单字段？

3 个答案: