spvld.js 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420
  1. ///引用方法,直接将该gldvld.js引用到页面的底部即可,不要引用css,会自动引入该css
  2. //spvld 是specialValidate的缩写
  3. /////全局声明
  4. var spvld = window.NameSpace || {};
  5. /////js获取到在身所在文件的路径,然后拼出所需css的路径,放到引用文件的头部
  6. spvld.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 + "spvld.css";
  10. $("head").append("<link href='" + cssHref + "' rel='stylesheet' />");
  11. }
  12. spvld.getRootPath();
  13. var lblError = "<label class='sp-error'></label>";
  14. $(document).ready(function () {
  15. spvld.getValidate();
  16. });
  17. //将验证引入到方法名
  18. spvld.getValidate = function () {
  19. spvld.require(); //验证
  20. spvld.requireDate();//日期必填
  21. spvld.telephone();
  22. spvld.phone();
  23. spvld.tel();
  24. spvld.IDcard();
  25. spvld.email();
  26. spvld.postcode();
  27. spvld.fax();
  28. spvld.num();
  29. spvld.decimal();
  30. spvld.url();
  31. spvld.ip();
  32. spvld.chinese();
  33. spvld.username();
  34. spvld.pwd();
  35. }
  36. // 表单验证,利用class名来获取对象
  37. spvld.lblError = function (obj) {
  38. if ($(obj).parent().children(".sp-error").length < 1) { //$(obj).parent().html().indexOf("sp-error") == -1
  39. $(obj).after(lblError);
  40. $(obj).parent().addClass('sp-text-nowrap').addClass("sp-relative");
  41. }
  42. }
  43. spvld.getblur = function (classN, regex, tip) {
  44. var className = $(classN).attr('class');
  45. var str = $.trim($(classN).val());
  46. var strReg = !!str.match(regex);
  47. if (str != "" && strReg == false) {
  48. $(classN).next("label").show().html(tip);
  49. $(classN).removeClass("sp-rightLogo").addClass('sp-errorTip').addClass('sp-errorLogo');
  50. $(classN).focus(); return false;
  51. }
  52. else if (str != "" && strReg == true) {
  53. $(classN).removeClass('sp-errorTip').removeClass('sp-errorLogo').addClass("sp-rightLogo");
  54. $(classN).next("label").hide().html("");
  55. }
  56. if (className.indexOf('sp-required') == -1) {
  57. if (str == "") {
  58. $(classN).removeClass('sp-errorTip').removeClass('sp-errorLogo');
  59. $(classN).next("label").hide().html("");
  60. }
  61. }
  62. }
  63. //1.不能为空 class="sp-required"
  64. spvld.require = function () {
  65. $(".sp-required").each(function () {
  66. $(this).addClass('sp-requireLogo');
  67. spvld.lblError('.sp-required');
  68. $(this).blur(function () {
  69. var newVal = $.trim($(this).val());
  70. if (newVal == "") {
  71. $(this).next("label").show().html("必填");
  72. $(this).addClass('sp-errorTip').removeClass('sp-requireLogo').removeClass('sp-rightLogo').addClass('sp-errorLogo');
  73. }
  74. else {
  75. $(this).next("label").hide().html("");
  76. $(this).removeClass('sp-errorTip').removeClass('sp-errorLogo');
  77. }
  78. });
  79. });
  80. }
  81. //1.2. 日期验证不能为空 class="sp-required-date"
  82. spvld.requireDate = function () {
  83. $(".sp-required-date").each(function () {
  84. $(this).addClass('sp-requireLogo');
  85. spvld.lblError('.sp-required-date');
  86. //$(this).blur(function () {
  87. // var get_id = $(this).attr("id");
  88. // var newVal = $.trim($("#" + get_id).val());
  89. // if (newVal != "" && newVal != null) {
  90. // $("#" + get_id).next("label").hide().html("");
  91. // $("#" + get_id).removeClass('sp-errorTip').removeClass('sp-errorLogo');
  92. // }
  93. //});
  94. });
  95. }
  96. //2.验证电话号码:手机+座机 class="sp-telephone"
  97. spvld.telephone = function () {
  98. $('.sp-telephone').each(function () {
  99. spvld.lblError('.sp-telephone');
  100. $(this).blur(function (event) {
  101. var tel = $.trim($(this).val());
  102. if (tel.substring(0, 1) == 1) {
  103. var regex = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
  104. spvld.getblur(this, regex, "手机号错误");
  105. }
  106. else {
  107. var regex = /^(?:(?:0\d{2,3})-)?(?:\d{7,8})(-(?:\d{3,}))?$/;
  108. spvld.getblur(this, regex, "座机号错误");
  109. }
  110. });
  111. });
  112. }
  113. //2.2验证手机号码 class="sp-phone"
  114. spvld.phone = function () {
  115. $('.sp-phone').each(function () {
  116. spvld.lblError('.sp-phone');
  117. $(this).blur(function (event) {
  118. var regex = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
  119. spvld.getblur(this, regex, "手机号错误");
  120. });
  121. });
  122. }
  123. //2.3验证座机号码
  124. spvld.tel = function () {
  125. $('.sp-tel').each(function () {
  126. spvld.lblError('.sp-tel');
  127. $(this).blur(function (event) {
  128. var regex = /^(?:(?:0\d{2,3})-)?(?:\d{7,8})(-(?:\d{3,}))?$/;
  129. spvld.getblur(this, regex, "座机号错误");
  130. });
  131. });
  132. }
  133. //3.验证身份证号 class="sp-card"
  134. spvld.IDcard = function () {
  135. $('.sp-card').each(function () {
  136. spvld.lblError('.sp-card');
  137. $(this).blur(function () {
  138. 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)$/;
  139. spvld.getblur(this, regex, "身份证错误");
  140. });
  141. });
  142. }
  143. //4.验证邮箱
  144. spvld.email = function () {
  145. $('.sp-email').each(function () {
  146. spvld.lblError('.sp-email');
  147. $(this).blur(function () {
  148. var regex = /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;
  149. spvld.getblur(this, regex, "邮箱错误");
  150. });
  151. });
  152. }
  153. //5.邮编 postcode
  154. spvld.postcode = function () {
  155. $('.sp-postcode').each(function () {
  156. spvld.lblError('.sp-postcode');
  157. $(this).blur(function () {
  158. var regex = /^[0-9][0-9]{5}$/;
  159. spvld.getblur(this, regex, "邮编错误");
  160. });
  161. });
  162. }
  163. //6.传真 fax
  164. spvld.fax = function () {
  165. $('.sp-fax').each(function () {
  166. spvld.lblError('.sp-fax');
  167. $(this).blur(function () {
  168. var regex = /^(?:(?:0\d{2,3})-)?(?:\d{7,8})(-(?:\d{3,}))?$/;
  169. spvld.getblur(this, regex, "传真号错误");
  170. });
  171. });
  172. }
  173. //7.只允许数字 num
  174. spvld.num = function () {
  175. $('.sp-num').each(function () {
  176. spvld.lblError('.sp-num');
  177. $(this).blur(function () {
  178. var regex = /^[0-9]*$/;
  179. spvld.getblur(this, regex, "输入数字");
  180. });
  181. });
  182. }
  183. //7_2.数字和小数 decimal
  184. spvld.decimal = function () {
  185. $('.sp-decimal').each(function () {
  186. spvld.lblError('.sp-decimal');
  187. $(this).blur(function () {
  188. var regex = /^\d+(\.\d+)?$/;
  189. spvld.getblur(this, regex, "请输入数字或小数");
  190. });
  191. });
  192. }
  193. //8.网址 url
  194. spvld.url = function () {
  195. $('.sp-url').each(function () {
  196. spvld.lblError('.sp-url');
  197. $(this).blur(function () {
  198. 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;
  199. spvld.getblur(this, regex, "网址错误");
  200. });
  201. });
  202. }
  203. //9.ip地址 ip
  204. spvld.ip = function () {
  205. $('.sp-ip').each(function () {
  206. spvld.lblError('.sp-ip');
  207. $(this).blur(function () {
  208. var regex = /^\d+\.\d+\.\d+\.\d+$/;
  209. spvld.getblur(this, regex, "ip地址错误");
  210. });
  211. });
  212. }
  213. //10.匹配中文 chinese
  214. spvld.chinese = function () {
  215. $('.sp-chinese').each(function () {
  216. spvld.lblError('.sp-chinese');
  217. $(this).blur(function () {
  218. var regex = /^[\u4E00-\u9FFF]+$/;
  219. spvld.getblur(this, regex, "请输入中文汉字");
  220. });
  221. });
  222. }
  223. //11.验证用户名合法 username
  224. spvld.username = function () {
  225. $('.sp-username').each(function () {
  226. spvld.lblError('.sp-username');
  227. $(this).blur(function () {
  228. var regex = /^(?![^a-zA-Z]+$)(?!\D+$).{5,20}$/;
  229. spvld.getblur(this, regex, "用户名必须由5-20位字母、数字组成");
  230. });
  231. });
  232. }
  233. //12.验证密码 pwd
  234. var spanpwd = "<span class='sp-strength-tip'></span>";
  235. spvld.pwd = function () {
  236. $('.sp-password').each(function () {
  237. var className = $(this).attr('class');
  238. spvld.lblError('.sp-password');
  239. if ($(this).parent().children(".sp-strength-tip").length < 1) { //$(obj).parent().html().indexOf("sp-error") == -1
  240. $(this).next("label").after(spanpwd);
  241. }
  242. $(this).blur(function () {
  243. $(".sp-strength-tip").hide();
  244. $(this).removeClass("sp-rightLogo");
  245. var pwd = $.trim($(this).val());
  246. var pwdReg = !!pwd.match(/^(?![^a-zA-Z]+$)(?!\D+$).{6,30}$/);//字母数字
  247. var pwdRegCheck = !!pwd.match(/^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:";'<>?,.\/]).{6,30}$/);//字母数字特殊符号
  248. /////var pwdReg = !!get_password.match(/^[a-zA-Z0-9\W_!@#$%^&*`~()-+=]{6,30}$/);//同时包含大写字母、小写字母、数字、特殊字符
  249. if (pwd != "") {
  250. if (pwdReg == false) {
  251. $(this).next("label").addClass("arrow-top").show().html("密码必须由6-30位字母、数字组成");
  252. $(this).removeClass("sp-rightLogo").addClass('sp-errorTip'); $(this).focus();
  253. return false;
  254. } else {
  255. $(this).removeClass('sp-errorTip').removeClass('sp-errorLogo').addClass("sp-rightLogo");
  256. $(this).next("label").hide().html("");
  257. if (pwd.length < 9) {
  258. $(this).parent().find(".sp-strength-tip").show().text("强度低");
  259. } else {
  260. $(this).parent().find(".sp-strength-tip").show().text("强度中");
  261. }
  262. }
  263. //若含有特殊字符则表示 强度高
  264. if (pwdRegCheck == true && pwd.length > 9) {
  265. $(this).removeClass('sp-errorTip').removeClass('sp-errorLogo').addClass("sp-rightLogo");
  266. $(this).next("label").hide().html("");
  267. $(this).parent().find(".sp-strength-tip").show().text("强度高");
  268. }
  269. }
  270. if (className.indexOf('sp-required') == -1) {
  271. if (pwd == "") { $(this).removeClass('sp-errorTip'); $(this).next("label").hide().html(""); }
  272. }
  273. });
  274. });
  275. }
  276. //13.提交按钮点击时检测 用法如下:
  277. //$("#Save").click(function () {
  278. // if (spvld.submitCheck("#validateTest")) {
  279. // 这里写要操作的代码后台
  280. // }
  281. //});
  282. spvld.submit = function (formID) {
  283. /// <summary>提交时检测form表单格式的合法性</summary>
  284. var result = true;
  285. $(formID + " label.sp-error").each(function () {
  286. var getClass = $(this).prev().attr("class"); //获取当前节点的前一个节点
  287. if (getClass.indexOf("sp-required") != -1) { //如果含有sp-required必填
  288. //含有必填,其值为空时
  289. if ($(this).prev().val() == "" || $(this).prev().val() == null) {
  290. if ($(this).is(":hidden")) {
  291. $(this).show().html("必填");
  292. $(this).prev().addClass('sp-errorTip').removeClass('sp-requireLogo').addClass('sp-errorLogo');
  293. }
  294. result = false;
  295. }
  296. if ($(this).prev().val() != "") {
  297. if ($(this).is(":visible")) {
  298. result = false;
  299. }
  300. }
  301. }
  302. //如果不是必填,但含有其他验证 时
  303. if (getClass.indexOf("sp-required") == -1) {
  304. if ($(this).prev().val() != "") {
  305. if ($(this).is(":visible")) {
  306. result = false;
  307. }
  308. }
  309. }
  310. });
  311. ////日期控件的必填检测
  312. $(formID + " .sp-required-date").each(function () {
  313. if ($(this).val() == "" || $(this).val() == null) {
  314. ///让其后面的
  315. $(this).next("label").show().html("必填");
  316. $(this).addClass('sp-errorTip').removeClass('sp-requireLogo').addClass('sp-errorLogo');
  317. result = false;
  318. ///权宜之计是给时间验证加上延时然后去掉提示样式
  319. setTimeout(function () {
  320. $(formID + " .sp-required-date").next("label").show().html("");
  321. $(formID + " .sp-required-date").removeClass('sp-errorTip').addClass('sp-requireLogo').removeClass('sp-errorLogo');
  322. }, 3000);
  323. }
  324. });
  325. ///$(formID + " .sp-error:visible:eq(0)").prev().focus(); //将焦点定位到第一个sp-error所属的文本框中
  326. return result;
  327. }
  328. //14.自定义方法来检测重复
  329. //调用时必须放在$(document).ready(function () {});里面,否则会因在dom之前加载未找到节点而导致报错。
  330. spvld.vldrepeat = function (classN, funMethod, tip) {
  331. /// <summary>自主检测</summary>
  332. $(classN).each(function () {
  333. var className = $(this).attr('class');
  334. $(this).blur(function () {
  335. spvld.lblError(this);
  336. var getVal = $.trim($(this).val());
  337. var funResult = funMethod(); //接收返回结果
  338. //如果包含必填class
  339. if (className.indexOf('sp-required') != -1) {
  340. if (getVal != "" && funResult == false) {
  341. $(this).next("label").show().html(tip);
  342. $(this).removeClass("sp-rightLogo").addClass('sp-errorTip').addClass('sp-errorLogo');
  343. $(this).focus(); return false;
  344. }
  345. else if (getVal != "" && $(this).next("label").is(":hidden")) {
  346. $(this).removeClass('sp-errorTip').removeClass('sp-errorLogo').addClass("sp-rightLogo");
  347. $(this).next("label").hide().html("");
  348. }
  349. }
  350. //如果没有必填class
  351. if (className.indexOf('sp-required') == -1) {
  352. if (getVal != "" && funResult == false) {
  353. $(this).next("label").show().html(tip);
  354. $(this).removeClass("sp-rightLogo").addClass('sp-errorTip').addClass('sp-errorLogo');
  355. $(this).focus(); return false;
  356. } else if (getVal == "") {
  357. $(this).removeClass('sp-errorTip').removeClass('sp-errorLogo');
  358. $(this).next("label").hide().html("");
  359. }
  360. }
  361. });
  362. });
  363. }
  364. //15.判断两次密码是否一致
  365. spvld.vldpwd = function (createPwd, confirmPwd) {
  366. $(confirmPwd).blur(function () {
  367. var className = $(this).attr('class');
  368. spvld.lblError(this);
  369. var getcreatePwd = $.trim($(createPwd).val());
  370. var getconfirmPwd = $.trim($(this).val());
  371. //如果包含必填class
  372. if (className.indexOf('sp-required') != -1) {
  373. if (getcreatePwd != "" && getconfirmPwd != "" && getcreatePwd != getconfirmPwd && $(this).next("label").is(":hidden")) {
  374. $(this).next("label").show().html("两次输入密码不一致");
  375. $(this).removeClass("sp-rightLogo").addClass('sp-errorTip').addClass('sp-errorLogo');
  376. $(this).focus();
  377. return false;
  378. }
  379. }
  380. //如果没有必填class
  381. if (className.indexOf('sp-required') == -1) {
  382. if (getcreatePwd != "" && getconfirmPwd != "" && getcreatePwd != getconfirmPwd) {
  383. $(this).next("label").show().html("两次输入密码不一致");
  384. $(this).removeClass("sp-rightLogo").addClass('sp-errorTip').addClass('sp-errorLogo');
  385. $(this).focus();
  386. return false;
  387. } else if (getconfirmPwd == "") {
  388. $(this).removeClass('sp-errorTip').removeClass('sp-errorLogo');
  389. $(this).next("label").hide().html("");
  390. }
  391. }
  392. });
  393. }
  394. //成功时清除掉“对号”图片logo
  395. spvld.clear = function (formID) {
  396. $(formID + " .sp-rightLogo").each(function () {
  397. $(this).removeClass("sp-rightLogo");
  398. $(this).next("label").hide();
  399. });
  400. $(formID + " .sp-required").each(function () {
  401. $(this).removeClass("sp-errorTip").removeClass("sp-errorLogo").addClass("sp-requireLogo");
  402. $(this).next("label").hide();
  403. });
  404. }