远程验证JQuery插件开发

在做游戏辅助的时候遇到需要和数据库交互验证用户名是否存在等远程验证"过关"，这种验证码一般都是通过Ajax去验证。在此之前很多人都是用通用写的JQuery插件。以下放出自己写的一个JQuery插件。JQuery.EgojitForm。

作为js是一种脚本语言在网络中去用，当然是越短小精悍越好，这样运行快无延迟可以有效防止自动跳动(换动)验证码。上代码：

/********************
*作者：hkcnw
*version:0.9
*2979342833
***********************************/
//
; (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插件开发

相关文章