Node.js，Express和Jade - 表单

Question

我正在使用Node.js、Express和Jade，并尝试弄清楚如何发布、验证和处理表单数据。

在我的jade文件中，我创建了一个联系表单：

div#contact-area
    form(method='post',action='')
        label(for='name') Name:
        input(type='text',name='name',id='name')        
        label(for='email') Email:
        input(type='text',name='email',id='email')  
        input(type='submit',name='submit',value='Submit').submit-button

我接下来将使用模块“express-validator”来验证表单，代码如下：

var express = require('express')
    ,routes = require('./routes')
    ,http = require('http')
    ,path = require('path')
    ,expressValidator = require('express-validator')
;

var app = express.createServer();

app.configure(function(){
    app.set('views', __dirname + '/views');
    app.set('view engine', 'jade'); //not needed if we provide explicit file extension on template references e.g. res.render('index.jade');
    app.use(express.bodyParser());
    app.use(expressValidator);
    app.use(express.methodOverride());
    app.use(app.router);
});

//display the page for the first time
app.get('/mypage', function(req,res){
    res.render('mypage', { 
        title: 'My Page'        
    });            
});
//handle form submission
app.post('/mypage', function(req,res){
    req.assert('name', 'Please enter a name').notEmpty();
    req.assert('email', 'Please enter a valid email').len(6,64).isEmail();

    var errors = req.validationErrors();
    if( !errors){   
        sendEmail(function(){
            res.render('mypage', { 
                title: 'My Page',
                success: true
            });
        });
    }
    else {
        res.render('mypage', { 
            title: 'My Page',
            errors: errors
        });
    }
 });

因此，在呈现我的页面时有三种情况，每种情况都可以访问不同的本地变量：

1. 当页面首次加载时（errors=undefined，success=undefined）
2. 当表单提交并存在错误时（errors=array，success=undefined）
3. 当表单提交并没有错误时（errors=undefined，success=true）

因此，我的主要问题在于：

1. 当我的Jade页面加载时，似乎在尝试访问不存在的变量时会抛出错误。例如，我想查看变量“success”是否设置，如果是，则希望隐藏表单并显示一个“感谢”消息。是否有一种简单的方式来处理Jade中的变量，可以是未定义的或有值的？
2. 当表单已提交且存在验证错误时，我想显示一个错误消息（这不是问题），但还要使用先前提交的变量填充表单（例如，如果用户提供了名称但没有电子邮件，则错误应引用空白电子邮件，但表单应保留其名称）。目前，错误消息被显示，但我的表单被重置。是否有一种简单的方法来将输入字段的值设置为post数据中的值？

- Craig Myles

Answer 1

1. 您可以通过使用locals.variable而不是variable来解决这个问题。此外，您可以在jade中使用javascript。

   -locals.form_model = locals.form_data || {};

2. 我用了两种方法来解决这个问题。第一种方法是重新渲染视图并将req.body作为本地变量传递。我的惯例是，我的表单使用form_model.value作为它们的字段值。这种方法对于简单的表单效果很好，但当您的表单依赖于数据时，它开始有些失效。

   第二种方法是将req.body传递到会话中，然后重定向到呈现表单的路由。让该路由查找特定的会话变量，并在您的表单中使用这些值。

- Pickels

---

嗨，感谢您的回复。然而，您的代码-var form_model = {} || locals.form_data;不会始终将form_model = {}，因为{}是一个对象（不是未定义），因此永远不会评估locals.form_data。如果我将代码更改为-var form_model = locals.form_data || {}，我仍然会收到错误消息，因为编译器说form_data不存在。我不明白这一点，因为这应该在普通的Javascript中起作用。关于第二点，我已经实现了您通过视图传递数据的想法，在我的情况下，我传递了req.form。 - Craig Myles

哎呀，你说得对，form_model在我的代码中始终为{}。我会更新它的。我也刚刚注意到它实际上应该是locals.form_model。 - Pickels

Answer 2

在你的jade文件中添加错误信息然后运行你的代码。
只需使用以下代码更新你的jade代码即可:

div#contact-area
  ul.errors
        if errors
                each error, i in errors
                    li.alert.alert-danger #{error.msg}
    form(method='post',action='')
        label(for='name') Name:
        input(type='text',name='name',id='name')        
        label(for='email') Email:
        input(type='text',name='email',id='email')  
        input(type='submit',name='submit',value='Submit').submit-button

- Dipak Makvana