0

データベース値を作成および編集/更新するための大量のフォームが含まれる新しい nodejs アプリを開始しました。私の質問は次のとおりです。指定されたデータが無効な場合、フォームエントリを再入力するにはどうすればよいですか?

例: 誰かがログインを試みます。資格情報が間違っている場合は、次のようなものを使用してログイン ページを再度表示します。

res.render('sessions/new')

つまり、ユーザー名には要求データが入力されていません。これを簡単かつきれいに達成する方法を考えていました。レールには似たようなものがないのでform_for、手動で実装する必要があると思いますよね? 私の最初のアプローチは、リクエストの本文/パラメーターをローカルとして関数にバイパスし、次のrenderように jade テンプレート内で値を設定することでした。

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

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

より良い、または目立たない解決策はありますか? 上記の例が機能し、実装が非常に簡単であることを意味します。これは、無効なフォーム フィールドにエラー クラスを追加する場合などにも役立ちます。ウェブ上で実際に何かを見つけることができませんでした。

前もって感謝します！

4

2 に答える 2

3

connect-flashミドルウェアを使用しています。通常、このモジュールは情報メッセージ (成功、エラーなど) を対象としていますが、リクエスト間でフォーム データを保持する場合にも適しています。

フォーム データが POST されると、次のようになります。

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（私はハンドルバーを使用します）：

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

それが役立つことを願っています。

于 2015-12-16T11:46:08.217 に答える
1

私はjQueryを使ってクライアント側でそれを行います。

Express-validator を使用してエラー マップを生成します。これには、フィールド名、元の値、およびエラー メッセージが含まれます。

次に、ページの下部にあるレイアウト テンプレートのスクリプト タグ内にそれを印刷し、jQuery で空かどうかを確認し、エラー スタックをループします。フィールドにエラーのタグを付け、元の値とエラー メッセージを表示します。

エクスプレスバリデータコードは次のとおりです。

ルート：

  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 ステートメントを実行することです。

于 2012-10-17T18:41:12.180 に答える