Node.js,Express和Jade - Forms

Cra*_*les 5 validation node.js express pug

我正在使用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
Run Code Online (Sandbox Code Playgroud)

然后我使用模块'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
        });
    }
 });
Run Code Online (Sandbox Code Playgroud)

因此,我的页面有三种渲染方式,每种方案都可以访问不同的局部变量:

  1. 第一次加载页面时(errors = undefined,success = undefined)
  2. 提交表单时出现错误(errors = array,success = undefined)
  3. 提交表单时没有错误(errors = undefined,success = true)

所以我的主要问题是:

  1. 加载我的Jade页面时,当我尝试访问不存在的变量时,似乎会抛出错误.例如,我想看看是否设置了变量'success',如果是,我想隐藏表单并显示"thanks"消息.有没有一种简单的方法来处理Jade中的变量,它将是未定义的还是值?
  2. 当表单已提交并且存在验证错误时,我想显示错误消息(这不是问题),而且还使用先前提交的变量填充表单(例如,如果用户提供了名称但没有发送电子邮件,错误应该引用空白电子邮件,但表单应保留其名称).此时显示错误消息但我的表单已重置.有没有一种简单的方法可以将字段的输入值设置为后期数据中的值?

Pic*_*els 1

  1. 您可以通过使用 locals.variable 而不仅仅是变量来解决这个问题。你也可以在jade中使用javascript。

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

  2. 我用了两种方法来解决这个问题。第一个是重新渲染视图,并将 req.body 作为本地传递。我有一个约定,我的表单使用 form_model.value 作为其字段值。这种方法对于简单的表单来说效果很好,但是当表单依赖于数据时,它就会开始有点崩溃。

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