5

私は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
        });
    }
 });

したがって、私のページがレンダリングされるシナリオは3つあり、それぞれが異なるローカル変数にアクセスできます。

  1. ページが初めてロードされたとき（errors = undefined、success = undefined）
  2. フォームが送信され、エラーが発生した場合（errors = array、success = undefined）
  3. フォームが送信され、エラーがない場合（errors = undefined、success = true）

だから私の主な問題はそれです：

  1. Jadeページが読み込まれると、存在しない変数にアクセスしようとするとエラーがスローされるようです。たとえば、変数「success」が設定されているかどうかを確認し、設定されている場合は、フォームを非表示にして「ありがとう」メッセージを表示したいとします。未定義または値のいずれかになるJadeの変数を処理する簡単な方法はありますか？
  2. フォームが送信され、検証エラーが発生した場合、エラーメッセージを表示したいのですが（これは問題ではありません）、以前に送信された変数をフォームに入力します（たとえば、ユーザーが名前を入力したがメールアドレスを入力しなかった場合）。 、エラーは空白の電子メールを参照する必要がありますが、フォームはその名前を保持する必要があります）。現在、エラーメッセージが表示されていますが、フォームがリセットされています。フィールドの入力値を投稿データの値に設定する簡単な方法はありますか？
4

2 に答える 2

1

  1. 変数だけでなくlocals.variableを使用することでこれを修正できます。また、jadeでjavascriptを使用することもできます。

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

  2. 私はこの問題を解決するために2つの方法を使用しました。1つ目は、ビューを再レンダリングし、req.bodyをローカルとして渡すことです。フォームのフィールド値にform_model.valueを使用するという規則があります。この方法は単純なフォームには適していますが、フォームがデータに依存している場合は少し壊れ始めます。

    2番目の方法は、req.bodyをセッションに渡してから、フォームをレンダリングするルートにリダイレクトすることです。そのルートで特定のセッション変数を探し、それらの値をフォームで使用します。

于 2012-08-10T16:58:46.817 に答える
0

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
于 2020-01-25T07:02:37.340 に答える