spngvld.js 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352
  1. 
  2. var spngvld = window.NameSpace || {};
  3. // 表单验证,利用class名来获取对象
  4. spngvld.addlblError = function (obj) {
  5. var lblError = "<label class='sp-error'></label>";
  6. if ($(obj).parent().children(".sp-error").length < 1) {
  7. $(obj).after(lblError);
  8. $(obj).parent().addClass('sp-text-nowrap').addClass("sp-relative");
  9. }
  10. }
  11. // 整合验证
  12. spngvld.getblur = function (obj, regex, tip) {
  13. var className = $(obj).attr('class');
  14. var str = $.trim($(obj).val());
  15. var strReg = !!str.match(regex);
  16. if (str != "" && strReg == false) {
  17. $(obj).next("label").show().text(tip);
  18. $(obj).removeClass("sp-rightLogo").addClass('sp-errorTip').addClass('sp-errorLogo');
  19. $(obj).focus();
  20. return false;
  21. }else if (str != "" && strReg == true) {
  22. $(obj).removeClass('sp-errorTip').removeClass('sp-errorLogo').addClass("sp-rightLogo");
  23. $(obj).next("label").hide().text("");
  24. }
  25. if (className.indexOf('sp-required') == -1) {
  26. if (str == "") {
  27. $(obj).removeClass('sp-errorTip').removeClass('sp-errorLogo');
  28. $(obj).next("label").hide().text("");
  29. }
  30. }
  31. }
  32. //1.验证必填 sp-required
  33. app.directive("spRequired", function () {
  34. return {
  35. restrict: "A",
  36. link: function (scope, elem, attrs) {
  37. spngvld.addlblError(elem);
  38. $(elem).addClass("sp-required").addClass("sp-requireLogo");
  39. elem.blur(function () {
  40. //可编辑必填项延时5毫秒
  41. //readonly弹窗选择必填项延时500毫秒
  42. var time = $(elem).attr("readonly") ? 500 : 5;
  43. setTimeout(function () {
  44. var newVal = $.trim($(elem).val());
  45. var getCalss = $(elem).attr("class");
  46. if (newVal == "") {
  47. $(elem).next("label").show().html("必填");
  48. $(elem).addClass('sp-errorTip').removeClass('sp-requireLogo').removeClass('sp-rightLogo').addClass('sp-errorLogo');
  49. }
  50. else {
  51. if (getCalss.indexOf("sp-url") == -1 && getCalss.indexOf("sp-tel") == -1 && getCalss.indexOf("sp-telephone") == -1 && getCalss.indexOf("sp-email") == -1 && getCalss.indexOf("sp-username") == -1) {
  52. $(elem).next("label").hide().html("");
  53. $(elem).removeClass('sp-errorTip').removeClass('sp-errorLogo');
  54. }
  55. }
  56. }, time);
  57. });
  58. }
  59. }
  60. });
  61. //2.验证手机号 sp-phone
  62. app.directive("spPhone", function () {
  63. return {
  64. restrict: "A",
  65. link: function (scope, elem, attrs) {
  66. $(elem).addClass("sp-phone");
  67. spngvld.addlblError(elem);
  68. $(elem).blur(function () {
  69. ///var regex = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
  70. var regex = /^1[3456789]\d{9}$/;
  71. spngvld.getblur(elem, regex, "手机号错误");
  72. });
  73. }
  74. }
  75. });
  76. //3.验证座机号码 sp-tel
  77. app.directive("spTel", function () {
  78. return {
  79. restrict: "A",
  80. link: function (scope, elem, attrs) {
  81. $(elem).addClass("sp-tel");
  82. spngvld.addlblError(elem);
  83. $(elem).blur(function () {
  84. var regex = /^(?:(?:0\d{2,3})-)?(?:\d{7,8})(-(?:\d{3,}))?$/;
  85. spngvld.getblur(elem, regex, "座机号错误");
  86. });
  87. }
  88. }
  89. });
  90. //4.验证联系电话 sp-telephone
  91. app.directive("spTelephone", function () {
  92. return {
  93. restrict: "A",
  94. link: function (scope, elem, attrs) {
  95. $(elem).addClass("sp-telephone");
  96. spngvld.addlblError(elem);
  97. $(elem).blur(function () {
  98. var tel = $.trim($(this).val());
  99. if (tel.substring(0, 1) == 1) {
  100. var regex = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
  101. spngvld.getblur(this, regex, "手机号错误");
  102. }
  103. else {
  104. var regex = /^(?:(?:0\d{2,3})-)?(?:\d{7,8})(-(?:\d{3,}))?$/;
  105. spngvld.getblur(this, regex, "座机号错误");
  106. }
  107. });
  108. }
  109. }
  110. });
  111. //5.验证邮箱 sp-email
  112. app.directive("spEmail", function () {
  113. return {
  114. restrict: "A",
  115. link: function (scope, elem, attrs) {
  116. $(elem).addClass("sp-email");
  117. spngvld.addlblError(elem);
  118. $(elem).blur(function () {
  119. var regex = /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;
  120. spngvld.getblur(elem, regex, "邮箱错误");
  121. });
  122. }
  123. }
  124. });
  125. //6.验证身份证号 sp-card
  126. app.directive("spCard", function () {
  127. return {
  128. restrict: "A",
  129. link: function (scope, elem, attrs) {
  130. spngvld.addlblError(elem);
  131. $(elem).blur(function () {
  132. 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)$/;
  133. spngvld.getblur(elem, regex, "身份证错误");
  134. });
  135. }
  136. }
  137. });
  138. //7.验证邮编 sp-postcode
  139. app.directive("spPostcode", function () {
  140. return {
  141. restrict: "A",
  142. link: function (scope, elem, attrs) {
  143. spngvld.addlblError(elem);
  144. $(elem).blur(function () {
  145. var regex = /^[0-9][0-9]{5}$/;
  146. spngvld.getblur(elem, regex, "邮编错误");
  147. });
  148. }
  149. }
  150. });
  151. //8. 验证传真 sp-fax
  152. app.directive("spFax", function () {
  153. return {
  154. restrict: "A",
  155. link: function (scope, elem, attrs) {
  156. spngvld.addlblError(elem);
  157. $(elem).blur(function () {
  158. var regex = /^(?:(?:0\d{2,3})-)?(?:\d{7,8})(-(?:\d{3,}))?$/;
  159. spngvld.getblur(elem, regex, "传真号错误");
  160. });
  161. }
  162. }
  163. });
  164. //9.验证网址 sp-url
  165. app.directive("spUrl", function () {
  166. return {
  167. restrict: "A",
  168. link: function (scope, elem, attrs) {
  169. $(elem).addClass("sp-url");
  170. spngvld.addlblError(elem);
  171. elem.blur(function () {
  172. 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;
  173. spngvld.getblur(elem, regex, "网址错误");
  174. });
  175. }
  176. }
  177. });
  178. //10.验证IP地址 sp-ip
  179. app.directive("spIp", function () {
  180. return {
  181. restrict: "A",
  182. link: function (scope, elem, attrs) {
  183. spngvld.addlblError(elem);
  184. $(elem).blur(function () {
  185. var regex = /^\d+\.\d+\.\d+\.\d+$/;
  186. spngvld.getblur(elem, regex, "IP错误");
  187. });
  188. }
  189. }
  190. });
  191. //11.验证用户名合法 sp-username
  192. app.directive("spUsername", function () {
  193. return {
  194. restrict: "A",
  195. link: function (scope, elem, attrs) {
  196. $(elem).addClass("sp-username");
  197. spngvld.addlblError(elem);
  198. $(elem).blur(function () {
  199. var regex = /^(?![^a-zA-Z]+$)(?!\D+$).{5,20}$/;
  200. spngvld.getblur(elem, regex, "用户名应由5-20位字母、数字组成");
  201. });
  202. }
  203. }
  204. });
  205. //12.验证数字 sp-digit
  206. app.directive("spDigit", function () {
  207. return {
  208. restrict: "A",
  209. link: function (scope, elem, attrs) {
  210. spngvld.addlblError(elem);
  211. $(elem).blur(function () {
  212. var regex = /^[0-9]*$/;
  213. spngvld.getblur(elem, regex, "请输入数字");
  214. });
  215. }
  216. }
  217. });
  218. //13.验证小数 sp-decimal
  219. app.directive("spDecimal", function () {
  220. return {
  221. restrict: "A",
  222. link: function (scope, elem, attrs) {
  223. spngvld.addlblError(elem);
  224. $(elem).blur(function () {
  225. var regex = /^\d+(\.\d+)?$/;
  226. spngvld.getblur(elem, regex, "请输入数字或小数");
  227. });
  228. }
  229. }
  230. });
  231. //14.验证中文 sp-chinese
  232. app.directive("spChinese", function () {
  233. return {
  234. restrict: "A",
  235. link: function (scope, elem, attrs) {
  236. spngvld.addlblError(elem);
  237. $(elem).blur(function () {
  238. var regex = /^[\u4E00-\u9FFF]+$/;
  239. spngvld.getblur(elem, regex, "请输入中文");
  240. });
  241. }
  242. }
  243. });
  244. //15.验证密码 sp-password
  245. app.directive("spPassword", function () {
  246. return {
  247. restrict: "A",
  248. link: function (scope, elem, attrs) {
  249. var className = $(elem).attr('class');
  250. var spanpwd = "<span class='sp-strength-tip'></span>";
  251. spngvld.addlblError(elem);
  252. if ($(elem).parent().children(".sp-strength-tip").length < 1) {
  253. $(elem).next("label").after(spanpwd);
  254. }
  255. $(elem).blur(function () {
  256. $(".sp-strength-tip").hide();
  257. $(elem).removeClass("sp-rightLogo");
  258. var pwd = $.trim($(elem).val());
  259. var pwdReg = !!pwd.match(/^(?![^a-zA-Z]+$)(?!\D+$).{6,30}$/);//字母数字
  260. var pwdRegCheck = !!pwd.match(/^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:";'<>?,.\/]).{6,30}$/);//字母数字特殊符号
  261. if (pwd != "") {
  262. if (pwdReg == false) {
  263. $(elem).next("label").addClass("arrow-top").show().html("密码应由6~30位字母、数字组成");
  264. $(elem).removeClass("sp-rightLogo").addClass('sp-errorTip'); $(this).focus();
  265. return false;
  266. } else {
  267. $(elem).removeClass('sp-errorTip').removeClass('sp-errorLogo').addClass("sp-rightLogo");
  268. $(elem).next("label").hide().html("");
  269. if (pwd.length < 9) {
  270. $(elem).parent().find(".sp-strength-tip").show().text("强度低");
  271. } else {
  272. $(elem).parent().find(".sp-strength-tip").show().text("强度中");
  273. }
  274. }
  275. //若含有特殊字符则表示 强度高
  276. if (pwdRegCheck == true && pwd.length > 9) {
  277. $(elem).removeClass('sp-errorTip').removeClass('sp-errorLogo').addClass("sp-rightLogo");
  278. $(elem).next("label").hide().html("");
  279. $(elem).parent().find(".sp-strength-tip").show().text("强度高");
  280. }
  281. }
  282. if (className.indexOf('sp-required') == -1) {
  283. if (pwd == "") {
  284. $(elem).removeClass('sp-errorTip');
  285. $(elem).next("label").hide().html("");
  286. }
  287. }
  288. });
  289. }
  290. }
  291. });
  292. //提交时检测 所需要验证的 控件是否合法, 不合法就不能通过
  293. spngvld.submit = function (formID) {
  294. /// <summary>提交时检测form表单格式的合法性</summary>
  295. var result = true;
  296. $(formID + " label.sp-error").each(function () {
  297. var getClass = $(this).prev().attr("class"); //获取当前节点的前一个节点
  298. if (getClass.indexOf("sp-required") != -1) { //如果含有sp-required必填
  299. //含有必填,其值为空时
  300. if ($(this).prev().val() == "" || $(this).prev().val() == null) {
  301. if ($(this).is(":hidden")) {
  302. $(this).show().html("必填");
  303. $(this).prev().addClass('sp-errorTip').removeClass('sp-requireLogo').addClass('sp-errorLogo');
  304. }
  305. result = false;
  306. }
  307. if ($(this).prev().val() != "") {
  308. if ($(this).is(":visible")) {
  309. result = false;
  310. }
  311. }
  312. }
  313. //如果不是必填,但含有其他验证 时
  314. if (getClass.indexOf("sp-required") == -1) {
  315. if ($(this).prev().val() != "") {
  316. if ($(this).is(":visible")) {
  317. result = false;
  318. }
  319. }
  320. }
  321. });
  322. $(formID + " .sp-error:visible:eq(0)").prev().focus(); //将焦点定位到第一个sp-error所属的文本框中
  323. return result;
  324. }
  325. //成功时清除掉“对号”图片logo
  326. spngvld.clear = function (formID) {
  327. $(formID + " .sp-rightLogo").each(function () {
  328. $(this).removeClass("sp-rightLogo");
  329. $(this).next("label").hide();
  330. });
  331. $(formID + " .sp-required").each(function () {
  332. $(this).removeClass("sp-errorTip").removeClass("sp-errorLogo").addClass("sp-requireLogo");
  333. $(this).next("label").hide();
  334. });
  335. }