自己写的jQuery下的验证框架，支持自定义验证函数，支持自定义错误显示效果

这两天需要写个验证器，一开始就写了个空值验证方法，主要针对文本框和FCKeditor，后来觉得功能太有限，不方便扩展。后来就改成现在这个样子，一个Validator验证一个表单，多个表单可以用多个验证器验证（这个还没试）。支持自定义验证函数,(Vaildtor.addSheduleType()方法添加自定义验证函数，默认有两个)，支持自定义显示错误信息效果(这里提供常规对话框和jQuery dialog插件两种效果，通过Vaildtor.setCustomMessageBox方法添加自定义显示效果的实例)。bug可能还有好多我没发现，但现在基本上能用了，欢迎大家评测，如果发现bug或有建议，请不吝赐教，我也很辛苦啊，现在都午夜1:37了。

 

需要的js和css请在jQuery官网上下载，清单如下：

 <link type="text/css" href="themes/base/ui.core.css" rel="stylesheet" />
 <link type="text/css" href="themes/base/ui.theme.css" rel="stylesheet" />
 <link type="text/css" href="themes/base/ui.dialog.css" rel="stylesheet" />
 
 <script type="text/javascript" src="js/ui.core.js"></script> 
 <script type="text/javascript" src="js/jquery.bgiframe.js"></script>
 <script type="text/javascript" src="js/ui.dialog.js"></script>

 

对此感兴趣的朋友也请关注一下我的这篇帖子，是前天的版本，其中提到的问题现在还是没有好的解决方案。

http://hi.csdn.net/link.php?url=http://topic.csdn.net%2Fu%2F20091227%2F15%2F632d5900-574c-42a0-83ff-d57a8357a8d3.html

 

<!--/*！ *验证器 *@author 胡海 */ var MSG=[];/*! *验证任务 *@parm type 验证类型 *@param parameters 验证动作参数列表 */function Shedule(type,parameters){this.type=type;this.parameters=parameters;}/*! *任务类型 *@param type 验证类型 *@param action 验证动作 */function SheduleType(type,action){this.type=type;this.action=action;}/*!验证框架 *@param form 要验证的表单（jQuery包装过的对象） */function Validator(form){this.form=form;this.sheduleList=[];//任务列表this.customMessageBox=null;//用户自定义的消息框（默认为空）this.config=//配置{showMessageTogether:true, //showMessageTogether（是否同时显示消息）useUI:false//useUI 是使用jQuery UI插件显示消息};this.sheduleTypeList=//任务类型列表[new SheduleType('EMPTY_VALUE',checkEmptyContent),new SheduleType("INVILD_EMAIL",checkInvildEmail)];/*! *添加消息 *@param msg 消息 */this.addMsg=function(msg){if(msg!=null && msg!=undefined && jQuery.trim(msg)!=''){MSG[MSG.length]=msg; }};/*! *显示消息 *@param messageBox 用户自定义的消息显示对话框实例（必须实现showMessage接口） */this.showMsg=function(){var msg='';for(var i=0;i<MSG.length;i++){if(this.config.showMessageTogether){if(this.config.useUI && this.customMessageBox!=null)msg+=MSG[i]+'<br/>';elsemsg+=MSG[i]+'/n';}else{if(this.config.useUI && this.customMessageBox!=null){this.customMessageBox.init(MSG[i]);this.customMessageBox.showMessage();}elsealert(MSG[i]);}}if(this.config.showMessageTogether){if(this.config.useUI && this.customMessageBox!=null){this.customMessageBox.init(msg);this.customMessageBox.showMessage();}elsealert(msg);}};/*! *执行任务 *@param shedule 任务 */this.doShedule=function(shedule){for(var i=0;i<this.sheduleTypeList.length;i++)if(shedule.type=this.sheduleTypeList[i].type){return this.sheduleTypeList[i].action(shedule.parameters,this.addMsg);}};}/*! *获取任务类型列表 */Validator.prototype.getSheduleTypeList=function(){return this.sheduleTypeList;};/*! *添加任务类型 *@param type 验证类型 *@param action 任务动作 */Validator.prototype.addSheduleType=function(type,action){this.sheduleTypeList[this.sheduleType.length]=new SheduleType(type,action);}/*! *添加任务 *@param type 验证类型 *@parm params 验证动作参数列表 */Validator.prototype.addShedule=function(type,params){this.sheduleList[this.sheduleList.length]=new Shedule(type,params);};/*! *修改配置 */Validator.prototype.setConfig=function(params){jQuery.extend(this.config,params);};/*! *获取配置 */Validator.prototype.getConfig=function(){return this.config;};/*! *设置用户自定义的消息显示框 *@param messageBox */Validator.prototype.setCustomMessageBox=function(messageBox){this.customMessageBox=messageBox;};/*! *获取用户自定义的消息显示框 *@param messageBox */Validator.prototype.getCustomMessageBox=function(){return this.customMessageBox;};/*! *部署验证 */Validator.prototype.deployVaildShedule=function(){var temp=this;this.form.submit(function(event){MSG=[];//清空消息var flag=true;for(var i=0;i<temp.sheduleList.length;i++){flag=flag & temp.doShedule(temp.sheduleList[i]);//很郁闷这里非得使用"&"，实在觉得很奇怪，不应该是"&&"吗?}if(flag==false){temp.showMsg();event.preventDefault();}});};//==================================自定义显示消息====================================/*! *使用jQuery UI显示消息 */function MessageDialog(){this.buffer=[];//缓存this.doBufferTask=false;//是否正在执行缓存任务this.config={useModal:false,//是否使用模态窗口（针对使用UI插件）useBGIframe:false//是否使用iframe屏蔽层（针对使用UI插件，解决IE6下select始终显示在div之上的bug，需要bgiframe插件支持）};/*! *初始化 */this._init=function(msg){var temp=this;if(document.getElementById('_DIALOG_')==null)$('body').css('font-size','62.5%').append('<div id="_DIALOG_">'+msg+'</div>');else{//因为一次只能显示一个dialog，所以在不同时显示消息时将任务缓存下来，等dialog关闭时再依次显示缓存任务if($("#_DIALOG_").dialog('isOpen')){if(!temp.doBufferTask)//如果正在执行缓存任务则不缓存temp.buffer[temp.buffer.length]=msg;//缓存任务}else$("#_DIALOG_").html(msg);//执行必需的清理工作，以免影响下次显示的内容}};/*! *显示消息 *@param msg 消息 */this.showMsg=function(){var temp=this;if($("#_DIALOG_").dialog)//需要jQuery dialog插件支持{$("#_DIALOG_").dialog ({bgiframe:temp.config.useBGIframe,modal:temp.config.useModal,autoOpen:false,buttons: {Ok: function() {$(this).dialog('close');if(temp.buffer.length>0)//如果有缓存则执行缓存任务temp.doBufferTask=true;//设置为正在执行缓存任务for(var i=0;i<temp.buffer.length;i++){temp._init(temp.buffer[i]);temp.showMsg();if(i+1==temp.buffer.length){temp.buffer=[];//清空缓存temp.doBufferTask=false;//设置缓存任务执行完毕}}}}}).css({'font-size':'14px'});$("#_DIALOG_").dialog('open');}};}/*! *显示消息 <必须实现的接口方法> *@param msg 消息 */MessageDialog.prototype.showMessage=function(){this.showMsg();};/*! *初始化<必须实现的接口方法> */MessageDialog.prototype.init=function(msg){this._init(msg);};/*! *设置MessageDialog的配置 *参数列表 */MessageDialog.prototype.setConfig=function(params){jQuery.extend(this.config,params);};/*! *获取MessageDialog的配置 */MessageDialog.prototype.getConfig=function(){return this.config;};//==================================自定义验证函数====================================/*! *空值检查 *@param params 参数列表 *@param callback 回调函数 */checkEmptyContent=function(params,callback){input=params.input;//input 要检查的输入控件 （jQuery包装过的对象）message=params.message;//message 内容为空时的提示信息isFilterPragraphTag=params.isFilterPragraphTag;//isFilterPragraphTag 是否过滤段落标记isFilterBlank=params.isFilterBlank;//isFilterBlank 是否过滤空格if(input.val()!=''){ var noWarpContent=input.val();if(isFilterPragraphTag)//过滤段落标记{//过滤<p>标记while(noWarpContent.indexOf('<p>')>=0)noWarpContent=noWarpContent.replace('<p>','');//过滤</p>标记while(noWarpContent.indexOf('</p>')>=0)noWarpContent=noWarpContent.replace('</p>','');}if(isFilterBlank)//过滤空格{//过滤空格标记while(noWarpContent.indexOf('&nbsp;')>=0)noWarpContent=noWarpContent.replace('&nbsp;','');while(noWarpContent.indexOf('&nbsp')>=0)noWarpContent=noWarpContent.replace('&nbsp','');//过滤空格noWarpContent=jQuery.trim(noWarpContent);}if(jQuery.trim(noWarpContent)!=''){return true;}}callback(message);return false;}; /*! *检查邮件地址有效性 */checkInvildEmail=function(params,callback){}//-->

 

使用步骤如下：

 

注：尖括号中步骤是必需步骤，方括号中的步骤是可选的步骤。

 

1.<实例化验证框架>

   [配置验证框架]
2.添加验证任务

   [

        1). <实例化自定义显示消息效果>

             [配置自定义显示消息效果]
        2).<添加自定义显示消息效果>

   ]

3.部署验证任务

 

实例代码如下：

 

<script type="text/javascript"> <!-- var validator=new Validator($('form.createTopic')); validator.setConfig( { showMessageTogether:false, useUI:true } ); validator.addShedule('EMPTY_VALUE', { input:$('#input_inputTopic'), message:'主题标题不可以为空！', isFilterPragraphTag:true, isFilterBlank:true } ); validator.addShedule('EMPTY_VALUE', { input:$('#content'), message:'主题内容不可以为空！', isFilterPragraphTag:true, isFilterBlank:true } ); var dialog=new MessageDialog(); dialog.setConfig( { useModal:true, useBGIframe:true } ); validator.setCustomMessageBox(dialog); validator.deployVaildShedule(); //--></script>

 

运行效果如图：