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

 

 

都没人提个意见说个看法，这世道

老早以前现在项目中用它

发现 不支持function级别的验证..很麻烦 只能进行一些简单的数据验证..

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

demo中的function验证

function定义

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

 

提示配置（稍后讨论）

"validate2fields":{
    					"nname":"validate2fields",
    					"alertText":"* You must have a firstname and a 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中，可以使用下面的方式添加

jQuery.extend($.validationEngineLanguage.allRules,{"validate2fields":{
    					"nname":"validate2fields",
    					"alertText":"* You must have a firstname and a lastname"}
					});

 需要注意的是这段代码必须加入在你自定义的jQuery.ready中，因为

$.validationEngineLanguage.allRules

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

 

 

添加了取值区间效验能力

 

配置为

region[4,90.5]

判断数值是否是大于 4小于90.5

 

如果有人对这个效验框架感兴趣我会继续完善下去，比如提示框鼠标跟随，比如IE圆角等等

新的错误显示确实比以前好多了


我又翻了一下我们公司自己写的验证框架 用起来很麻烦啊...
一个验证邮箱要写这么多...还是这个方便

<input class="form-textbox" type="text" name="Email" id="Email" bqname="电子邮箱" onfocus="creatediv(this);allFocus(this,'邮箱是您找回密码的重要途径，请认真填写.')" onKeyPress="EmailKeyPress()" onblur="if(BetweenExit(this,3,30)) EmailExit(this)"> 

如果真的要继续做下去 可以完善一下细节

把一些业务验证补全(身份证..中国的手机验证..座机验证等等..)不必每次都传正则

还有灵活一点..比如我公司这个 错误提示 就可以选择 使用 alert 单独层 统一层 来提示



希望楼主能努力继续下去..
虽然关注的人少点 才开始而已嘛

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

ok，我会添加一些中国特色的正则

但错误提示上。alert只能用于submit时，输入错误时alert用户体验不好。而统一层提示的话，布局是个问题，要考虑影响及破坏原有的页面布局。如果你有好的解决建议，我会继续完善

谢谢你的意见及鼓励

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

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

统一层提示的话

可以预先给一个 层的id
如果有需求 可以把错误信息 送到指定的层中


可能我们公司比较怪吧..宁可功能不够好 也要灵活 能够应付各种情况 因为全公司java .net都用一个验证框架..

所以楼主如果真的想完善 可以考虑一下这些内容