Question

我刚开始使用一个新的nodejs应用程序，它将包含大量用于创建和编辑/更新数据库值的表单。我的问题是：如果给定数据无效，我如何重新填充表单条目？

示例：有人试图登录。如果凭据错误，我将使用类似以下内容的内容再次显示登录页面：

res.render('sessions/new')

事实是，用户名没有填充请求数据。我想知道如何实现这一目标既简单又干净。由于rails中没有form_for，我想我必须手动实现，对吧？我的第一种方法是将请求body / params作为本地人绕过render函数，并在我的jade模板中设置值，如下所示：

// In controller/route
res.render('sessions/new', req.body)

// In template
input(type='text', name='username', value=locals.username)

是否有更好或更不引人注目的解决方案？我的意思是上面的例子很有效，很容易实现，只是想知道我是否错过了什么。这对于将错误类添加到无效表单字段等内容也很有趣。无法在网上找到任何东西。

提前致谢！

Answer 1

我使用connect-flash中间件。通常，此模块用于提供信息性消息（成功，错误等），但它也适用于跨请求保留表单数据。

表格数据发布时：

router.post('/create-user', function(res, req, next) {
  // Do stuff
  if (invalid) {
    req.flash('form', req.body);
    res.redirect('/create-user');
  }
});

然后在GET方面：

router.get('/create-user', function(res, req, next) {
  // Render the template with form data
  res.render('my_template', {
    form: req.flash('form')[0] || null
  });
});

然后在my_template.hbs（我使用Handlebars）：

<form>
  <input type="email" name="email" value="{{form.email}}">
  <input type="name" name="name" value="{{form.name}}">
  ...
</form>

希望有所帮助。

Answer 2

我在客户端用jQuery做。

我使用express-validator生成错误映射，其中包含字段名称，原始值和错误消息。

然后我只在页面底部的布局模板上打印内部脚本标签，然后在jQuery中检查它是否为空并循环遍历错误堆栈。将字段标记为错误并显示原始值和错误消息。

这是express-validator代码：

路线：

  req.assert('username', 'Enter username').notEmpty();
  req.assert('password', 'Enter password').notEmpty();
  res.locals.errors = req.validationErrors(true);
  res.render('/login');

视图：

<p>
 <label>Username</label>
 <input name="username" />
</p>

<script>var errors = <%= errors %>;</script>

客户端javascript（jQuery）：

    for ( var e in errors ) {
        var $field = $('[name='+e+']'),
        $el = $field.parents('p');

        $el.addClass('err');
        $el.append('<span class="msg">'+errors[e].msg+'</span>');
    }

另一种方法是在视图中执行一堆if / else和echo语句，这些语句可能会变得非常丑陋，真正快速。

在express / connect中重新填充表单值

2 个答案: