强大的jquery验证框架

最新推荐文章于 2024-05-23 22:33:59 发布

mush_me

最新推荐文章于 2024-05-23 22:33:59 发布

阅读量82

点赞数

分类专栏： javascript相关文章标签：框架 jQuery IE HTML J# ViewUI

本文链接：https://blog.csdn.net/mush_me/article/details/83814708

版权

javascript相关专栏收录该内容

22 篇文章 0 订阅

订阅专栏

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 的字符串");