JQuery 简便实现页面元素数据验证功能

ASP.NET提供了丰富的数据验证控件，但这个验证功能都必须运用在服务器控件中；在复合验证数据时使用也不是很方便（虽然拖放控件很方便，但拖放数增多和设置相关属性就变得很麻烦的事情）。为了更方便灵活地实现验证功能，于是采用了JQuery编写了一个简单验证组件，在使用时只需要简单的描述一下验证规则，并不需要写一句JavaScript就可以实现具备ASP.NET验证控件的功能（当然页面要引入相关JavaScript文件）。
功能目标
通过简单的自定义属性值描述具体的验证功能，当Form提交自动拦载执行验证功能。如果所有成员验证成功就提交，否则取消提交。
简单使用描述：
复制代码 代码如下:



实现要点
利用JQuery提供的素元查找功能，方便查找出需要验证的元素对象;通过$(document).ready事件进很验证代码的初始化和执行的切入工作。
定义验证规则描述属性,在初始化时对相关验证描述进行分解和集成处理。
拦载Form提交过程进行验证处理，根据情况确定是否提交数据。
元素对象在发生onchange事件时自动执行验证处理功能。
通过alert和自定义区域显示错误信息。
具体JavaScript代码
实现代码并不复杂只有几百行，由于相关代码比较简单所以没有编写注解.
具体代码：
复制代码 代码如下:
//JScript文件
//
//type:int|number|date|string
//nonnull:true|false
//regex:^[-+]?d+$
//min:0
//max:999999999
//campare:id
//comparetype:eq,neq,leq,req,le,ri
//tipcontrol:
//tip:
//
varErrorMessage;
functionFormValidate(form)
{
ErrorMessage='';
varlegality,items;
legality=true;
items=$(form).find("input[@validator]");
for(vari=0;i{
if(legality)
{
legality=OnItemValidator($(items[i]));
}
else
{
OnItemValidator($(items[i]));
}
}
items=$(form).find("textarea[@validator]");
for(vari=0;i{
if(legality)
{
legality=OnItemValidator($(items[i]));
}
else
{
OnItemValidator($(items[i]));
}
}
items=$(form).find("select[@validator]");
for(vari=0;i{
if(legality)
{
legality=OnItemValidator($(items[i]));
}
else
{
OnItemValidator($(items[i]));
}
}
if(!legality)
{
if(ErrorMessage!='')
alert(ErrorMessage);
}
returnlegality;
}
functionCreateValObject(validator)
{
varvalobj={type:'string',
nonnull:false,
regex:null,
min:null,
max:null,
campare:null,
comparetype:null,
tipcontrol:null,
tip:null};
varproperties;
varexecute;
varnamevalue;
properties=validator.split(';');
for(i=0;i{
namevalue=properties[i].split(':');
execute="valobj."+namevalue[0]+'=''+namevalue[1]+'';';
eval(execute);
}
returnvalobj;
}
functionOnItemValidator(control)
{
varregex,maxvalue,minvalue,cvalue;
varvalobj=CreateValObject(control.attr('validator'));
varvalue=control.val();
value=ValidatorConvert(value,valobj.type);
if(valobj.nonnull=="true")
{
if(value==null||value=="")
{
ValidatorError(valobj);
returnfalse;
}
}
else
{
if(value==null||value=="")
returntrue;
}
if(valobj.regex!=null)
{
regex=newRegExp(valobj.regex);
if(value.match(regex)==null)
{
ValidatorError(valobj);
returnfalse;
}
}
if(valobj.min!=null)
{
minvalue=ValidatorConvert(valobj.min,valobj.type);
if(!CompareValue(value,minvalue,"req"))
{
ValidatorError(valobj);
returnfalse;
}
}
if(valobj.max!=null)
{
maxvalue=ValidatorConvert(valobj.max,valobj.type);
if(!CompareValue(value,maxvalue,"leq"))
{
ValidatorError(valobj);
returnfalse;
}
}
if(valobj.campare!=null)
{
cvalue=$('#'+valobj.campare).val();
cvalue=ValidatorConvert(cvalue,valobj.type);
if(!CompareValue(value,cvalue,valobj.comparetype))
{
ValidatorError(valobj);
returnfalse;
}
}
returntrue;
}
functionValidatorError(valobj)
{
if(valobj.tipcontrol!=null)
showTip($("#"+valobj.tipcontrol));
else
{
if(ErrorMessage!='')
ErrorMessage+='n';
ErrorMessage+=valobj.tip;
}
}
functionCompareValue(leftvalue,rightvalue,compareType)
{
if(leftvalue==null||rightvalue==null)
returnfalse;
if(compareType=="eq")
{
returnleftvalue==rightvalue;
}
elseif(compareType=="neq")
{
returnleftvalue!=rightvalue;
}
elseif(compareType=="le")
{
returnleftvalue}
elseif(compareType=="leq")
{
returnleftvalue<=rightvalue;
}
elseif(compareType=="ri")
{
returnleftvalue>rightvalue;
}
elseif(compareType=="req")
{
returnleftvalue>=rightvalue;
}
else
{
returnfalse;
}
}
functionshowTip(control)
{
if(control.attr('show')!='on')
{
control.fadeIn("slow");
control.attr('show','on');
}
}
functionhideTip(control)
{
control.hide();
control.attr('show','');
}
functionValidatorConvert(value,dataType){
varnum,exp,m;
varyear,month,day
if(value==null||value=="")
returnnull;
if(dataType=="int")
{
exp=/^[-+]?d+$/;
if(value.match(exp)==null)
returnnull;
num=parseInt(value,10);
return(isNaN(num)?null:num);
}
elseif(dataType=="number")
{
exp=/^[-+]?((d+)|(d+.d+))$/;
if(value.match(exp)==null)
returnnull;
num=parseFloat(value);
return(isNaN(num)?null:num);
}
elseif(dataType=="date")
{
exp=/^(d{4})([-/]?)(d{1,2})([-/]?)(d{1,2})$/
m=value.match(exp);
if(m==null)
{
exp=/^(d{1,2})([-/]?)(d{1,2})([-/]?)(d{4})$/
m=value.match(exp);
if(m==null)
returnnull;
year=m[5];
month=m[1];
day=m[3];
}
else
{
year=m[1];
month=m[3];
day=m[5];
}
try
{
num=newDate(year,month,day);
}
catch(e)
{
returnnull;
}
returnnum;
}
else
{
returnvalue.toString();
}
}
$(document).ready(
function(){
$("[@validator]").each(function(i)
{
varvalobj=CreateValObject($(this).attr('validator'));
if(valobj.tipcontrol!=null)
{
$('#'+valobj.tipcontrol).addClass('ErrorTip');
hideTip($('#'+valobj.tipcontrol));
$("#"+valobj.tipcontrol).html(""+valobj.tip+"");
}
$(this).change(function(){
if(OnItemValidator($(this)))
{
if(valobj.tipcontrol!=null)
{
hideTip($('#'+valobj.tipcontrol));
}
}
else
{
if(valobj.tipcontrol!=null)
{
showTip($('#'+valobj.tipcontrol));
}
}
});
}
);
$("form").each(function(id)
{
$(this).submit(function(){returnFormValidate(this)});
}
);
}
);

下载相关例程代码