当前位置： 代码迷 >> Web前端 >> 强大的jquery应验框架
  详细解决方案

强大的jquery应验框架

热度：236   发布时间：2013-02-24 17:58:56.0
强大的jquery验证框架

jquery的验证太强大了，很容易就可以上手了，长度，必填，自定义检验，都可以很方便
以下是一些数据的正则和脚本

Html代码 复制代码?收藏代码
  1. <!DOCTYPE?HTML?PUBLIC?"-//W3C//DTD?HTML?4.01?Transitional//EN">??
  2. <html>??
  3. ??<head>??
  4. ????<title>validate.html</title>??
  5. ????<meta?http-equiv="content-type"?content="text/html;?charset=UTF-8">??
  6. ????<script?type="text/javascript"?src="scripts/jQuery/jquery-1.3.2.js"></script>??
  7. ????<script?type="text/javascript"?src="scripts/jQuery/plugins/jquery.validate.js"></script>??
  8. ????<script?type="text/javascript"?src="scripts/jQuery/plugins/jquery.validate.messages_cn.js"></script>??
  9. ??</head>??
  10. <body>??
  11. ????<form?action=""?id="myForm">??
  12. ????????<input?id="userName"?name="userName"?/><em>*</em>??
  13. ????????<input?id="age"?name="age"/><em>*</em>??
  14. ????????<input?id="birthday"?name="birthday"/><em>*</em>??
  15. ????????<input?id="tel"?name="tel"/><em>*</em>??
  16. ????????<input?type="submit"?value="提交"?/>??
  17. ????</form>??
  18. ???? ??
  19. ????<script?type="text/javascript">??
  20. ???? ??
  21. ????$().ready(function()?{ ??
  22. ??????????initValidate(); ??
  23. ????}); ??
  24. ???? ??
  25. ????jQuery.validator.addMethod("istel",?function(value,?element)?{ ??
  26. ???????var?decimal?=?/^-?\d+(\.\d{1,2})?$/; ??
  27. ???????return?this.optional(element)?||?(fucCheckTEL(value)); ??
  28. ??????},?$.validator.format("不合法的电话号码!"));? ??
  29. ?????????????????? ??
  30. ????//电话号码 ??
  31. ????function?fucCheckTEL(TEL)????? ??
  32. ????{????? ??
  33. ????????var?i,j,strTemp;????? ??
  34. ????????strTemp="0123456789-()#?";????? ??
  35. ????????for?(i=0;i<TEL.length;i++)????? ??
  36. ????????{????? ??
  37. ????????????j=strTemp.indexOf(TEL.charAt(i));????? ??
  38. ????????????if?(j==-1)????? ??
  39. ????????????{????? ??
  40. ????????????????//说明有字符不合法????? ??
  41. ????????????????return?false;????? ??
  42. ????????????}????? ??
  43. ????????}????? ??
  44. ????????//说明合法????? ??
  45. ????????return?true;????? ??
  46. ????}? ??
  47. ?????????????????? ??
  48. ????function?initValidate()?{ ??
  49. ????????$("#myForm").validate({ ??
  50. ????????rules?:?{ ??
  51. ????????????????'userName':?{ ??
  52. ????????????????????"required"?:?true, ??
  53. ????????????????????"minlength":10 ??
  54. ????????????????}, ??
  55. ????????????????'age'?:?{ ??
  56. ????????????????????"required"?:?true ??
  57. ????????????????}, ??
  58. ????????????????'birthday'?:?{ ??
  59. ????????????????????"required"?:?true ??
  60. ????????????????}, ??
  61. ????????????????'tel'?:?{ ??
  62. ????????????????????"required"?:?true, ??
  63. ????????????????????"istel":true ??
  64. ????????????????} ??
  65. ????????????} ??
  66. ????????}); ??
  67. ????} ??
  68. ????</script>??
  69. </body>??
  70. </html>?? 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>validate.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="scripts/jQuery/jquery-1.3.2.js"></script>
    <script type="text/javascript" src="scripts/jQuery/plugins/jquery.validate.js"></script>
    <script type="text/javascript" src="scripts/jQuery/plugins/jquery.validate.messages_cn.js"></script>
  </head>
<body>
	<form action="" id="myForm">
		<input id="userName" name="userName" /><em>*</em>
		<input id="age" name="age"/><em>*</em>
		<input id="birthday" name="birthday"/><em>*</em>
		<input id="tel" name="tel"/><em>*</em>
		<input type="submit" value="提交" />
	</form>
	
	<script type="text/javascript">
	
	$().ready(function() {
          initValidate();
	});
	
	jQuery.validator.addMethod("istel", function(value, element) {
	   var decimal = /^-?\d+(\.\d{1,2})?$/;
	   return this.optional(element) || (fucCheckTEL(value));
	  }, $.validator.format("不合法的电话号码!")); 
				  
	//电话号码
	function fucCheckTEL(TEL)     
	{     
		var i,j,strTemp;     
		strTemp="0123456789-()# ";     
		for (i=0;i<TEL.length;i++)     
		{     
			j=strTemp.indexOf(TEL.charAt(i));     
			if (j==-1)     
			{     
				//说明有字符不合法     
				return false;     
			}     
		}     
		//说明合法     
		return true;     
	} 
				  
	function initValidate() {
		$("#myForm").validate({
		rules : {
				'userName': {
					"required" : true,
					"minlength":10
				},
				'age' : {
					"required" : true
				},
				'birthday' : {
					"required" : true
				},
				'tel' : {
					"required" : true,
					"istel":true
				}
			}
		});
	}
	</script>
</body>
</html>


别人写的一个强大的检测

Html代码 复制代码?收藏代码
  1. $(document).ready(function(){? ??
  2. ??
  3. /*?设置默认属性?*/? ??
  4. $.validator.setDefaults({? ??
  5. ??submitHandler:?function(form)?{?form.submit();?}? ??
  6. });? ??
  7. //?中文字两个字节? ??
  8. jQuery.validator.addMethod("byteRangeLength",?function(value,?element,?param)?{? ??
  9. ??var?length?=?value.length;? ??
  10. ??for(var?i?=?0;?i?<?value.length;?i++){? ??
  11. ???if(value.charCodeAt(i)?>?127){? ??
  12. ????length++;? ??
  13. ???}? ??
  14. ??}? ??
  15. ??return?this.optional(element)?||?(?length?>=?param[0]?&&?length?<=?param[1]?);? ??
  16. },?"请确保输入的值在3-15个字节之间(一个中文字算2个字节)");? ??
  17. ??
  18. /*?追加自定义验证方法?*/? ??
  19. //?身份证号码验证? ??
  20. jQuery.validator.addMethod("isIdCardNo",?function(value,?element)?{? ??
  21. ??return?this.optional(element)?||?isIdCardNo(value);? ??
  22. },?"请正确输入您的身份证号码");? ??
  23. ??
  24. //?字符验证? ??
  25. jQuery.validator.addMethod("userName",?function(value,?element)?{? ??
  26. ??return?this.optional(element)?||?/^[\u0391-\uFFE5\w]+$/.test(value);? ??
  27. },?"用户名只能包括中文字、英文字母、数字和下划线");? ??
  28. ??
  29. //?手机号码验证? ??
  30. jQuery.validator.addMethod("isMobile",?function(value,?element)?{? ??
  31. ??var?length?=?value.length;? ??
  32. ??return?this.optional(element)?||?(length?==?11?&&?/^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/.test(value));? ??
  33. },?"请正确填写您的手机号码");? ??
  34. ??
  35. //?电话号码验证? ??
  36. jQuery.validator.addMethod("isPhone",?function(value,?element)?{? ??
  37. ??var?tel?=?/^(\d{3,4}-?)?\d{7,9}$/g;? ??
  38. ??return?this.optional(element)?||?(tel.test(value));? ??
  39. },?"请正确填写您的电话号码");? ??
  40. ??
  41. //?邮政编码验证? ??
  42. jQuery.validator.addMethod("isZipCode",?function(value,?element)?{? ??
  43. ??var?tel?=?/^[0-9]{6}$/;? ??
  44. ??return?this.optional(element)?||?(tel.test(value));? ??
  45. },?"请正确填写您的邮政编码");? ??
  46. $(regFrom).validate({? ??
  47. /*?设置验证规则?*/? ??
  48. ??rules:?{? ??
  49. ???userName:?{? ??
  50. ????required:?true,? ??
  51. ????userName:?true,? ??
  52. ????byteRangeLength:?[3,15]? ??
  53. ???},? ??
  54. ???password:?{? ??
  55. ????required:?true,? ??
  56. ????minLength:?5? ??
  57. ???},? ??
  58. ???repassword:?{? ??
  59. ????required:?true,? ??
  60. ????minLength:?5,? ??
  61. ????equalTo:?"#password"? ??
  62. ???},? ??
  63. ???question:?{? ??
  64. ????required:?true? ??
  65. ???},? ??
  66. ???answer:?{? ??
  67. ????required:?true? ??
  68. ???},? ??
  69. ???realName:?{? ??
  70. ????required:?true? ??
  71. ???},? ??
  72. ???cardNumber:?{? ??
  73. ????isIdCardNo:?true? ??
  74. ???},? ??
  75. ???mobilePhone:?{? ??
  76. ????isMobile:?true? ??
  77. ???},? ??
  78. ???phone:?{? ??
  79. ????isPhone:?true? ??
  80. ???},? ??
  81. ???email:?{? ??
  82. ????required:?true,? ??
  83. ????email:?true? ??
  84. ???},? ??
  85. ???zipCode:?{? ??
  86. ????isZipCode:true? ??
  87. ???}? ??
  88. ??},? ??
  89. /*?设置错误信息?*/? ??
  90. ??messages:?{? ??
  91. ???userName:?{? ??
  92. ????required:?"请填写用户名",? ??
  93. ????byteRangeLength:?"用户名必须在3-15个字符之间(一个中文字算2个字符)"? ??
  94. ???},? ??
  95. ???password:?{? ??
  96. ????required:?"请填写密码",? ??
  97. ????minlength:?jQuery.format("输入{0}.")? ??
  98. ???},? ??
  99. ???repassword:?{? ??
  100. ????required:?"请填写确认密码",? ??
  101. ????equalTo:?"两次密码输入不相同"? ??
  102. ???},? ??
  103. ???question:?{? ??
  104. ????required:?"请填写您的密码提示问题"? ??
  105. ???},? ??
  106. ???answer:?{? ??
  107. ????required:?"请填写您的密码提示答案"? ??
  108. ???},? ??
  109. ???realName:?{? ??
  110. ????required:?"请填写您的真实姓名"? ??
  111. ???},? ??
  112. ???email:?{? ??
  113. ????required:?"请输入一个Email地址",? ??
  114. ????email:?"请输入一个有效的Email地址"? ??
  115. ???}? ??
  116. ??},? ??
  117. /*?错误信息的显示位置?*/? ??
  118. ??errorPlacement:?function(error,?element)?{? ??
  119. ???error.appendTo(?element.parent()?);? ??
  120. ??},? ??
  121. /*?验证通过时的处理?*/? ??
  122. ??success:?function(label)?{? ??
  123. ???//?set???as?text?for?IE? ??
  124. ???label.html("?").addClass("checked");? ??
  125. ??},? ??
  126. /*?获得焦点时不验证?*/? ??
  127. ??focusInvalid:?false,? ??
  128. ??onkeyup:?false? ??
  129. });? ??
  130. ??
  131. //?输入框获得焦点时，样式设置? ??
  132. $('input').focus(function(){? ??
  133. ??if($(this).is(":text")?||?$(this).is(":password"))? ??
  134. ???$(this).addClass('focus');? ??
  135. ??if?($(this).hasClass('have_tooltip'))?{? ??
  136. ???$(this).parent().parent().removeClass('field_normal').addClass('field_focus');? ??
  137. ??}? ??
  138. });? ??
  139. ??
  140. //?输入框失去焦点时，样式设置? ??
  141. $('input').blur(function()?{? ??
  142. ??$(this).removeClass('focus');? ??
  143. ??if?($(this).hasClass('have_tooltip'))?{? ??
  144. ???$(this).parent().parent().removeClass('field_focus').addClass('field_normal');? ??
  145. ??}? ??
  146. });? ??
  147. });? ??
  148. ??
  149. jQuery.validator.addMethod("decimal",?function(value,?element)?{ ??
  150. var?decimal?=?/^-?\d+(\.\d{1,2})?$/; ??
  151. return?this.optional(element)?||?(decimal.test(value)); ??
  152. },?$.validator.format("小数位数不能超过两位!")); ??
  153. ??
  154. //自定义验证方法?检查长度小于等于100 ??
  155. jQuery.validator ??
  156. .addMethod("MaxLength100", ??
  157. function(value,?element)?{ ??
  158. $(element).blur(function()?{ ??
  159. ????$(element).val($.trim($(element).val())); ??
  160. }); ??
  161. var?length?=?value.replace(/[^\x00-\xff]/g,"**").length; ??
  162. return?this.optional(element)||?(length?<=?100); ??
  163. },?"请输入一个长度最多是?100?的字符串");??
  相关解决方案

代码迷 - 您身边的软件异常，代码异常，编程异常助手（发现，解决，分享）
Copyright © 2009-2013 DAIMAMI.COM. All rights reserved.