Node.js (Express) 表单在提交时清除

Question

我正在使用 Node.js(使用 Express)编写一个非常基本的注册表单，并且我正在尝试找到提供基本表单验证的最简单方法。我选择了“Express-Validator”，这似乎做得很好。但是，我的目标是简单地显示任何需要的验证消息，并保留用户输入的值。

似乎请求信息没有回到 res.render 中，我想这是有道理的。但是，我到处寻找我能想到的地方，但找不到任何讨论如何在显示错误消息后保持表单字段填充的引用。

以下是描述我的方法的小片段:

post: function(req, res){

            var userName = req.body.username;
            var password = req.body.password;

            //Validate input
            req.assert("username", 'Invalid email address.').isEmail();
            req.assert("password", 'Password cannot be empty.').notEmpty();
            req.assert("passwordConfirm", 'Passwords entered do not match!').equals(password);

            //Make sure we have no validation errors
            var pageErrors = req.validationErrors();
            if(!pageErrors)
            {
                userModel.CreateUser(userName, password, function(err){
                    if(err)
                    {
                        //there was a problem inserting new user... probably already exists
                        //will need to check the error to confirm
                        var dbErrorMessage = "Could not insert record into database!";
                        if(err.code === 11000)
                        {
                            //this is a duplicate entry
                            dbErrorMessage = "A user with that email address already exists!";
                        }

                        res.render('register.html', { pageErrors: [{msg: dbErrorMessage }]});
                    }
                    else
                    {
                        res.render('register.html', { successMessage: successMessage });
                    }
                });
            }
            else
            {
                res.render('register.html', { pageErrors: pageErrors });
            }

Answer 1

很遗憾，您必须手动重新填充表单。如果您遇到任何页面错误，您会将表单值传递回 View 。

        if(!pageErrors)
        {
            // ...
        }
        else
        {
            res.render('register.html', { 
                pageErrors: pageErrors,
                userName: userName
            });
        }

在您看来，您会做一个简单的检查，看看它们是否有任何错误并相应地重新填充。您必须跟踪每个表单域产生的错误。

<% if (userNameError) { %>
    <input type="text" name="userName" value="<%- userName %>" />
<% } else { %>
    <input type="text" name="userName" />
<% } %>

另一种流行的方式是通过 ajax 将表单发送到服务器，然后进行所有验证。如果有错误，输入的表单数据会保留并显示错误，否则在成功登录后重定向。以下是如何使用 javascript 提交表单的示例。

$("#login-button").live("submit", function (e) {

    // this will prevent the form from being uploaded to the server the conventioanl way
    e.preventDefault();

    // the form data
    var data = $(this).serialize();

    // this logs the user in 
    $.ajax({
        type: 'POST',
        url: BASE_URL + '/login',
        data: data,
        dataType: 'json',
        success: function (data, status) {
            // successful
        },

    });

    // superfluous fallback
    return false; 
});