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

 

 

评论

15 楼 bluespring 2010-05-05  

<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>

14 楼 rendong 2010-05-05  

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

13 楼 bluespring 2010-05-05  

Angel_Night 写道

select*from爱 写道

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

可能你们公司的美工和我们的差不多吧

特别排斥 class中加入与样式无关的东西...

都是老美工了..
jQueryUI ext对于他们来说 那是程序员应该写的..

所以也接受不了class里面的奇怪内容..

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

12 楼 Angel_Night 2010-05-05  

只是一个层而已

至于 "高度" "一直显示" "悬浮" 这些细节 我感觉不是验证框架需要做的事..

只需要把值传过去 至于如何显示 可以自行操纵这个div

11 楼 bluespring 2010-05-05  

Angel_Night 写道

统一层提示的话

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


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

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

你指的是一直显示的提示层，而不是悬浮显示的对吧？

这个首先要考虑2个问题，给定容器的高宽不够时怎么办？怎么让提示与输入框对应（当前效验框架中并没有配置输入框label）并且让使用者一看就明白？

这两个问题解决不好的话做不到通用及好用

10 楼 Angel_Night 2010-05-05  

select*from爱 写道

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

可能你们公司的美工和我们的差不多吧

特别排斥 class中加入与样式无关的东西...

都是老美工了..
jQueryUI ext对于他们来说 那是程序员应该写的..

所以也接受不了class里面的奇怪内容..

9 楼 Angel_Night 2010-05-05  

统一层提示的话

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


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

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

8 楼 bluespring 2010-05-05  

select*from爱 写道

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

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

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

7 楼 bluespring 2010-05-05  

Angel_Night 写道

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


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

<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 单独层 统一层 来提示



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

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

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

谢谢你的意见及鼓励

6 楼 select*from爱 2010-05-05  

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

5 楼 Angel_Night 2010-05-05  

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


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

<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 单独层 统一层 来提示



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

4 楼 bluespring 2010-05-05  

<p>添加了取值区间效验能力</p>
<p> </p>
<p>配置为</p>
<p>region[4,90.5]</p>
<p>判断数值是否是大于
4小于90.5</p>
<p> </p>
<p>如果有人对这个效验框架感兴趣我会继续完善下去，比如提示框鼠标跟随，比如IE圆角等等</p>

3 楼 bluespring 2010-05-05  

<div class="quote_title">Angel_Night 写道</div>
<div class="quote_div">老早以前现在项目中用它 <br><br>发现 不支持function级别的验证..很麻烦 只能进行一些简单的数据验证..</div>
<p><br><br>demo中就有function验证，请仔细看看。<br>只是它的错误提示逻辑写的不方便，不但要写function，还要添加提示消息到$.validationEngineLanguage.allRules<br><br>demo中的function验证<br><br>function定义</p>
<pre name="code" class="js">function validate2fields(){
if($("#firstname").val() =="" || $("#lastname").val() == ""){
return true;
}else{
return false;
}
}</pre>
<p> </p>
<p>提示配置（稍后讨论）</p>
<pre name="code" class="js">"validate2fields":{
    "nname":"validate2fields",
    "alertText":"* You must have a firstname and a lastname"}
} </pre>
 
<p> </p>
<p>验证配置</p>
<pre name="code" class="html">&lt;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"  /&gt;</pre>
<p> </p>
<p>提示不一定要加到资源js文件jquery.validationEngine-cn.js中，可以使用下面的方式添加</p>
<pre name="code" class="js">jQuery.extend($.validationEngineLanguage.allRules,{"validate2fields":{
    "nname":"validate2fields",
    "alertText":"* You must have a firstname and a lastname"}
});</pre>
<p> 需要注意的是这段代码必须加入在你自定义的jQuery.ready中，因为</p>
<pre name="code" class="js">$.validationEngineLanguage.allRules</pre>
<p>
也是用jQuery.ready加载的，你不能在它初始化之前扩展它</p>
<p> </p>
<p> </p>

2 楼 Angel_Night 2010-05-05  

老早以前现在项目中用它

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

1 楼 bluespring 2010-05-05  

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