JQuery插件開發，遠程驗證插件

合肥程序員群：49313181。    合肥實名程序員群：128131462 (不願透露姓名和信息者勿加入)
Q  Q:408365330     E-Mail:[e-mail]

在做一個自己的項目的時候遇到需要和數據庫交互驗證用戶名是否存在，這種驗證一般都是通過Ajax去驗證。在此之前我都是用別人寫的JQuery插件。但是這次我決定自己寫這樣一個JQuery插件。JQuery.EgojitForm。

作為js是一種腳本語言在網絡中去用，當然是越短小精悍越好。上代碼：

/********************
*作者：egojit
*version:0.1
*時間：2013-6-5
***********************************/
//
; (function () {

    $.fn.remote = function (options) {
        var defaults = {
            urls: new Array(),
            type: 'POST',
            datas: new Array(),
            msg: ""
        };

        var opts = $.extend({}, $.fn.remote.defaults, defaults, options);
        this.each(function (index, element) {
            var $this = $(this);
            $.ajax({
                type: opts.type,
                url: opts.urls[index],
                data: opts.datas[index],
                success: function (msg) {

                    getHtml(element, opts.msg);

                }
            });
        });
    };

    //組織HTML提示
    function getHtml(hobject, msg) {
        debugger;
        alert(hobject);
        $(hobject).after("<span class='Error'>" + msg + "</span>");
    }

})(jQuery);

是不是區區幾行代碼，就實現了一個功能還算可以的遠程驗證。

首先在最外層有這樣的代碼：

;(function(){  } )(JQuery);

這個對於js初學者不好理解。但是細細品味也不是那么難以理解。這個被稱為函數閉包。;(function(){ } )(JQuery);在本質上就是執行了一個立即執行的js函數。這個和  ;intParse(); 本質上是一樣的。函數立即執行了，那么我們寫的插件馬上被注冊到環境中去。另一方面我在閉包函數中定義更多的函數而不攪亂命名空間也不暴露實現。看上面組織HTML的getHtml()函數就是在閉包中定義的一個函數，不會被暴露到外面起到一種保護的作用。

然后我們再分析閉包中的這段代碼：

$.fn.remote = function (options) {
        var defaults = {
            urls: new Array(),
            type: 'POST',
            datas: new Array(),
            msg: ""
        };

        var opts = $.extend({}, $.fn.remote.defaults, defaults, options);
        this.each(function (index, element) {
            var $this = $(this);
            $.ajax({
                type: opts.type,
                url: opts.urls[index],
                data: opts.datas[index],
                success: function (msg) {

                    getHtml(element, opts.msg);

                }
            });
        });
    };

$.fn.remote就是為jquery對象添加了一個對象，我們可以這樣去用$("#id").remote(參數對象)。這里的options參數為我們提供了更多的控制。
這行代碼比較關鍵var opts = $.extend({}, $.fn.remote.defaults, defaults, options);這行代碼將后面三個參數的對象合並到一個對象中去並且付給了opts。這樣我們在后面可以自由的去用這個對象了。
urls我設定是一個數組這樣我們可以同時對多個form元素進行遠程驗證。只要我們傳遞數組就行了。這樣很容易理解的一個JQuery插件就完成了。
下面我開始使用這個插件，首先引用

<link href="scripts/Jquery.EgojitForm/css/JQuery.EgojitForm.css" rel="stylesheet" />
<script src="scripts/Jquery.EgojitForm/JQuery.EgojitForm.js"></script>

然后我為注冊按鈕事件添加了代碼：

    <script type="text/javascript">
        /*切換驗證碼*/
        function ToggleCode(obj, codeurl) {
            $(obj).children("img").eq(0).attr("src", codeurl + "?time=" + Math.random());
            return false;
        }

        $(document).ready(function () {
            $("#btnSubmit").click(function () {
                debugger;

                $("#J_username").remote({ urls: ["/tools/submit_ajax.ashx?action=validate_username"], datas: [$("#J_username").val()], msg: "用戶名已經存在！" });

                var form = $("#register_form").formSerialize();
                $.ajax({
                    url: "/tools/submit_ajax.ashx?action=user_register",
                    type: "POST",
                    data: form,
                    success: function () {
                        alert();
                    }
                });
            });
        });
    </script>

  $("#J_username").remote({ urls: ["/tools/submit_ajax.ashx?action=validate_username"], datas: [$("#J_username").val()], msg: "用戶名已經存在！" });這個就是應用插件。
urls中放的就是一個遠程驗證代碼的一般處理程序的路徑。點擊按鈕后就會以Ajax的方式到遠程數據庫中去驗證，用戶用是否存在。這里我只驗證了用戶名。點擊按鈕運行結果如圖：

寫這樣一個JQuery是不是很簡單？？？這樣我們可以利用JQuery寫自己美妙的插件了。

版權：歸博客園和Egojit所有，轉載請標明出處。