ASP.NET提供了丰富的数据验证控件，但这个验证功能都必须运用在服务器控件中；在复合验证数据时使用也不是很方便（虽然拖放控件很方便，但拖放数增多和设置相关属性就变得很麻烦的事情）。为了更方便灵活地实现验证功能，于是采用了JQuery编写了一个简单验证组件，在使用时只需要简单的描述一下验证规则，并不需要写一句JavaScript就可以实现具备ASP.NET验证控件的功能（当然页面要引入相关JavaScript文件）。 功能目标 通过简单的自定义属性值描述具体的验证功能，当Form提交自动拦载执行验证功能。如果所有成员验证成功就提交，否则取消提交。 简单使用描述： 复制代码 代码如下:<input id="Text1" type="text" validator="type:string;nonnull:true;tip:请输入用户名!;tipcontrol:nametip" /> <input id="Text2" type="text" validator="type:date;nonnull:true;tip:请输入正确的出生日期!;tipcontrol:birthtip;min:1950-1-1;max:2000-1-1" /> 实现要点 利用JQuery提供的素元查找功能，方便查找出需要验证的元素对象;通过$(document).ready事件进很验证代码的初始化和执行的切入工作。 定义验证规则描述属性,在初始化时对相关验证描述进行分解和集成处理。 拦载Form提交过程进行验证处理，根据情况确定是否提交数据。 元素对象在发生onchange事件时自动执行验证处理功能。 通过alert和自定义区域显示错误信息。 具体JavaScript代码 实现代码并不复杂只有几百行，由于相关代码比较简单所以没有编写注解. 具体代码： 复制代码 代码如下:// JScript 文件 //<validator> //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: //</validator> var ErrorMessage; function FormValidate(form) { ErrorMessage=''; var legality,items; legality = true; items = $(form).find("input[@validator]"); for(var i =0;i< items.length;i++) { if(legality) { legality = OnItemValidator($(items[i])); } else { OnItemValidator($(items[i])); } } items = $(form).find("textarea[@validator]"); for(var i =0;i< items.length;i++) { if(legality) { legality = OnItemValidator($(items[i])); } else { OnItemValidator($(items[i])); } } items = $(form).find("select[@validator]"); for(var i =0;i< items.length;i++) { if(legality) { legality = OnItemValidator($(items[i])); } else { OnItemValidator($(items[i])); } } if(!legality) { if(ErrorMessage !='') alert(ErrorMessage); } return legality; } function CreateValObject(validator) { var valobj = { type:'string', nonnull:false, regex:null, min:null, max:null, campare:null, comparetype:null, tipcontrol:null, tip:null}; var properties; var execute; var namevalue; properties = validator.split(';'); for(i=0;i<properties.length;i++) { namevalue = properties[i].split(':'); execute ="valobj." + namevalue[0] +'=''+ namevalue[1]+'';'; eval(execute); } return valobj; } function OnItemValidator(control) { var regex,maxvalue,minvalue,cvalue; var valobj = CreateValObject(control.attr('validator')); var value = control.val(); value = ValidatorConvert(value,valobj.type); if(valobj.nonnull=="true") { if(value == null || value=="") { ValidatorError(valobj); return false; } } else { if(value == null || value=="") return true; } if(valobj.regex != null) { regex =new RegExp(valobj.regex); if(value.match(regex) == null) { ValidatorError(valobj); return false; } } if(valobj.min != null) { minvalue = ValidatorConvert(valobj.min,valobj.type); if(!CompareValue(value,minvalue,"req")) { ValidatorError(valobj); return false; } } if(valobj.max != null) { maxvalue = ValidatorConvert(valobj.max,valobj.type); if(!CompareValue(value,maxvalue,"leq")) { ValidatorError(valobj); return false; } } if(valobj.campare != null) { cvalue = $('#' + valobj.campare).val(); cvalue = ValidatorConvert(cvalue,valobj.type); if(!CompareValue(value,cvalue,valobj.comparetype)) { ValidatorError(valobj); return false; } } return true; } function ValidatorError(valobj) { if(valobj.tipcontrol != null) showTip($("#"+ valobj.tipcontrol)); else { if(ErrorMessage !='') ErrorMessage += 'n'; ErrorMessage += valobj.tip; } } function CompareValue(leftvalue,rightvalue,compareType) { if(leftvalue == null || rightvalue == null) return false; if(compareType=="eq") { return leftvalue == rightvalue; } else if(compareType =="neq") { return leftvalue != rightvalue; } else if(compareType =="le") { return leftvalue < rightvalue; } else if(compareType =="leq") { return leftvalue <= rightvalue; } else if(compareType =="ri") { return leftvalue > rightvalue; } else if(compareType =="req") { return leftvalue >= rightvalue; } else { return false; } } function showTip(control) { if(control.attr('show') != 'on') { control.fadeIn("slow"); control.attr('show','on'); } } function hideTip(control) { control.hide(); control.attr('show',''); } function ValidatorConvert(value, dataType) { var num,exp,m; var year,month,day if(value == null || value =="") return null; if(dataType=="int") { exp=/^[-+]?d+$/; if (value.match(exp) == null) return null; num = parseInt(value, 10); return (isNaN(num) ? null : num); } else if(dataType =="number") { exp=/^[-+]?((d+)|(d+.d+))$/; if (value.match(exp) == null) return null; num = parseFloat(value); return (isNaN(num) ? null : num); } else if(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) return null; year = m[5]; month = m[1]; day =m[3]; } else { year = m[1]; month =m[3]; day = m[5]; } try { num = new Date(year,month,day); } catch(e) { return null; } return num; } else { return value.toString(); } } $(document).ready( function(){ $("[@validator]").each(function(i) { var valobj = CreateValObject($(this).attr('validator')); if(valobj.tipcontrol !=null) { $('#' + valobj.tipcontrol).addClass('ErrorTip'); hideTip($('#' + valobj.tipcontrol)); $("#"+ valobj.tipcontrol).html("<NOBR>"+valobj.tip+"</NOBR>"); } $(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(){return FormValidate(this)}); } ); } ); 下载相关例程代码

　　推荐阅读

　　驱动事件的addEvent.js代码

复制代码 代码如下:Array.prototype.inArray = function (value) { var i; for (i=0; i < this.length; i++) { if (this[i] === value) { return true; } } r>>>详细阅读

本文标题：JQuery 简便实现页面元素数据验证功能

地址：http://www.17bianji.com/kaifa2/JS/30681.html

 1/2    1