`

强大的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 的字符串");  
分享到：
| jQuery验证框架的使用
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Jquery验证框架

    使用jQuery验证框架的好处包括： - 简洁的API，易于理解和使用。 - 多种内置验证规则，如必填项、电子邮件格式、数字范围等。 - 自定义错误消息和验证规则，满足个性化需求。 - 支持AJAX验证，无需刷新页面即可验证...

    jQuery好的验证框架

    总的来说，这个中文jQuery验证框架凭借其强大的功能、易用的API和良好的用户体验，成为开发者实现客户端数据验证的首选工具之一。无论是初学者还是经验丰富的开发者，都能从中受益，轻松构建安全、高效的Web应用。

    JQuery验证框架

    JQuery验证框架JQuery验证框架JQuery验证框架

    jquery验证框架学习

    【jQuery验证框架学习】 jQuery是一个广泛使用的JavaScript库，它的核心特性是简化HTML文档遍历、事件处理、动画设计和Ajax交互。本教程旨在带你深入了解jQuery验证框架，这是一套用于前端数据验证的工具，能够帮助...

    jquery验证框架使用

    总结，jQuery验证框架提供了一套强大且灵活的验证机制，适用于各种前端表单场景。通过理解并掌握其基本用法、自定义规则、事件处理以及高级特性，开发者能够创建出更加健壮、用户体验良好的表单验证系统。

    很不错的验证框架jquery

    - **兼容性**：依赖jQuery，可能不适合那些不使用jQuery或使用其他JS库的项目。 - **更新频率**：相比于新兴的前端框架，jQuery Validation Plugin的更新速度相对较慢，可能无法及时跟进最新的前端开发趋势。 在...

    jquery 前端验证框架

    **二、jQuery验证框架的重要性** 前端验证不仅能够即时反馈用户输入错误，提高用户交互体验，还能减少服务器端的压力，避免无效请求。jQuery的验证框架提供了一套灵活、可定制的验证规则，使开发者可以快速构建表单...

    jQuery验证框架学习笔记.pdf

    jQuery验证框架是一个强大的JavaScript库，用于在客户端进行表单验证，极大地提高了用户界面的交互性和用户体验。本笔记主要涵盖了框架的各个重要方面，包括可选项、插件方法、选择器和实用工具、验证器、内置验证...

    jquery验证框架学习教程

    jQuery验证框架学习教程详细介绍了jQuery及其验证插件的使用方法，旨在帮助开发者快速掌握jQuery这一强大的JavaScript库，并学会如何使用其提供的验证功能来增强Web应用的用户交互体验。 首先，jQuery是一个开源的...

    jquery验证框架,好用实用。。。

    **jQuery验证框架详解** jQuery Validate 是一个非常流行的前端验证插件，它为HTML表单提供了强大的验证功能。这个插件是jQuery库的一个扩展，能够帮助开发者轻松实现对用户输入数据的有效性检查，确保数据在提交前...

    jQuery验证框架内置验证方法validate

    jQuery验证框架，即`jquery.validate.js`，是一款非常实用的JavaScript库，它为Web开发者提供了简单而强大的客户端表单验证功能。通过使用此插件，可以轻松实现各种复杂的验证逻辑，从而确保用户提交的数据符合预期...

    jQuery验证框架

    10. **最佳实践**：在实际项目中，合理使用jQuery验证框架可以提高代码的可维护性和可扩展性。开发者应遵循良好的编程习惯，如模块化、注释清晰、避免硬编码等。 总之，jQuery验证框架为前端开发带来了极大的便利，...

    JQuery验证框架 （实用）

    以上代码演示了如何使用jQuery验证框架对邮箱字段进行必填和格式验证，并在验证成功后提交表单。 **五、拓展与优化** 1. **自定义验证插件**：如果内置的验证规则不能满足需求，可以通过扩展验证插件来增加新功能。...

    jQuery验证框架[收集].pdf

    在使用jQuery验证框架时，我们可以设置一系列可选参数（options）来定制验证行为。例如，我们可以设定是否显示错误信息、错误信息的位置、错误信息的显示方式等。例如： ```javascript $("#myForm").validate({ ...

    jQuery表单验证框架

    首先，要使用jQuery Validate，你需要引入jQuery库以及jQuery Validate的JavaScript文件。在示例代码中，我们看到以下引入： ```html &lt;script type="text/javascript" src="js/jquery-min.js"&gt; ...

    jquery验证框架

    1. **引入库**：使用jQuery验证框架首先需要引入jQuery库以及验证插件的JavaScript文件。通常，我们会将这两个文件放在HTML文档的`&lt;head&gt;`标签内，确保在页面加载时即可执行验证。 2. **初始化验证**：通过调用`$(...

    jquery验证框架，formValidator4.0.1

    《jQuery验证框架FormValidator 4.0.1详解》 jQuery FormValidator 4.0.1是一款高效且易于使用的文本验证框架，它为开发者提供了强大的表单验证功能，简化了前端数据验证的复杂性，使得网页应用的用户体验更加完善...

    JQuery验证框架及事例

    **jQuery验证框架及事例** jQuery是一个强大的JavaScript库，它简化了HTML文档遍历、事件处理、动画制作以及Ajax交互。在本资源包中，我们重点关注的是jQuery在表单验证和分页方面的应用。 **一、jQuery验证框架**...

Magicbox
Global site tag (gtag.js) - Google Analytics