论坛首页 Web前端技术论坛

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

浏览 29931 次
精华帖 (0) :: 良好帖 (13) :: 新手帖 (1) :: 隐藏帖 (0)
作者 正文
   发表时间:2010-05-04   最后修改:2010-05-05

用过不少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

 

 

  • 大小: 11.5 KB
  • 大小: 12 KB
  • 大小: 11.6 KB
   发表时间:2010-05-05  
都没人提个意见说个看法,这世道
0 请登录后投票
   发表时间:2010-05-05  
老早以前现在项目中用它

发现 不支持function级别的验证..很麻烦 只能进行一些简单的数据验证..
0 请登录后投票
   发表时间:2010-05-05  
Angel_Night 写道
老早以前现在项目中用它

发现 不支持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加载的,你不能在它初始化之前扩展它

 

 

0 请登录后投票
   发表时间:2010-05-05  

添加了取值区间效验能力

 

配置为

region[4,90.5]

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

 

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

0 请登录后投票
   发表时间: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 单独层 统一层 来提示



希望楼主能努力继续下去..
虽然关注的人少点 才开始而已嘛
0 请登录后投票
   发表时间:2010-05-05   最后修改:2010-05-05
我们是这样搞的
<input type="password" rep="正则表达式" err="密码不能为空"/>
当然,要引入自定义的校验js,仿jquery校验插件写的
0 请登录后投票
   发表时间: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用户体验不好。而统一层提示的话,布局是个问题,要考虑影响及破坏原有的页面布局。如果你有好的解决建议,我会继续完善

谢谢你的意见及鼓励
0 请登录后投票
   发表时间:2010-05-05  
select*from爱 写道
我们是这样搞的
<input type="password" rep="正则表达式" err="密码不能为空"/>
当然,要引入自定义的校验js,仿jquery校验插件写的


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

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


0 请登录后投票
   发表时间:2010-05-05  
统一层提示的话

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


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

所以楼主如果真的想完善 可以考虑一下这些内容
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics