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

不幸的是,您必须手动重新填充表单.如果您收到任何页面错误,则会将表单值传回给视图.

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

Answer 2

你正在使用一种简单的方法

app.use(express.bodyParser()) and app.use(expressValidator());

你可以使用req.body

res.render('register.html', { 
         pageErrors: pageErrors,
         validated: req.body
   });

而且我不确定你使用的是哪种模板语言但是你可以做类似的事情......

<input type="text" name="userName" value="<%= pageErrors.userName.value || validated.userName %>" />

然后,如果需要,则返回良好输入,如果需要更正则返回错误输入.