配置超简单的Jquery form validate验证框架（修改与扩展）

 

http://devbbs.doit.com.cn/thread-29234-1-1.html

 

 

 

 

用过不少form验证框架，一般难逃三个缺点，编码复杂、使用条件苛刻、难以扩展修改。 一直以来都很头疼，这两天有空逛javaeye发现matychen发的一个效验框架帖子，一看配置超简单眼前一亮（类似javaeye的配置方式），再一看效验提示是浮动并可配置的。就觉得这个框架稍作修改就是我梦寐以求的效验框架。

本人想将这个框架做成适合各种环境的通用插件，大家有什么意见及发现什么bug欢迎来拍砖

修改的地方：


可以配置是否启用提示框的箭头（个人觉得很难看）



可以配置提示框出现的方式，是一直显示还是当鼠标over时显示
这是最需要的修改，原来的提示框到处都是，严重影响了用户体验
qq截图截不到鼠标，请参考demo


可以配置出错时候field的样式，默认是红色两像素的边框
如果效验的是checkbox及radio，该样式添加在效验元素的父节点上



还需要继续改进的地方

有时间的时候我会继续扩展两个地方
提示框鼠标跟随
提示框圆角（当前圆角是用css写的，只能用于Firefox下）



说了很多废话，切入主题，且看例子

首先引入样式文件及js文件（最新版效验框架是基于jquery1.4的）
Html代码
<link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css" media="screen" title="no title" charset="utf-8" />  
<link rel="stylesheet" href="css/template.css" type="text/css" media="screen" title="no title" charset="utf-8" />  

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>  
<script src="js/jquery.validationEngine-cn.js" type="text/javascript"></script>  
<script src="js/jquery.validationEngine.js" type="text/javascript"></script>  

<link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css" media="screen" title="no title" charset="utf-8" />
<link rel="stylesheet" href="css/template.css" type="text/css" media="screen" title="no title" charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.validationEngine-cn.js" type="text/javascript"></script>
<script src="js/jquery.validationEngine.js" type="text/javascript"></script>  
注册要效验的form，是用默认配置
Js代码
$("#formID").validationEngine()  

$("#formID").validationEngine()  
ok
js编码完成

接下来是在要效验的inputs上加配置（class上）
Html代码
<input value="" class="validate[required,custom[noSpecialCaracters],length[0,20]]" type="text" name="user" id="user" />  

<input value="" class="validate[required,custom[noSpecialCaracters],length[0,20]]" type="text" name="user" id="user" /> required:必填
custom[noSpecialCaracters]:使用的正则（jquery.validationEngine-cn.js中定义）
length[0,20]:长度限制

效验编码配置完成，是不是超简单。当然如果需要一些特殊的效验需要自定义效验方法及扩展


异步效验部分由于没有php环境所以没有测试过，请有环境的朋友帮忙测试下。谢谢！


官方地址
http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/

matychen原帖
http://www.javaeye.com/topic/555489

这里没有自己做提示汉化，引用matychen的汉化文件jquery.validationEngine-cn.js，感谢matychen

 

 

 

 

 

 

demo中就有function验证，请仔细看看。
只是它的错误提示逻辑写的不方便，不但要写function，还要添加提示消息到$.validationEngineLanguage.allRules

demo中的function验证

function定义
Js代码
function validate2fields(){   
            if($("#firstname").val() =="" || $("#lastname").val() == ""){   
                return true;   
            }else{   
                return false;   
            }   
        }  

function validate2fields(){
                        if($("#firstname").val() =="" || $("#lastname").val() == ""){
                                return true;
                        }else{
                                return false;
                        }
                }
提示配置（稍后讨论）
Js代码
"validate2fields":{   
                        "nname":"validate2fields",   
                        "alertText":"* You must have a firstname and a lastname"}   
                    }     

"validate2fields":{
                                            "nname":"validate2fields",
                                            "alertText":"* You must have a firstname and a lastname"}
                                        }         

验证配置
Html代码
<input value=""  class="validate[required,custom[onlyLetter],length[0,100],<SPAN style="COLOR: #ff0000">funcCall[validate2fields]</SPAN>] text-input" type="text" id="lastname" name="lastname"  />  

<input value=""  class="validate[required,custom[onlyLetter],length[0,100],funcCall[validate2fields]] text-input" type="text" id="lastname" name="lastname"  />
提示不一定要加到资源js文件jquery.validationEngine-cn.js中，可以使用下面的方式添加
Js代码
jQuery.extend($.validationEngineLanguage.allRules,{"validate2fields":{   
                        "nname":"validate2fields",   
                        "alertText":"* You must have a firstname and a lastname"}   
                    });  

jQuery.extend($.validationEngineLanguage.allRules,{"validate2fields":{
                                            "nname":"validate2fields",
                                            "alertText":"* You must have a firstname and a lastname"}
                                        }); 需要注意的是这段代码必须加入在你自定义的jQuery.ready中，因为
Js代码
$.validationEngineLanguage.allRules  

$.validationEngineLanguage.allRules也是用jQuery.ready加载的，你不能在它初始化之前扩展它