Node.js，Express和Jade-表单

Question

我正在使用Node.js，Express和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. 第一次加载页面时（错误=未定义，成功=未定义）
2. 提交表单时出现错误（错误=数组，成功=未定义）
3. 提交表单时没有错误（错误=未定义，成功= true）

所以我的主要问题是：

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

Answer 1

1. 您可以通过使用locals.variable而不是variables来解决此问题。您也可以在翡翠中使用JavaScript。

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

2. 我使用两种方法来解决此问题。第一个是重新渲染视图，然后将req.body作为本地传递。我有一个约定，我的表单将form_model.value用作其字段值。此方法适用于简单表单，但是当表单依赖数据时，它会开始崩溃。

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

Answer 2

在您的玉文件中添加错误消息，然后运行您的代码。只需使用以下代码更新您的玉器代码：

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