JQuery验证 外一篇

当需要验证的表单元素在页面加载完成后并没有确定时，jquery的验证框架就无能为力了。
于是模仿着自己做了个，备忘下。

$(document).ready(function(){
		var form = $("#form");
		form.find("input[type='text'],textarea").each(function(){
			$(this).bind("keyup",validate);
		});
	});

  	var errorContainer = "#messageBox";//储存失败信息的容器
	var WRAP_ERROR = "li";//错误信息的包装元素
	var ERROR_REQ = "required";//必填项验证失败的错误信息
	var ERROR_INT = "must positive";//必须为正数

	/*
		初始化
	*/
	function init(){
		initContainer();

		//初始化参数
		if(WRAP_ERROR=='')
			WRAP_ERROR = "li";
		//other args
	}

	/*
		初始化消息容器
	*/
	function initContainer(){
		$(errorContainer).html('');
	}

	/*
		验证主方法
		元素的validate属性的取值有：
		required:必填
		int：正数
		math[a-b]:数值在a-b的区间里,形如math[b]则a=0
		len[a-b]:长度在a-b的区间里，形如len[b]则a=0
	*/
	function validate(){
		init();

		//验证所有的含有validate属性的元素
		var f =	"";
		var form = $("#form");
		form.find("input[type='text'],textarea").each(function(){
			var _this = $(this);
			var v = _this.attr("validate");
			var val = _this.val();
			//var name = _this.attr("name");

			if("required"==v){
				f+=vRequired(val);
			}else if("int"==v){
				f+=vInt(val);
			}else if(startWith(v,"math")){
				var a = 0;
				var b = 0;
				if(v.indexOf("-")!=-1){
					a = parseInt(v.substring(v.indexOf("[")+1,v.indexOf("-")));
					b = parseInt(v.substring(v.indexOf("-")+1,v.indexOf("]")));
				}else{
					b = parseInt(v.substring(v.indexOf("[")+1,v.indexOf("]")));
				}
				f+=vMath(val,a,b);
			}else if(startWith(v,"len")){
				var a = 0;
				var b = 0;
				if(v.indexOf("-")!=-1){
					a = parseInt(v.substring(v.indexOf("[")+1,v.indexOf("-")));
					b = parseInt(v.substring(v.indexOf("-")+1,v.indexOf("]")));
				}else{
					b = parseInt(v.substring(v.indexOf("[")+1,v.indexOf("]")));
				}
				f+=vLen(val,a,b);
			}
		});

		if(f.length>0){
			failHandler(f);	
		}else{
			succHandler(f,form);
		}
	}

	/*
		验证成功
		@args f:验证失败消息
		@args form:验证的表单
	*/
	function succHandler(f,form){
		//默认提交
		//form.submit();
	}

	/*
		验证失败
	*/
	function failHandler(f){
		$("#messageBox").html(""+f);
	}


	/*
		验证必填项
	*/
	function vRequired(v){
		if($.trim(v).length<1){
			return "<"+WRAP_ERROR+">"+ERROR_REQ+"</"+WRAP_ERROR+">";
		}else{
			return ""
		}
	}

	/*
		验证是否正数
	*/
	function vInt(v){
		var r = vRequired(v);
		if(r.length>0){
			return r;
		}
		v = $.trim(v);
		if(!/^[0-9]*[1-9][0-9]*$/.test(v)){
			return "<"+WRAP_ERROR+">"+ERROR_INT+"</"+WRAP_ERROR+">";
		}
	}
	/*
		验证数值区间
	*/
	function vMath(v,min,max){
		var r = vRequired(v);
		if(r.length>0){
			return r;
		}else if(!isDigital(v)){
			return "<"+WRAP_ERROR+">"+"must be digtal"+"</"+WRAP_ERROR+">";
		}
		v = parseInt($.trim(v));
		if(v<min || v>max){
			return "<"+WRAP_ERROR+">"+"value must be between"+min+" and "+max+"."+"</"+WRAP_ERROR+">";
		}else{
			return '';
		}
	}
	/*
		验证长度区间
	*/
	function vLen(v,min,max){
		var r = vRequired(v);
		if(r.length>0){
			return r;
		}
		var len = v.length;
		if(len<min || len>max){
			return "<"+WRAP_ERROR+">"+"length must be between "+min+" and "+max+"."+"</"+WRAP_ERROR+">";
		}else{
			return '';
		}
	}

完整的例子见附件。

还有许多要修改和可以扩展的地方。