如何使用快速表单validation错误后重新填充表单字段？

使用node.js和express表单（2.5.9）。

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

我有一个get和一个post路线。 如果表单发布时有validation错误，我将用户redirect到get，问题是重新填充的locals不显示（我有autoLocals：true，所以我认为这是因为我正在redirect和res被重置。）

那么你们如何重新填充你的应用程序stream程，你是否res.send而不是res.redirect并重新设置整个事情呢？ 这似乎是重复的。

这里是我的邮政路线的一个例子：

 app.post( '/projects/:id' , form(field("title").required("title", "Title is required) , function (req, res){ if (!req.form.isValid){ res.redirect('/project/'+req.params.id+'/edit'); } else{ // save to db } }); 

Answer 1

不知道是否是最佳做法，但是当我validation失败时，我不redirect我只是重新呈现视图（通常通过传递控制到'get'callback）。 像这样的事情：

 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 2

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

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

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

 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 3

最近我不得不在类似的问题上使用两个节点模块：validator和flashify。

在窗体视图中，我configuration了我的表单字段，如下所示：

 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 

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

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

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

  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 × 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 × ul each success in flash.success li= success