jQuery 表单验证控件 比较简单

学习jquery, 自己写的一个基于jQuery的表单验证练手 比较简单

 下载地位  http://download.csdn.net/detail/lpy3654321/7816687  不要积分的

页面效果: 

HTML 代码: validate.html

value:  失去焦点Input的value


validate: 	失去焦点Input的validate属性



	

		

			

				1
			
			

				
			
		
		

			

				2minlength
			
			

				
			
		
		

			

				3maxlength能
			
			

				
			
		
		

			

				4
			
			

				
			
		
		

			

				required
			
			

				
			
		
		

			

				6_remote
			
			

				远程数据是假的,存在remote-true.json文件
			
		
		

			

				7_equalTo
			
			

				
			
		
	
	
		another



	  type="submit" 显示验证未通的消息块
	
  type="reset"  重置并隐藏验证未通的消息块

A标签提交  A标签的单击事件触发

JS 代码 jquery-validate-src.js

/*! 
	表单验证
	liupengyuan
 */
(function($){
	
	var options = null;
	
	// TODO 需要这此处完善 验证的元素集合 [textarea , select , input , audio]**************************************
	// 统一调用表单元素选择器selector
	var selector = ":input[type!=submit][type!=reset][type!=button]";
	
	/**
	 * 1.初始化方法
	 * $("form").validate({});
	 * 初始化时,会在每个表单元素后插入一个DIV class为warnValidate,如
  也可以自定义   
	 */
	$.fn.validate = function( _options ){
		options = _options || {};
		
		var $form = $(this);	//form本身
		/*
		 * 统一调用选择器selector
		 * 功能是找到该form表单内的所以表单元素 input select textarea
		 */
		var $inputArr = $form.find(selector);	
		
		// 定义一个dom的jQuery对象
		var after = $(options.after || "
");
		// 初始化时,会在每个表单元素后插入一个DIV class为warnValidate,如
  也可以自定义   
	//	after.attr("id","validate_title_" + $inputArr.context.id || $inputArr.context.name);
		$inputArr.after(after);
		
		/*
		 * 为form添加submit事件,事件内的方法就是验证表单.
		 * 并 return 验证结果 true或false,如果为false就停止submit事件,阻止表单提交.
		 */
		$form.submit(function( e ){
			return validForm( $form );
		});
		
		/*
		 * focus 表单元素得到焦点时隐藏提示块
		 * 当表单元素得到焦点时,说明可能是正在修改表单内容,所以隐藏提示块
		 */
		$inputArr.focus(function( e ){
			
			var $thisInput = $(this);
			expressfadeOut( $thisInput )
			
		});
		
		/*
		 * blur 表单元素失去焦点时开始验证表单
		 * 当表单元素失去焦点时,说明可能已经修改完表单内容,所以需要验证该表单失去焦点的表单
		 */
		$inputArr.blur(function( e ){
			
			var $thisInput = $(this);
			var flag = validInput ($thisInput );
			
		});
		
		
		/*
		 * 当点击到已显示的验证提示信息块时,将该信息块隐藏
		 */
		$(".warnValidate").click(function(){
			$(this).fadeOut(200);
		});
	}
	
	/**
	 * 2.主动验证表单FORM
	 * ajax提交表单,调用此方法
	 * 参数 : $("form").validForm();
	 * 返回值 : boolean true 该表单通过验证; false 该表单未能验通过证
	 */
	$.fn.validForm = function(){
		return validForm( $(this) );
	}
	
	/**
	 * 3.隐藏表单下所有的提示块
	 * 当表单在DIALOG里的时候,关闭DIALOG时,需要调用此方法.
	 * 参数 : $("form").tootipFadeOut();
	 */
	$.fn.tootipFadeOut = function(){
		var tootipArr = $( this ).find(".warnValidate");
		return tootipArr.fadeOut(200);
	}
	
	/**
	 * 验证表单INPUT
	 * 私有方法
	 * 参数 : $input 表单元素的 jquery 对象
	 * 返回值 : boolean 返回true该元素通过验证 ; 返回false该表单未能验通过证
	 */
	validInput = function ( $input ){
		
		var validateRuleStr = $input.attr("validate");
		// 如果元素无validate属性,则略过该元素的验证,继续下一个验证
		if( !validateRuleStr ){
			return true;
		}
	
		
		
		// 验证内容是否通过验证
		var resultArr = valid( $input , validateRuleStr );

		if( resultArr.length <= 0 ){	// 验证通过 返回true
			

			// 如果options 内提供 trueFun 方法,执行用户提供的方法,否则执行默认的 expressfadeOut( $input , resultArr );
			if( options.trueFun ){
				options.trueFun( $input , resultArr );
			}else{
				expressfadeOut( $input , resultArr );
			}
			return true;
			
		}else{	// 验证未通过返回false
			
			// 如果options 内提供 falseFun 方法,执行用户提供的方法,否则执行默认的 expressFadeIn( $input , resultArr );
			if( options.falseFun ){
				options.falseFun( $input , resultArr );
			}else{
				expressFadeIn( $input , resultArr );
			}
			return false;
			
		}
	}
	
	/**
	 * 验证表单FORM
	 * 私有方法
	 * 参数 $obj : form 的 jquery 对象
	 * 返回值 : boolean true 该表单通过验证,可以提交; false 该表单未能验通过证,不可以提交
	 */
	validForm = function( $obj ){
		// 默认是通过验证,但只要其中一项未通过,那么该标识就被赋为 false 
		var flag = true;	
		
		/*
		 * 统一调用选择器selector
		 * 功能是找到该form表单内的所以表单元素 input select textarea
		 */
		var $inputArr = $obj.find( selector );
		
		/*
		 * 对所有表单元素轮循验证
		 * 只要其中的一项未能通过验证,就认为该form不能提交,所以该方法的返回false
		 */
		$inputArr.each(function(i,e){
			if( !validInput( $(e) ) ){
				//如果其中有未能通过验证的,将 flag 标识赋为 false
				flag = false;
			}
		});
		return flag;
	}
	
	/**
	 * 未能通过验证的规则的消息对象数组
	 * 参数 : _contentStr 要验证的内容 String
	 * 		  _ruleStrArr 验证规则 Sting[]
	 * 返回值 : Object[] 未能通过验证的规则的消息对象数组
	 */
	valid = function( $input , validateRuleStr ){
		
		var _contentStr = $input.val();
		//去空格
		var content = $.trim( _contentStr );
		var cc = content||"";
		var vv = validateRuleStr||"";
		$("#content").val(cc);
		$("#rule").val(vv);
		
		var validateRuleObj =  eval( "(" + validateRuleStr+")" );
		
		var resultsArr = new Array();
		for(var o in validateRuleObj){
			var ruleValues = validateRuleObj[o];
			
			if(!ruleValues)continue;
			
			// 调用验证规则对象方法
			var resultObj = ruleObj[o]( content , ruleValues , $input.attr("name") || $input.attr("id"));
			
			//调用验证后的提示消息
			var message = $.extend(messageObj,options.message)[o];
			
			/*
				将提示消息关键字存在数组里,这样比较容易替换占位符
			*/
			var messagesArr = new Array();
			var ruleValuesType =  ( typeof ruleValues ).toLowerCase();
			if(ruleValuesType == "string" || ruleValuesType == "number"){
				messagesArr.push(ruleValues);
			} else if(ruleValues.length){
				for(var i=0;i 0 ,
				ruleValues : ruleValues
			};
			return _result;
		},
		// 使用ajax方法调用   验证输入值
		remote:function( content , ruleValues ,fieldName ){
			var _result = {
		//		result : result ,
				ruleValues : ruleValues
			};
			var _data = {};
			_data[ fieldName ] = content;
			$.ajax({
				url:ruleValues[0] ,
				data : _data ,
				dataType : "json" , type : "post",
				async : false ,
				success:function( result , status , xhr ){
					_result.result = result;
				}
			});
			
			return _result;
		},
		// 必须输入正确格式的电子邮件
		email:function( content , ruleValues ){
			
			var _result = {
				result : /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(content) ,
				ruleValues : ruleValues
			};
			return _result;
		},
		// 必须输入正确格式的网址
		url:function( content , ruleValues ){
			var _result = { 
				result : true ,
				ruleValues : ruleValues
			};
			return _result;
		},
		// 必须输入正确格式的日期
		date:function( content , ruleValues ){
			var _result = { 
				result : !/Invalid|NaN/.test( new Date( content ).toString() ) ,
				ruleValues : ruleValues
			};
			return _result;
		},
		// 必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性
		dateISO:function( content , ruleValues ){
			var _result = { 
				result : /^\d{4}[\/\-](0?[1-9]|1[012])[\/\-](0?[1-9]|[12][0-9]|3[01])$/.test( content ) ,
				ruleValues : ruleValues
			};
			return _result;
		},
		// 必须输入合法的数字(负数，小数)
		number:function( content , ruleValues ){
			var _result = { 
				result : /^-?(?:\d+|\d{1,3}(?:,\d{3})+)?(?:\.\d+)?$/.test( content ) ,
				ruleValues : ruleValues
			};
			return _result;
		},
		// 必须输入整数
		digits:function( content , ruleValues ){
			var _result = { 
				result : /^\d+$/.test( content ) ,
				ruleValues : ruleValues
			};
			return _result;
		},
		// 必须输入合法的信用卡号
		creditcard:function( content , ruleValues ){
			var _result = { 
				result : true ,
				ruleValues : ruleValues
			};
			return _result;
		},
		// 输入值必须和#field相同
		equalTo:function( content , ruleValues ){
			var selector = ruleValues;

			var _result = { 
				result : content === $(selector).val() ,
				ruleValues : ruleValues
			};
			return _result;
		},
		// 输入拥有合法后缀名的字符串（上传文件的后缀）
		accept:function( content , ruleValues ){
			var _result = { 
				result : false ,
				ruleValues : ruleValues
			};
			return _result;
		},
		// 输入长度最多是{0}的字符串(汉字算一个字符)
		maxlength:function( content , ruleValues ){
			var _result = { 
				result :  content.length <=  ruleValues,
				ruleValues : ruleValues
			};
			return _result;
		},
		// 输入长度最小是{0}的字符串(汉字算一个字符)
		minlength:function( content , ruleValues ){
			var _result = { 
				result : content.length >= ruleValues ,
				ruleValues : ruleValues
			};
			return _result;
		},
		// 输入长度必须介于 {0} 和 {1} 之间的字符串)(汉字算一个字符)
		rangelength:function( content , ruleValues ){

			var _result = { 
				result : content.length >=  ruleValues[0] && content.length <= ruleValues[1] ,
				ruleValues : ruleValues
			};
			return _result;
		},
		// 输入值必须介于 {0} 和 {1} 之间
		range:function( content , ruleValues ){
			var _result = { 
				result : false ,
				ruleValues : ruleValues
			};
			return _result;
		},
		// 输入值不能大于{0}
		max:function( content , ruleValues ){
			// 选验证是否为数字
			var numObj = this.number( content , ruleValues );

			var _result = { 
				result : Number(content) <= ruleValues ,
				ruleValues : ruleValues
			};

			return numObj.result ? _result : numObj;
		},
		// 输入值不能小于{0}
		min:function( content , ruleValues ){
			// 选验证是否为数字
			var numObj = this.number( content , ruleValues );
			
			var _result = { 
				result : Number(content) >= ruleValues ,
				ruleValues : ruleValues
			};

			return numObj.result ? _result : numObj;
		}
	}
	
	
	
	/**
	 * 显示在页面弹出提示块信息
	 * 私有方法
	 */
	var expressFadeIn = function( $input , resultArr ){
		
		var width = $input.width();
		var height = 30;
		
		var offset = $input.offset();
		
		var left = offset.left;
		var top = offset.top;
	
		var x = left;
		var y = top - height;//
		
		if( options.offsetX ){
			x = x + options.offsetX;
		}
		
		if( options.offsetY ){
			y = y - options.offsetY;
		}
	
		var cssOjb = {
			"left" : x,
			"top" : y
		};
		$input.next().css( cssOjb ).html("" + resultArr[0].message + "").fadeIn();
	}
	
	/**
	 * 隐藏在页面弹出提示块信息
	 * 私有方法
	 */
	var expressfadeOut = function( $input ){
		$input.next().fadeOut();
	}
	/*
		消息对象
	*/
	var messageObj = {
		required: "必选字段",
		remote: "请修正该字段",
		email: "请输入正确格式的电子邮件",
		url: "请输入合法的网址",
		date: "请输入合法的日期",
		dateISO: "请输入合法的日期 (ISO).",
		number: "请输入合法的数字",
		digits: "只能输入整数",
		creditcard: "请输入合法的信用卡号",
		equalTo: "请再次输入与 {0} 相同的值",
		accept: "请输入拥有合法后缀名的字符串",
		maxlength: "请输入一个 长度最多是 {0} 的字符串",
		minlength: "请输入一个 长度最少是 {0} 的字符串",
		rangelength: "请输入 一个长度介于 {0} 和 {1} 之间的字符串",
		range: "请输入一个介于 {0} 和 {1} 之间的值",
		max: "请输入一个最大为{0} 的值",
		min: "请输入一个最小为{0} 的值"
	}
})(jQuery);