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'],input[type='password']").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 <body> 22 <div class="form"> 23 数字:<input type="text" regex="/^d+$/" logicmsg="只能输入数字" class="notnull" nullmsg="不能为空"/><br/> 24 <input type="button" class="check" id="btnClick" value="Click Me"/> 25 <div class="error"> 26 </div> 27 </div> 28 <br/><br/> 29 30 <div class="form"> 31 选择:<select name="select" class="select" nullmsg="请选择" id="select"> 32 <option value="0">请选择</option> 33 <option value="1">1</option> 34 <option value="2">2</option> 35 <option value="3">3</option> 36 <option value="4">4</option> 37 <option value="5">5</option> 38 </select> 39 <br/><br/> 40 <input type="button" class="check" id="btnSelect" value="Click Me2"/> 41 42 <div class="error"> 43 </div> 44 </div> 45 </body> 46 </html>