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