6

node.jsとexpress（2.5.9）をexpress-formで使用します。

フォームフィールドに送信された値を再入力するにはどうすればよいですか？

とルートがgetあります。postフォームの投稿時に検証エラーが発生した場合、ユーザーをgetにリダイレクトします。問題は、再入力されたローカルが表示されないことです（autoLocals：trueがあるので、リダイレクトしているためだと思いますres。リセットします。）

では、どのように再作成し、アプリケーションフローはどのようになりますか？res.send代わりにres.redirect、すべてを再設定しますか？それは繰り返しのようです。

これが私の投稿ルートの例です：

app.post(

  '/projects/:id'

  , form(field("title").required("title", "Title is required)
  , function (req, res){

  if (!req.form.isValid){
    res.redirect('/project/'+req.params.id+'/edit');
  }
  else{
    // save to db
  }

});
4

3 に答える 3

7

私はexpressjs4.0を使用して、検証後にフォームフィールドを再入力しています:

router.route('/posts/new')
 .get(function(req, res) {
 res.render('posts/new', new Post({}));
});

以下の res.render の 2 番目の引数は、ビューにいくつかの変数を設定します。

res.render('posts/new', new Post({}));

私の見解では、フォーム フィールドを次のように設定します。

...
<input type="text" name="title" value="<%- post.title %>">
<textarea name="article"><%- post.article %></textarea>
...

このフォームを送信すると、次のようにルーターによってキャッチされます。

router.route('/posts')
  .post(function(req, res) {
    var post = new Post(req.body)
      post.save(function(err) {
       if (err) {
         res.locals.errors = err.errors;
         res.locals.post = post;
         return res.render('posts/new');
       }
      return res.redirect('/posts');
  });
  ...
})

このコード行は、ビューのフォーム フィールドをリセットします

res.locals.post = post;

誰かがこれが役立つことを願っています;）

于 2015-01-16T16:35:45.100 に答える
2

ベストプラクティスかどうかはわかりませんが、検証に失敗した場合はリダイレクトせず、ビューを再レンダリングするだけです（多くの場合、「get」コールバックに制御を渡します）。このような何か：

function loadProject(req,res, id){ /* fetch or create logic, storing as req.model or req.project */} 

function editProject(req,res){ /* render logic */ }

function saveProject(req,res){ 
    if(!req.form.isValid){ 
        editProject(req,res);
    }else{
        saveToDb(req.project);
        res.redirect('/project'+req.project.id+'/edit');
    }
}

app.param('id', loadProject);
app.get('/projects/:id/edit', editProject);
app.post('/projects/:id', saveProject);
于 2012-05-22T17:05:53.777 に答える
1

最近、同様の問題に取り組む必要があり、validator と flashify の 2 つのノード モジュールを使用しました。

フォーム ビューで、フォーム フィールドを次のように構成しました。

div.control-group
        label.control-label Description
        div.controls
          textarea(name='eventForm[desc]', id='desc', rows='3').input-xxlarge= eventForm.desc

      div.control-group
        label.control-label Tag
        div.controls
          select(id='tag', name='eventForm[tag]')
            tags = ['Medjugorje', 'Kibeho', 'Lourdes', 'Fatima']
            for tag in tags
              option(selected=eventForm.tag == tag)= tag

フォーム フィールドの命名規則に注意してください。次に、構成ファイルで 1 つのグローバル変数を設定します。これは、フォームが最初に読み込まれたときの単なるプレースホルダーです。

//locals
app.locals.eventForm = []; // placeholder for event form repopulation

検証ロジックは私のルーター ファイルにあり、次のようになります。

 app.post('/posts', function(req, res){
    var formData = req.body.eventForm;
    var Post = models.events;
    var post = new Post();

    post.text          = formData.desc;
    post.tag           = formData.tag;

    // run validations before saving
    var v = new Validator();
    var isPostValid = true;

    // custom error catcher for validator, which uses flashify
    v.error = function(msg) {
     res.flash('error', msg);
     isPostValid = false;
    }

    v.check(post.text, "Description field cannot be empty").notEmpty();
    v.check(post.tag, "Tag field cannot be empty").notEmpty();

次に、エラーがあるかどうかを確認し、エラーがある場合は、フォーム データをビューに戻します。

  // reject it
  res.render('Event.jade', {page: req.session.page, eventForm: formData});

この eventForm データがビューに戻され、デフォルト値が再入力されることに注意してください。

最後のステップは、flashify コンポーネントをフォーム ビューに含めることです。

div(style='margin-top: 60px').container-fluid
      include flashify

flashify ビューのコードは次のようになります。

if (flash.error != undefined)
div.container
    div.alert.alert-error
        b Oops!
        button(type='button', data-dismiss='alert').close &times;
        ul
            each error in flash.error
                li= error
if (flash.success != undefined)
div.container
    div.alert.alert-success
        b Success!
        button(type='button', data-dismiss='alert').close &times;
        ul
            each success in flash.success
                li= success
于 2013-03-27T21:50:28.940 に答える