ASP.NET提供了丰富的数据验证控件,但这个验证功能都必须运用在服务器控件中;在复合验证数据时使用也不是很方便(虽然拖放控件很方便,但拖放数增多和设置相关属性就变得很麻烦的事情)。为了更方便灵活地实现验证功能,于是采用了JQuery编写了一个简单验证组件,在使用时只需要简单的描述一下验证规则,并不需要写一句JavaScript就可以实现具备ASP.NET验证控件的功能(当然页面要引入相关JavaScript文件)。
功能目标通过简单的自定义属性值描述具体的验证功能,当Form提交自动拦载执行验证功能。如果所有成员验证成功就提交,否则取消提交。
简单使用描述:
基于jQuery的AJAX和JSON的实例 中文WORD版本文档主要讲述的是基于jQuery的AJAX和JSON的实例;过jQuery内置的AJAX功能,直接访问后台获得JSON格式的数据,然后通过jQuer把数据绑定到事先设计好的html模板上,直接在页面上显示。有需要的朋友可以下载看看下载复制代码代码如下:实现要点利用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:// var ErrorMessage;function FormValidate(form){ErrorMessage='';var legality,items;legality = true;items = $(form).find("input[@validator]");for(var i =0;i {if(legality){legality = OnItemValidator($(items[i]));}else{OnItemValidator($(items[i]));}}items = $(form).find("textarea[@validator]");for(var i =0;i {if(legality){legality = OnItemValidator($(items[i]));}else{OnItemValidator($(items[i]));}}items = $(form).find("select[@validator]");for(var i =0;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{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 }else if(compareType =="leq"){return leftvalue }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,dayif(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(""+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(){return FormValidate(this)});});});下载相关例程代码
