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

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

 

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

 

修改的地方：

 

 

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

 

 

可以配置提示框出现的方式，是一直显示还是当鼠标over时显示

这是最需要的修改，原来的提示框到处都是，严重影响了用户体验

qq截图截不到鼠标，请参考demo

 

 

可以配置出错时候field的样式，默认是红色两像素的边框

如果效验的是checkbox及radio，该样式添加在效验元素的父节点上

 

还需要继续改进的地方

 

有时间的时候我会继续扩展两个地方

提示框鼠标跟随

提示框圆角（当前圆角是用css写的，只能用于Firefox下）

 

 

 

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

 

首先引入样式文件及js文件（最新版效验框架是基于jquery1.4的）

<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，是用默认配置

$("#formID").validationEngine()

 

ok

js编码完成

 

接下来是在要效验的inputs上加配置（class上）

<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.iteye.com/topic/555489

 

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