这两天需要写个验证器，一开始就写了个空值验证方法，主要针对文本框和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>
对此感兴趣的朋友也请关注一下我的这篇帖子，是前天的版本，其中提到的问题现在还是没有好的解决方案。
<!-- /*！ *验证器 *@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/>'; else msg+=MSG[i]+'/n'; } else { if(this.config.useUI && this.customMessageBox!=null) { this.customMessageBox.init(MSG[i]); this.customMessageBox.showMessage(); } else alert(MSG[i]); } } if(this.config.showMessageTogether) { if(this.config.useUI && this.customMessageBox!=null) { this.customMessageBox.init(msg); this.customMessageBox.showMessage(); } else alert(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(' ')>=0) noWarpContent=noWarpContent.replace(' ',''); while(noWarpContent.indexOf(' ')>=0) noWarpContent=noWarpContent.replace(' ',''); //过滤空格 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>
运行效果如图：
扫一扫
1559
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
