Jquery驗證插件 JqueryValidation 動態驗證用戶名等

能夠參考：http://www.w3cschool.cc/jquery/jquery-plugin-validate.html

    //form1 驗證用戶名

    $("#form1").validate({
        focusCleanup: false,
        focusInvalid: false,
        errorElement: "span",
        errorClass: "sss",
        errorPlacement: function (error, element) {
            error.appendTo(element.next());
        },
        rules: {
            TextUserName: {
                required: true,
                isCharlength6_12: true,
                jszxolUserName: true,
                remote: {
                    url: "../mobileApi.asmx/isExistsUserName",

                    type: "post",

                    dataType: "json",

    async: false,//若是這裏文本框填寫完後直接快速點擊按鈕驗證是否用戶存在的話，此處最好寫同步進行.

                    data: { user_name: function () { return $("#TextUserName").val(); } }

                }
            }
        }, //rules
        messages: {
            TextUserName: {
                required: "請輸入用戶名",
                isCharlength6_12: "用戶名爲6-12位字符",
                jszxolUserName: "以字母開頭，長度在6-12之間",
                remote: "用戶名已存在"
            }
        }//messages

    });

    //form2 驗證手機號
    $("#form2").validate({
        focusCleanup: false,
        focusInvalid: false,
        errorElement: "span",
        errorClass: "sss",
        errorPlacement: function (error, element) {
            error.appendTo(element.next());
        },
        rules: {
            TextUserPhone: {
                required: true,
                isMobile: true,
                remote: {
                    url: "../mobileApi.asmx/isExistsPhone",
                    type: "post",
                    dataType: "json",
                    data: { mobile_number: function () { return $("#TextUserPhone").val(); } }
                }
            }
        }, //rules
        messages: {
            TextUserPhone: {
                required: "請輸入手機號碼",
                isMobile: "手機號碼不符合規範",
                remote: "手機號碼已存在"
            }
        }//messages
    });