gldvld.js 9.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262
  1. // 表单验证,适用于panel
  2. ///引用方法,直接将该gldvld.js引用到页面的底部即可,不要引用css,会自动引入该css
  3. //gldvld 是goldenValidate的缩写
  4. var gldvld = window.NameSpace || {};
  5. /////js获取到在身所在文件的路径,然后拼出所需css的路径,放到引用文件的头部
  6. gldvld.getRootPath = function () {
  7. var getJsUrl = document.scripts;
  8. getJsUrl = getJsUrl[getJsUrl.length - 1].src.substring(0, getJsUrl[getJsUrl.length - 1].src.lastIndexOf("/") + 1);
  9. var cssHref = getJsUrl + "gldvld.css";
  10. $("head").append("<link href='" + cssHref + "' rel='stylesheet' />");
  11. }
  12. gldvld.getRootPath();
  13. var lblError = "<label class='sp-error'></label>";
  14. // 表单验证,利用class名来获取对象
  15. gldvld.lblError = function (obj) {
  16. if ($(obj).parent().children(".sp-error").length < 1) { //$(obj).parent().html().indexOf("sp-error") == -1
  17. $(obj).addClass('sp-text-nowrap').addClass('sp-relative');
  18. //$(obj).after(lblError);
  19. $(obj).find("input").after(lblError);
  20. }
  21. }
  22. ////失去焦点时的方法
  23. gldvld.getblur = function (classN, regex, tip) {
  24. var className = $(classN).attr('class');
  25. var str = $.trim($(classN).val());
  26. var strReg = !!str.match(regex);
  27. if (str != "" && strReg == false) {
  28. $(classN).next("label").show().html(tip);
  29. $(classN).removeClass("sp-rightLogo").addClass('sp-errorTip').addClass('sp-errorLogo');
  30. $(classN).focus(); return false;
  31. }
  32. else if (str != "" && strReg == true) {
  33. $(classN).removeClass('sp-errorTip').removeClass('sp-errorLogo').addClass("sp-rightLogo");
  34. $(classN).next("label").hide().html("");
  35. }
  36. if (className.indexOf('sp-required') == -1) {
  37. if (str == "") {
  38. $(classN).removeClass('sp-errorTip').removeClass('sp-errorLogo');
  39. $(classN).next("label").hide().html("");
  40. }
  41. }
  42. }
  43. //1.不能为空 class="require"
  44. gldvld.require = function () {
  45. $(".sp-required input").each(function () {
  46. $(this).addClass('sp-requireLogo');
  47. gldvld.lblError('.sp-required');
  48. $(this).blur(function () {
  49. setTimeout(function () {
  50. var newVal = $.trim($(this).val());
  51. if (newVal == "") {
  52. $(this).next("label").show().html("必填");
  53. $(this).addClass('sp-errorTip').removeClass('sp-requireLogo').removeClass('sp-rightLogo').addClass('sp-errorLogo');
  54. }
  55. else {
  56. $(this).next("label").hide().html("");
  57. $(this).removeClass('sp-errorTip').removeClass('sp-errorLogo');
  58. }
  59. }, 5);
  60. });
  61. });
  62. }
  63. //2.1.验证电话号码:手机+座机 class="sp-telephone"
  64. gldvld.telephone = function () {
  65. $('.sp-telephone input').each(function () {
  66. gldvld.lblError('.sp-telephone');
  67. $(this).blur(function (event) {
  68. var tel = $.trim($(this).val());
  69. if (tel.substring(0, 1) == 1) {
  70. var regex = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
  71. gldvld.getblur(this, regex, "手机号错误");
  72. }
  73. else {
  74. var regex = /^(?:(?:0\d{2,3})-)?(?:\d{7,8})(-(?:\d{3,}))?$/;
  75. gldvld.getblur(this, regex, "座机号错误");
  76. }
  77. });
  78. });
  79. }
  80. //2.2.验证手机号码 class="sp-phone"
  81. gldvld.phone = function () {
  82. $('.sp-phone input').each(function () {
  83. gldvld.lblError('.sp-phone');
  84. $(this).blur(function (event) {
  85. var regex = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
  86. gldvld.getblur(this, regex, "手机号错误");
  87. });
  88. });
  89. }
  90. //2.3验证座机号码 class="sp-tel"
  91. gldvld.tel = function () {
  92. $('.sp-tel input').each(function () {
  93. gldvld.lblError('.sp-tel');
  94. $(this).blur(function (event) {
  95. var regex = /^(?:(?:0\d{2,3})-)?(?:\d{7,8})(-(?:\d{3,}))?$/;
  96. gldvld.getblur(this, regex, "座机号错误");
  97. });
  98. });
  99. }
  100. //3.验证身份证号 class="sp-card"
  101. gldvld.IDcard = function () {
  102. $('.sp-card input').each(function () {
  103. gldvld.lblError('.sp-card');
  104. $(this).blur(function () {
  105. var regex = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
  106. gldvld.getblur(this, regex, "身份证错误");
  107. });
  108. });
  109. }
  110. //4.验证邮箱 class="sp-email"
  111. gldvld.email = function () {
  112. $('.sp-email input').each(function () {
  113. gldvld.lblError('.sp-email');
  114. $(this).blur(function () {
  115. var regex = /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;
  116. gldvld.getblur(this, regex, "邮箱错误");
  117. });
  118. });
  119. }
  120. //5.邮编 class="sp-postcode"
  121. gldvld.postcode = function () {
  122. $('.sp-postcode input').each(function () {
  123. gldvld.lblError('.sp-postcode');
  124. $(this).blur(function () {
  125. var regex = /^[0-9][0-9]{5}$/;
  126. gldvld.getblur(this, regex, "邮编错误");
  127. });
  128. });
  129. }
  130. //6.传真 class="sp-fax"
  131. gldvld.fax = function () {
  132. $('.sp-fax input').each(function () {
  133. gldvld.lblError('.sp-fax');
  134. $(this).blur(function () {
  135. var regex = /^(?:(?:0\d{2,3})-)?(?:\d{7,8})(-(?:\d{3,}))?$/;
  136. gldvld.getblur(this, regex, "传真号错误");
  137. });
  138. });
  139. }
  140. //7.只允许数字 class="sp-num"
  141. gldvld.num = function () {
  142. $('.sp-num input').each(function () {
  143. gldvld.lblError('.sp-num');
  144. $(this).blur(function () {
  145. var regex = /^[0-9]*$/;
  146. gldvld.getblur(this, regex, "输入数字");
  147. });
  148. });
  149. }
  150. //7_2.数字和小数 class="sp-decimal"
  151. gldvld.decimal = function () {
  152. $('.sp-decimal input').each(function () {
  153. gldvld.lblError('.sp-decimal');
  154. $(this).blur(function () {
  155. var regex = /^\d+(\.\d+)?$/;
  156. gldvld.getblur(this, regex, "请输入数字或小数");
  157. });
  158. });
  159. }
  160. //8.网址 class="sp-url"
  161. gldvld.url = function () {
  162. $('.sp-url input').each(function () {
  163. gldvld.lblError('.sp-url');
  164. $(this).blur(function () {
  165. var regex = /((https|http|ftp|rtsp|mms):\/\/)?(([0-9a-z_!~*'().&=+$%-]+:)?[0-9a-z_!~*'().&=+$%-]+@)?(([0-9]{1,3}\.){3}[0-9]{1,3}|([0-9a-z_!~*'()-]+\.)*([0-9a-z][0-9a-z-]{0,61})?[0-9a-z]\.[a-z]{2,6})(:[0-9]{1,4})?((\/?)|(\/[0-9a-z_!~*'().;?:@&=+$,%#-]+)+\/?)/g;
  166. gldvld.getblur(this, regex, "网址错误");
  167. });
  168. });
  169. }
  170. //9.ip地址 class="sp-ip"
  171. gldvld.ip = function () {
  172. $('.sp-ip input').each(function () {
  173. gldvld.lblError('.sp-ip');
  174. $(this).blur(function () {
  175. var regex = /^\d+\.\d+\.\d+\.\d+$/;
  176. gldvld.getblur(this, regex, "ip地址错误");
  177. });
  178. });
  179. }
  180. //10.匹配中文 class="sp-chinese"
  181. gldvld.chinese = function () {
  182. $('.sp-chinese input').each(function () {
  183. gldvld.lblError('.sp-chinese');
  184. $(this).blur(function () {
  185. var regex = /^[\u4E00-\u9FFF]+$/;
  186. gldvld.getblur(this, regex, "请输入中文汉字");
  187. });
  188. });
  189. }
  190. gldvld.require(); //验证
  191. gldvld.phone(); //验证手机号
  192. gldvld.telephone();//验证手机+座机
  193. gldvld.tel();//验证座机
  194. gldvld.IDcard();//验证身份证
  195. gldvld.email();//验证邮箱
  196. gldvld.postcode();//验证邮编
  197. gldvld.fax();//验证传真
  198. gldvld.num();//验证数字
  199. gldvld.decimal();//验证小数
  200. gldvld.url();//验证网址
  201. gldvld.ip();//验证ip地址
  202. gldvld.chinese();//验证中文汉字
  203. //13.提交按钮点击时检测 用法如下:
  204. //$("#Save").click(function () {
  205. // if (gldvld.submitCheck("#validateTest")) {
  206. // 这里写要操作的代码后台
  207. // }
  208. //});
  209. gldvld.submit = function (formID) {
  210. /// <summary>提交时检测form表单格式的合法性</summary>
  211. var result = true;
  212. $(formID + " label.sp-error").each(function () {
  213. var getClass = $(this).prev().attr("class"); //获取当前节点的前一个节点
  214. if (getClass.indexOf("sp-required") != -1) { //如果含有sp-required必填
  215. //含有必填,其值为空时
  216. if ($(this).prev().val() == "" || $(this).prev().val() == null) {
  217. if ($(this).is(":hidden")) {
  218. $(this).show().html("必填");
  219. $(this).prev().addClass('sp-errorTip').removeClass('sp-requireLogo').addClass('sp-errorLogo');
  220. }
  221. result = false;
  222. }
  223. if ($(this).prev().val() != "") {
  224. if ($(this).is(":visible")) {
  225. result = false;
  226. }
  227. }
  228. }
  229. //如果不是必填,但含有其他验证 时
  230. if (getClass.indexOf("sp-required") == -1) {
  231. if ($(this).prev().val() != "") {
  232. if ($(this).is(":visible")) {
  233. result = false;
  234. }
  235. }
  236. }
  237. });
  238. $(formID + " .sp-error:visible:eq(0)").prev().focus(); //将焦点定位到第一个sp-error所属的文本框中
  239. return result;
  240. }
  241. //成功后清除掉 “对号”图片logo
  242. gldvld.clear = function (formID) {
  243. $(formID + " .sp-rightLogo").each(function () {
  244. $(this).removeClass("sp-rightLogo");
  245. $(this).next("label").hide();
  246. });
  247. $(formID + " .sp-required").each(function () {
  248. $(this).removeClass("sp-errorTip").removeClass("sp-errorLogo").addClass("sp-requireLogo");
  249. $(this).next("label").hide();
  250. });
  251. }