Express+jQuery validateプラグインによる非同期フォーム検証

先日、Express+MongoDBを使って複数のブログを作っていたので、簡単なブログを覚えていました.原文の登録ページはsubmitをクリックしてサーバーにデータを提出して行いました.この方法は友好的ではないので、次の図のように非同期検証のページを作成しました.
まず、jQuery validateについて説明します.
jQuery validate
ドキュメントは、jQuery ValidateまたはjQuery Validateの公式サイトを参照してください.
デフォルトの検証ルール:
したがって、検証ルールに基づいて、入力が必要であること、最短入力長さ、最長入力長さ、2回のパスワード入力が等しいかどうかなどを簡単に知ることができます.以下に示します.

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