配置超简单的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

 

 

评论

35 楼 eivenchan 2010-05-07  

yunsudong 写道

上一个项目用了这个插件～为了实际情况改的面目全非～
这个插件有一个严重的问题～就是name值不能有“.”～这是个悲剧～

啊？？？这可是个很严重的问题啊。。。
所有struts的项目都毙掉了。。。

34 楼 yunsudong 2010-05-07  

上一个项目用了这个插件～为了实际情况改的面目全非～
这个插件有一个严重的问题～就是name值不能有“.”～这是个悲剧～

33 楼 jfqxll 2010-05-07  

试了一下，很好用啊。。

但是好像网址和邮编的验证不行？

我试了
邮编 418000
网址 http://www.baidu.com

都不行。。

32 楼 yifeng 2010-05-07  

不如用jVal ，扩展起来也方便

31 楼 Angel_Night 2010-05-07  

楼主还在坚持吧

我每天都会关注的

30 楼 bluespring 2010-05-06  

matychen 写道

支持一个，呵呵~~很久没用它了。

现在在用什么效验，介绍一下嘛

29 楼 bluespring 2010-05-06  

旭少版 写道

希望完善一个功能,就是提交后可以通过参数取得提交是否成功........

你指的异步提交吧?

异步提交并且需要取到返回的json，只需要修改

	if ($.validationEngine.settings.success){	// AJAX SUCCESS, STOP THE LOCATION UPDATE
								$.validationEngine.settings.success && $.validationEngine.settings.success(); 
								return false;
							}

为

	if ($.validationEngine.settings.success){	// AJAX SUCCESS, STOP THE LOCATION UPDATE
								$.validationEngine.settings.success && $.validationEngine.settings.success(data); 
								return false;
							}

即可，也就是将返回的东东传给你自定义的success回调

然后在注册效验的时候配置自定义回调

$("#formID").validationEngine({
				success:function(data){/*自定义逻辑*/}
			})

这个需求我会在有空的时候实现，谢谢你的建议

28 楼 wxy5001 2010-05-06  

太帅了。。。好爽。。

27 楼 旭少版 2010-05-06  

希望完善一个功能,就是提交后可以通过参数取得提交是否成功........

26 楼 qingfengjushi1 2010-05-06  

借鉴论坛上一个验证代码做了一些修改搞的必输验证.
<td class="dataCell" nowrap>
<input class="ui-field-text save" type="text" name="userId" id="userId" value='<s:property value="userId"/>' onkeypress="JHshIntegerText(this)" required=1>
<span class="required">＊</span>
<label id='msg_userId'></label>
</td>

25 楼 select*from爱 2010-05-06  

bluespring 写道

select*from爱 写道

我们是这样搞的
<input type="password" rep="正则表达式" err="密码不能为空"/>
当然，要引入自定义的校验js,仿jquery校验插件写的

建议你重新规划 reg内容及err内容。
像原来这种如果有两种验证错误信息怎么办？

可以这样 rep="[正则1，正则2]" err="[提示1,提示2]"

这个建议不错，可惜那玩意不是我写的
我写的话就抽象常用校验，有必要的时候才这样搞正则，要不一个页面N多正则也不爽

24 楼 ghyghoo8 2010-05-06  

很不错的一个插件。。。主要喜欢它的提示框。。。感觉还是箭头好看。。

23 楼 cjx186 2010-05-06  

以前在这里有发过的。这个。。。

22 楼 liuxu123123 2010-05-05  

不知道楼主有没有考虑过嵌套iframe的验证，比如编写的rte需要验证，尤其是在ff下，对焦点的控制比较困难。

21 楼 bluespring 2010-05-05  

<div class="quote_title">Angel_Night 写道</div>
<div class="quote_div">
<div class="quote_title">bluespring 写道</div>
<div class="quote_div">
<div class="quote_title">Angel_Night 写道</div>
<div class="quote_div">只是一个层而已<br><br>至于 "高度" "一直显示" "悬浮" 这些细节 我感觉不是验证框架需要做的事..<br><br>只需要把值传过去 至于如何显示 可以自行操纵这个div</div>
<p><br><br><br>我有时间会考虑加入这个功能，实现这个功能需要在配置的时候多一项</p>
<pre name="code" class="html">&lt;s:textfield name="prefix" cssClass="validate[required,custom[onlyLetter],length[0,5]]" _label="前缀" &gt;&lt;/s:textfield&gt;</pre>
<p>因为提示层中显示多个input的提示信息，需要加于区别</p>
</div>
<p> </p>
<p>多加一个属性感觉有点累赘啊...</p>
<p> </p>
<p>在<span><span style="color: black;">$(</span><span class="string" style="color: blue;">"#formID"</span><span style="color: black;">).validationEngine() 的时候传递进入 统一层的id 比较方便吧?</span></span></p>
</div>
<p> </p>
<p>我是指得在统一层里面区别各个input的提示，注册效验时候可以配置统一层id，但无法配置效验input的名字（用来区别各个input）</p>

20 楼 matychen 2010-05-05  

支持一个，呵呵~~很久没用它了。

19 楼 yuyue618 2010-05-05  

大家都想找一个好用又简单的验证框架

18 楼 Angel_Night 2010-05-05  

<div class="quote_title">bluespring 写道</div>
<div class="quote_div">
<div class="quote_title">Angel_Night 写道</div>
<div class="quote_div">只是一个层而已<br><br>至于 "高度" "一直显示" "悬浮" 这些细节 我感觉不是验证框架需要做的事..<br><br>只需要把值传过去 至于如何显示 可以自行操纵这个div</div>
<p><br><br><br>我有时间会考虑加入这个功能，实现这个功能需要在配置的时候多一项</p>
<pre name="code" class="html">&lt;s:textfield name="prefix" cssClass="validate[required,custom[onlyLetter],length[0,5]]" _label="前缀" &gt;&lt;/s:textfield&gt;</pre>
<p>因为提示层中显示多个input的提示信息，需要加于区别</p>
</div>
<p> </p>
<p>多加一个属性感觉有点累赘啊...</p>
<p> </p>
<p>在<span style=""><span style="color: black;">$(</span><span class="string" style="color: blue;">"#formID"</span><span style="color: black;">).validationEngine() 的时候传递进入 统一层的id 比较方便吧?</span></span></p>

17 楼 bluespring 2010-05-05  

rendong 写道

我也在一直使用这个验证组件，更改了错误显示方式，但是没有修改，当form在一个iframe中，边上没有足够的空间显示错误提示的问题。

这个我也没考虑过...

暂时可以通过配置提示位置来规避吧

16 楼 Angel_Night 2010-05-05  

bluespring 写道

我也一直不明白javaeye的效验为什么配置在class中，我看了也别扭。
我只有用过struts2标签，可以输出自定义的属性比如说rep什么的，难道说有些标签不能输出自定义属性，所以必须写在已有的属性class中？

可能是为了遵循html标准吧...毕竟schema有一些约定 突然多一个 可能在某些特定的环境 会 出现奇怪问题

至于java中自定义标签 输出个自定义属性完全没问题..
别的语言不太清楚..