JQuery插件开发，远程验证插件

原帖地址：http://www.cnblogs.com/egojit/archive/2013/06/05/3118680.html

合肥程序员群：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所有，转载请标明出处。

 

本文链接