`
mushme
  • 浏览: 790156 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

强大的jquery验证框架

框架jQueryIEHTMLJ# 
阅读更多
jquery的验证太强大了，很容易就可以上手了，长度，必填，自定义检验，都可以很方便
以下是一些数据的正则和脚本 
<!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>

别人写的一个强大的检测 
$(document).ready(function(){ 

/* 设置默认属性 */ 
$.validator.setDefaults({ 
  submitHandler: function(form) { form.submit(); } 
}); 
// 中文字两个字节 
jQuery.validator.addMethod("byteRangeLength", function(value, element, param) { 
  var length = value.length; 
  for(var i = 0; i < value.length; i++){ 
   if(value.charCodeAt(i) > 127){ 
    length++; 
   } 
  } 
  return this.optional(element) || ( length >= param[0] && length <= param[1] ); 
}, "请确保输入的值在3-15个字节之间(一个中文字算2个字节)"); 

/* 追加自定义验证方法 */ 
// 身份证号码验证 
jQuery.validator.addMethod("isIdCardNo", function(value, element) { 
  return this.optional(element) || isIdCardNo(value); 
}, "请正确输入您的身份证号码"); 

// 字符验证 
jQuery.validator.addMethod("userName", function(value, element) { 
  return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value); 
}, "用户名只能包括中文字、英文字母、数字和下划线"); 

// 手机号码验证 
jQuery.validator.addMethod("isMobile", function(value, element) { 
  var length = value.length; 
  return this.optional(element) || (length == 11 && /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/.test(value)); 
}, "请正确填写您的手机号码"); 

// 电话号码验证 
jQuery.validator.addMethod("isPhone", function(value, element) { 
  var tel = /^(\d{3,4}-?)?\d{7,9}$/g; 
  return this.optional(element) || (tel.test(value)); 
}, "请正确填写您的电话号码"); 

// 邮政编码验证 
jQuery.validator.addMethod("isZipCode", function(value, element) { 
  var tel = /^[0-9]{6}$/; 
  return this.optional(element) || (tel.test(value)); 
}, "请正确填写您的邮政编码"); 
$(regFrom).validate({ 
/* 设置验证规则 */ 
  rules: { 
   userName: { 
    required: true, 
    userName: true, 
    byteRangeLength: [3,15] 
   }, 
   password: { 
    required: true, 
    minLength: 5 
   }, 
   repassword: { 
    required: true, 
    minLength: 5, 
    equalTo: "#password" 
   }, 
   question: { 
    required: true 
   }, 
   answer: { 
    required: true 
   }, 
   realName: { 
    required: true 
   }, 
   cardNumber: { 
    isIdCardNo: true 
   }, 
   mobilePhone: { 
    isMobile: true 
   }, 
   phone: { 
    isPhone: true 
   }, 
   email: { 
    required: true, 
    email: true 
   }, 
   zipCode: { 
    isZipCode:true 
   } 
  }, 
/* 设置错误信息 */ 
  messages: { 
   userName: { 
    required: "请填写用户名", 
    byteRangeLength: "用户名必须在3-15个字符之间(一个中文字算2个字符)" 
   }, 
   password: { 
    required: "请填写密码", 
    minlength: jQuery.format("输入{0}.") 
   }, 
   repassword: { 
    required: "请填写确认密码", 
    equalTo: "两次密码输入不相同" 
   }, 
   question: { 
    required: "请填写您的密码提示问题" 
   }, 
   answer: { 
    required: "请填写您的密码提示答案" 
   }, 
   realName: { 
    required: "请填写您的真实姓名" 
   }, 
   email: { 
    required: "请输入一个Email地址", 
    email: "请输入一个有效的Email地址" 
   } 
  }, 
/* 错误信息的显示位置 */ 
  errorPlacement: function(error, element) { 
   error.appendTo( element.parent() ); 
  }, 
/* 验证通过时的处理 */ 
  success: function(label) { 
   // set   as text for IE 
   label.html(" ").addClass("checked"); 
  }, 
/* 获得焦点时不验证 */ 
  focusInvalid: false, 
  onkeyup: false 
}); 

// 输入框获得焦点时，样式设置 
$('input').focus(function(){ 
  if($(this).is(":text") || $(this).is(":password")) 
   $(this).addClass('focus'); 
  if ($(this).hasClass('have_tooltip')) { 
   $(this).parent().parent().removeClass('field_normal').addClass('field_focus'); 
  } 
}); 

// 输入框失去焦点时，样式设置 
$('input').blur(function() { 
  $(this).removeClass('focus'); 
  if ($(this).hasClass('have_tooltip')) { 
   $(this).parent().parent().removeClass('field_focus').addClass('field_normal'); 
  } 
}); 
}); 

jQuery.validator.addMethod("decimal", function(value, element) {
var decimal = /^-?\d+(\.\d{1,2})?$/;
return this.optional(element) || (decimal.test(value));
}, $.validator.format("小数位数不能超过两位!"));

//自定义验证方法 检查长度小于等于100
jQuery.validator
.addMethod("MaxLength100",
function(value, element) {
$(element).blur(function() {
	$(element).val($.trim($(element).val()));
});
var length = value.replace(/[^\x00-\xff]/g,"**").length;
return this.optional(element)|| (length <= 100);
}, "请输入一个长度最多是 100 的字符串");


其他连接：http://www.cnblogs.com/weiqt/articles/2013800.html
分享到：
| 复制内容的js，通过json来实现
评论
发表评论

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

相关推荐

    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