Express + jQuery validate 插件实现异步表单验证

前几天跟着使用 Express + MongoDB 搭建多人博客学着用撘了一个简易博客，原文中的注册页面是点击submit后，把数据提交到服务器进行进行的。这种方式很不友好，于是就做了一个异步验证的页面，如下图：

首先来了解一下jQuery validate：

jQuery validate

文档请参见jQuery Validate或者jQuery Validate 官网

默认校验规则：

所以根据校验规则就很容易知道如何验证必须输入，最短输入长度，最长输入长度，两次密码输入是否相等等等，如下所示：

var validator = $("#signupform").validate({
            rules: {
                name: {
                    required: true,  // 必须输入
                    rangelength: [2,10],  // 输入字符串长度在2-10之间
                },
                password: {
                    required: true,
                    minlength: 6  // 输入字符串最短长度为6
                },
                repassword: {
                    required: true,
                    minlength: 6,
                    equalTo: "#password"  // 输入的值必须和#password中的值相等，用于判断两次输入的密码是否相等
                },
            }
        });

除了默认的校验规则以外，jquery validate还提供了默认的提示，有中文版的哦~位于下载包的 dist/localization/messages_zh.js，也可以自己编写提示信息，如下：

var validator = $("#signupform").validate({
            rules: {
            ...
            },
            messages: {
                name: {
                    required: "请输入用户名",
                    rangelength: jQuery.validator.format("请输入长度在 {0} 到 {1} 之间的字符串"),
                    remote: jQuery.validator.format("{0} 已经被使用")
                },
                password: {
                    required: "请输入密码",
                    minlength: jQuery.validator.format("密码至少为 {0} 个字符")
                },
                repassword: {
                    required: "请输入密码",
                    minlength: jQuery.validator.format("密码至少为 {0} 个字符"),
                    equalTo: "两次输入的密码不一样"
                }
            }
        });

其实文档里面讲得很清楚明白啦，上面这些不需要和后端有交互，前端直接验证就可以搞定啦，比较简单。但是用户名name需要和后端交互，通过在后端检测用户名是否存在，然后返回给前端。
jquery validate中提供了remote:URL方法来进行异步验证，使用 ajax 方式进行验证，默认会提交当前验证的值到远程地址，如果需要提交其他的值，可以使用 data 选项。如下：

        rules: {
                name: {
                    remote: {
                        url: "/signup/signupcheck",    // 后台处理程序地址
                        type: "post",                  // 数据发送方式
                        dataType: "json",              // 接受数据格式
                        data: {                        // 要传递的数据
                            name: function() {
                                return $("#name").val();
                            }
                        }
                    }
                 }
               }

另外要注意的是：

The serverside resource is called via jQuery.ajax (XMLHttpRequest) and gets a key/value pair corresponding to the name of the validated element and its value as a GET parameter. The serverside response must be a JSON string that must be "true" for valid elements, and can be "false", undefined, or null for invalid elements, using the default error message. If the serverside response is a string, eg. "That name is already taken, try peter123 instead", this string will be displayed as a custom error message in place of the default.

下面就来看看express中怎么写啦：

Express

//  POST /signup/signupcheck 页面，检查用户名是否已经被注册
router.post('/signupcheck',checkNotLogin, function (req, res, next) {
     var name = req.fields.name;       // 得到传送过来的数据

     UserModel.getUserByName(name)     // UserModel是用户操作数据库的模型，getUserByName 方法是查找name用户
         .then(function (user) {
             if (user) {
                 res.json(false);     // 根据validate的文档知道，返回的数据应该是json格式，且应为true或false
             } else {
                 res.json(true);
             }
         })
         .catch(next);
});

然而不会写后台或者懒得写后台的人，也可以使用jQuery mockjax来模拟Ajax请求哦~使用mockjax的代码大概是这样的：

 $(document).ready(function () {
        $.mockjax({
            url:"users.action",
            response: function (settings) {
                var user = settings.data.name,
                        users = ["phr","asdf","zhangshan"];
                this.responseText = "true";
                if($.inArray(user,users) !== -1) {
                    this.responseText = "false";
                }
            },
            responseTime: 500
        });

        // validate signup form on keyup and submit
        var validator = $("#signupform").validate({
            rules: {
                name: {
                    required: true,
                    rangelength: [2,10],
                    remote: {
                        url: "/signup/signupcheck",
                        type: "post",
                        dataType: "json",
                        data: {
                            name: function() {
                                return $("#name").val();
                            }
                        }
                    }
                }
             },
             messages: {
                 name: {
                    required: "请输入用户名",
                    rangelength: jQuery.validator.format("请输入长度在 {0} 到 {1} 之间的字符串"),
                    remote: jQuery.validator.format("{0} 已经被使用")
                }
             },
             // the errorPlacement has to take the table layout into account
            errorPlacement: function (error, element) {
                error.appendTo(element.next());
            }
          });
       });

最最最后，这个项目的地址是：https://github.com/PuHongru/m...
注册页面的前端代码在：views--signup.ejs
后台检测代码在：routers--signup.js