javascript--自己用的插件

  1 /**  2  * Created by Administrator on 2015/4/2.  3  * 时间：2012-6-6  4  作用：一对form标签下有多个（包括一个）表单需要提交时，提交当前作用域中的表单项做出相应的验证  5  处理问题：一个aspx页面下只能有一个form表单（加了runat='server'）  6  约定：当前body元素下可以有多个form表单：凡是class='form'的元素都视为一个表单元素，此“表单”元素下有相应的表单项  7  其中包含一个含有class='check'的按钮，当点击此按钮的时候会首先验证表单项中含有class='notnull'的表单项，其次验证表单项中含有regex='/^$/'的  8  表单项，如果验证失败，会抛出相应的有好提示nullmsg='不能为空' 或 logicmsg='只能是数字'。  9  每个表单项验证成功之后class='check'的按钮会触发一个名为 $.GlobalCallBack.submitCallback的回调函数。继而完成和后端的交互。 10  11  用法： 12  calss='notnull' 元素不能为空、勾选（复选框） 13  class='select' 必选（下拉框） 14  class='nullmsg'  验证失败之后的友好提示 15  regex='/^$/' 当前需要验证的正则 16  logicmsg='邮箱格式错误' 当前正则验证失败之后的友好提示 17  配置了指定的errorElement（错误提示元素），就会在页面上给出友好提示 18  19  Global.submitCallback button回调函数 20  Global.confirmCallback confirm回调函数; 21  需要改进的地方： 22  无  24  作者：layen.Xu 25  */ 26 ; 27 (function ($) { 28     $.GlobalCallBack = { 29         //用于.check按钮的回调 30         submitCallback: null, 31         //用于.confirm按钮的回调 32         confirmCallback: null 33     }; 34     $.fn.Action = function (options) { 35         var defaults = { 36             body: 'body', 37             formElement: '.form', 38             errorElement: null 39         } 40         var opts = $.extend({}, defaults, options); 41         var Operating = { 42             ///e:当前事件参数 form：当前“表单” _Enter:是否点击了回车键 43             main: function (e, form, _Enter) { 44                 var button = null; 45                 var action = this; 46                 try { 47                     button = e.srcElement == null ? document.activeElement : e.srcElement; 48                 } catch (e) { 49                     console.log(e.message) 50                     button = document.activeElement; 51                 } 52                 if ($(button).is(".check") || _Enter) { 53                     //alert("提交") 54                     var sub = (action.checkform(form) && action.CheckInputRex(form) && action.checkselect(form) && action.checkChecked(form)); 55                     if (sub) { 56                         // Call our callback, but using our own instance as the context 57                         //GlobalCallBack.submitCallback.call(form, [e]); 58                         $.GlobalCallBack.submitCallback.call(form, e); 59                     } else 60                         return sub; 61                 } else if ($(button).is(".confirm")) { 62                     //alert("删除") 63                     var sub = confirm($(button).attr("title")); 64                     if (sub) { 65                         //GlobalCallBack.confirmCallback.call(form, [e]); 66                         $.GlobalCallBack.confirmCallback.call(form, e); 67                     } else 68                         return sub; 69                 } else { 70                     //                    //alert("其它") 71                     return true; 72                 } 73             }, 74             ///检测表单为空项 form当前表单 75             checkform: function (form) { 76                 var b = true; 77                 var action = this; 78                 $(form).find(".notnull").each(function () { 79                     if ($.trim($(this).val()).length <= 0 || $.trim($(this).val()) == $.trim($(this).attr("placeholder"))) {//|| $(this).val() == this.defaultValue 80                         return b = action.tip(this, 'nullmsg'); 81                     } 82                 }); 83                 if (b == true) { 84                     $(form).find(opts.errorElement).text(""); 85                     $(form).find(opts.errorElement).hide(); 86                 } 87                 return b; 88             }, 89             //检测表单中必选的下拉列表 form当前表单 90             checkselect: function (form) { 91                 var b = true; 92                 var action = this; 93                 $(form).find(".select").each(function (i) { 94                     var ck = $(this).find('option:selected').text(); 95                     if (ck.indexOf("选择") > -1) { 96                         return b = action.tip(this, 'nullmsg'); 97                     } 98                 }); 99                 if (b == true) {100                     $(form).find(opts.errorElement).text("");101                     $(form).find(opts.errorElement).hide();102                 }103                 return b;104             },105             //检测表单中必选的复选框 form当前表单106             checkChecked: function (form) {107                 var b = true;　　　　　　　　　　　 var action = this;108                 $(form).find(".checkboxReq").each(function (i) {109                     var ck = $(this)[0].checked;110                     if (!ck) {111                         return b = action.tip(this, 'nullmsg');112                     }113                 });114                 if (b == true) {115                     $(form).find(opts.errorElement).text("");116                     $(form).find(opts.errorElement).hide();117                 }118                 return b;119             },120             //检查是否匹配该正则表达式 value：输入的值 reg：正则 ele：当前项121             GetFlase: function (value, reg, ele) {122                 var action = this;123                 if (reg.test(value)) {124                     return true;125                 }126                 return action.tip(ele, 'logicmsg');127             },128             //检查正则 form当前表单129             CheckInputRex: function (form) {130                 var action = this;131                 var b = true;132                 $(form).find("input[type='text']").each(function () {133                     console.log($(this).attr("regex"))134                     if (typeof ($(this).attr("regex")) == 'string') {135                         if ($.trim($(this).val()).length > 0 && $.trim($(this).val()) != $.trim($(this).attr("placeholder"))) {136                             //当前表单的值137                             var value = $(this).attr("value") || $(this).val();138                             var regx = eval($(this).attr("regex"));139                             return b = action.GetFlase(value, regx, this);140                         }141                     }142                 });143                 return b;144             },145             //提示146             tip: function (ele, attr) {147                 if (opts.errorElement) {148                     $(ele).parents(opts.formElement).find(".error").text($(ele).attr(attr));149                     $(ele).parents(opts.formElement).find(".error").show();150                 } else {151                     alert($(ele).attr(attr));152                 }153                 $(ele).select();154                 $(ele).focus();155                 return false;156             }157         };158         return $(opts.body).find(opts.formElement).each(function () {159             var form = this;160             this.onclick = function (e) {161                 return operating.main(e, form);162             }163             if($(opts.formElement).length==1){164                 document.onkeydown = function (eve) {165                     var e = eve || window.event || arguments.callee.caller.arguments[0];166                     if (e && e.keyCode == 13) {167                         return operating.main(e, form, true);168                     }169                 }170             }171 172         });173     }174 }(jQuery));

HTML代码

 1 <!DOCTYPE html> 2 <html> 3 <head> 4     <meta charset="UTF-8"> 5     <title></title> 6     <script type="text/Javascript" src="http://www.ac.shell.com/static/js/vendor/jquery-1.10.2.min.js"></script> 7     <script type="text/javascript" src="red.js"></script> 8     <script type="text/javascript"> 9         $(function(){10             $(document).Action({errorElement:'.error'});11         });12 13         $.GlobalCallBack.submitCallback = function (e) {14             e = e || window.event;15             var obj = e.srcElement ? e.srcElement : e.target;16             alert(obj.id)17         }18 19     </script>20 </head>21 <