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

bluespring

浏览: 20269 次
来自: ...

最近访客更多访客>>

HowieLi

qjl26

ssydxa219

跳跃的星空

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Ext Jquery 插件整理

框架 jQuery 正则表达式 CSS Ajax

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

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

formValidator.zip (42.7 KB)
描述: 自己修改的
下载次数: 1286

查看图片附件

分享到：

扩展了一棵jquery的树插件SimpleTree，加上 ...

2010-05-04 15:51
浏览 8437
评论(55)
论坛回复 / 浏览 (55 / 29918)
分类:Web前端
查看更多

55 楼 zxingdream 2010-10-05

zxingdream 写道

wafj999 写道

验证身份证的规则怎么整合进去啊？之前的都是"regex":"/^[a-zA-Z\u4E00-\u9FA5]+[a-zA-Z0-9_\u4E00-\u9FA5]+$/",
这样就可以但是身份证的校验必须通过
//身份证正则表达式(15位)
isIDCard1=/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/;
//身份证正则表达式(18位)
isIDCard2=/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{4}$/;
地区、性别和身份证进行判断的正则表达式：
<script>
var
aCity={11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",21:"辽宁",22:"吉林",23:"黑龙江",31:"上海",32:"江苏",33:"浙江",34:"

安徽",35:"福建",36:"江西",37:"山东",41:"河南",42:"湖北",43:"湖南",44:"广东",45:"广西",46:"海南",50:"重庆",51:"四川",52:"贵州"

,53:"云南",54:"西藏",61:"陕西",62:"甘肃",63:"青海",64:"宁夏",65:"新疆",71:"台湾",81:"香港",82:"澳门",91:"国外"}

function cidInfo(sId){
var iSum=0
var info=""
if(!/^\d{17}(\d|x)$/i.test(sId))return false;
sId=sId.replace(/x$/i,"a");
if(aCity[parseInt(sId.substr(0,2))]==null)return "Error:非法地区";
sBirthday=sId.substr(6,4)+"-"+Number(sId.substr(10,2))+"-"+Number(sId.substr(12,2));
var d=new Date(sBirthday.replace(/-/g,"/"))
if(sBirthday!=(d.getFullYear()+"-"+ (d.getMonth()+1) + "-" + d.getDate()))return "Error:非法生日";
for(var i = 17;i>=0;i --) iSum += (Math.pow(2,i) % 11) * parseInt(sId.charAt(17 - i),11)
if(iSum%11!=1)return "Error:非法证号";
return aCity[parseInt(sId.substr(0,2))]+","+sBirthday+","+(sId.substr(16,1)%2?"男":"女")
}
这种来做
楼主知道怎么整合进去吗？

楼主继续支持你啊，帮我们想想解决方案或者给个思路

这个我已经融合进去了，但错误信息不能显示我们函数里面的，除非alert();
在jquery.validationEngine-cn.js里找到$.validationEngineLanguage.allRules = {新添加代码：
"chkIDCard" :{
"nname" : "chkIDCard","alertText" : "* 请输入正确的身份证号."}
然后添加函数
function chkIDCard(){
var card=cidInfo(document.getElementById("idcard").value);
if(card!=true) return false;
else return true;
}
调用的时候在class里这样调用：funcCall[chkIDCard]
但这样虽然可以用了但是提示信息就固定了，呵呵有待继续研究

54 楼 zxingdream 2010-10-04

wafj999 写道

楼主继续支持你啊，帮我们想想解决方案或者给个思路

53 楼 warrior701 2010-09-28

bluespring 写道

rendong 写道

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

这个我也没考虑过...

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

我也遇到了这个问题，能不能把错误提示层提升到顶层窗口显示的，不过这样位置貌似比较难计算，最近在研读代码，感觉改起来很麻烦的样子。。。。

52 楼 Quen 2010-09-15

您觉得修改了，效果会比原来的更好吗？

51 楼 qljobs 2010-09-14

怎么实现在不为空的情况下，再验证。比如我现在要验证一个文本框是否为字母，可是当我什么都没有输入时，它也去验证。我觉得这个是一个缺陷，请问怎么解决，谢谢！

50 楼 matychen 2010-07-30

不知道楼主是什么解决ie6下select遮挡div的，我这里有个办法，楼主把它加到首页把。
jquery.validationEngine.js要修改的地方：

 calculatedPosition.callerTopPosition += "px";
            calculatedPosition.callerleftPosition += "px";
            calculatedPosition.marginTopSize += "px";
            //add matychen 
            if ( $.browser.msie && /6.0/.test(navigator.userAgent) ) {
            $(divFormError).append('<iframe class="iframe" frameborder="0" scr="javascript:false;"></iframe>');
            }
            // add matychen
            $(divFormError).css({
                "top": calculatedPosition.callerTopPosition,
                "left": calculatedPosition.callerleftPosition,
                "marginTop": calculatedPosition.marginTopSize,
                "opacity": 0
            });

validationEngine.jquery.css里面加入以下代码：

.iframe {
	position: absolute; 
	width: expression(this.parentNode.offsetWidth+\'px\'); 
	height: expression(this.parentNode.offsetHeight-32+\'px\');
	z-index: -1;
	top: expression(((parseInt(this.parentNode.currentStyle.borderTopWidth)||0)*-1)+\'px\');
	left: expression(((parseInt(this.parentNode.currentStyle.borderLeftWidth)||0)*-1)+\'px\');
}

这个我是仿照bgiframe_2.1.1得到的。

49 楼 wafj999 2010-07-09

48 楼雪域昆仑 2010-07-08

发现<a href="#">Close
all prompt</a>功能不可以将全部提示的红框删除，我修改了一效果对了，但不知对代码是否有影响。发上来大家看看吧。
<pre name="code" class="js">closePrompt : function(caller,outside) { // CLOSE PROMPT WHEN ERROR CORRECTED
if(!$.validationEngine.settings){
$.validationEngine.defaultSetting()
}
if(outside){
//bluespring修改
if($.validationEngine.settings.showOnMouseOver){
// Quentin 修改，无法全部去掉红色边框的bug
for (var i = 0; i < $(caller).size(); i++){
$(caller).get(i).validateField.removeClass($.validationEngine.settings.errorClass).unbind('mouseover',$.validationEngine.showTip).unbind('mouseout',$.validationEngine.hideTip);
}
//$(caller).get(0).validateField.removeClass($.validationEngine.settings.errorClass).unbind('mouseover',$.validationEngine.showTip).unbind('mouseout',$.validationEngine.hideTip);
$(caller).remove();
}else{
$(caller).fadeTo("fast",0,function(){
$(caller).remove();
});
}
return false;
}</pre>
 改的就是注释中的地方，不知会不会对其他地方用影像，楼主看看吧。

47 楼雪域昆仑 2010-07-07

这两天正在找一js的表单验证框架，感觉这个还不错下来用用，有什么建议在发给楼主吧。
现在感觉如果可以是验证对于html无侵入就更好了。

46 楼 wafj999 2010-05-20

现在要做一个同时验证用户名/邮箱的不知道怎么弄 demo上的是验证email的话如果输入用户名肯定是错的了

45 楼 wafj999 2010-05-13

当用ajax验证成功后errorClass这个怎么显示出来了不知道那里错了

44 楼 z329536921 2010-05-11

楼主能不能写个返回action 回调的json数据的实例呀？我想结合jquery.form.js中的 ajaxSubmit这块功能

43 楼 z329536921 2010-05-11

楼主有没用过这个插件和回调得到 struts2 返回的json数据？我现在老是碰到提示下载action的问题。下载后打开就是要返回的json数据

42 楼 vb2005xu 2010-05-11

自己写一个不就结了

/**
 * 应用程序的顶级名字空间
 */
xu.pkg('xu.app');

xu._class.create('xu.verify','Form' ,null ,{
	desc: 'form verify' ,flds_rules: null ,fm: null ,
	init: function(fm){this.fm=fm;this.flds_rules={}} ,
	add_rules: function(fld,rules){
		if (fld && xu.verify._obj(rules))
			this.flds_rules[fld] = rules ;
	} ,	
	exec: function(){
		if(!this.fm) return false ;var _this = this;
		var errors = {} ;var errnum = 0 ;
		xu.array.each(this.fm.elements,function(item,index){
			if (xu.verify._undef(item.value)) return  
				
			var rules = _this.flds_rules[item.name];
			if (rules && rules.length){
				for (var i = 0; i < rules.length; i++){
					var rule = rules[i];
					if (xu.verify._arr(rule) && rule.length>2){
						if (!xu.verify[rule[0]]) {errnum++;
							errors[item.name] = 'Rule: ['+rule[0] + '] Not Define';
							break ;
						}						
						else {
							var value = item.value || '' ;
							if (xu.verify[rule[0]](value.trim()) == rule[1]){
								errnum++;
								errors[item.name] = rule[2];break ;
							}
						}
					}
				}
			}				
		});
		return errnum ? errors : null;
	}
});

demo:

fm_verify: function(fm){
		if (!this._fvy){
			this._fvy = new xu.verify.Form();
			this._fvy.init(fm);
			
			this._fvy.add_rules('menu[name]',[
				['_require',false,'菜单名称不能为空'],['_schar_nospace',true,'菜单名称不能包含特殊字符']
			]);
			this._fvy.add_rules('menu[udi]',[['_require',false,'UDI标识不能为空']]);
			this._fvy.add_rules('menu[displayorder]',[
				['_require',false,'显示次序不能为空'],	['_int',false,'显示次序必须是整数'],
			]);
			this._fvy.add_rules('menu[parent_id]',[['_require',false,'顶级菜单不能为空']]);
			this._fvy.add_rules('menu[tg]',[['_require',false,'顶级菜单不能为空']]);
			this._fvy.add_rules('menu[group]',[['_require',false,'菜单组不能为空']]);
			
			
			this._fvy.add_rules('menu[alert]',[
				['_require',false,'功能简要不能为空'],['_schar_nospace',true,'功能简要不能包含特殊字符']
			]);
		}
		// 先设置为null
		xu.array.each(fm.elements,function(item){
			var errobj = $ID(item.name+'_error');
			if (errobj) errobj.innerHTML = '';
		});
		
		var errors = this._fvy.exec();
		if (!errors) return true ;log(errors);
		for(var p in errors){
			$ID(p+'_error').innerHTML = errors[p];
		}
		return false ;
	} ,

41 楼 wafj999 2010-05-10

promptPosition: "topRight", // OPENNING BOX POSITION, IMPLEMENTED: topLeft, topRight, bottomLeft, centerRight, bottomRight
 success : false,
 successClass:'success-field',//我想添加一个校验成功的样式进去不知道怎么添加啊！
 beforeSuccess : function() {},
 failure : function() {},
 
 showArray:true, //bluespring修改添加是否显示提示箭头，默认不显示
 showOnMouseOver:true, //bluespring修改提示信息是否在鼠标移上去时才显示，默认为是
 errorClass:'error-field' //bluepsirng修改提供效验出错时的field样式定制,必须在showOnMouseOver为true时才有用

 
 
 
我想参照你的errorClass那样增加一个成功后的样式上面的红色的那样的是不对不知道搂住有办法吗？

40 楼 Angel_Night 2010-05-10

这个链接是0.1版本的

ms这个最新的也就0.4
http://github.com/appden/jquery-formcheck

感觉还不完善啊..
文档demo什么的全部没有..

楼上用过么? 给点资料吧

39 楼 yifeng 2010-05-10

hilliate 写道

个人进行了小小的修改，修改了custom[]规则，比如说：validate[required,custom[noSpecialCaracters],length[0,20]]，改后就是validate[required,noSpecialCaracters,length[0,20]]，个人感觉这样易用性更好，实在是非常不爽它的custom[]设计。

另外，ui方面，比另一个基于mootools的form验证框架formcheck，还是差的比较远。

至于楼上说的name值不能有“.”这个我测试貌似没有出现他说的问题。

formcheck 还不错，这里已经有jquery版的了

http://plugins.jquery.com/project/formcheck

38 楼 Angel_Night 2010-05-10

楼主还在继续么?

我前段时间在公司提了一下要换js验证插件

我个人偏向这个但是公司不太够..
楼主还会继续完善么选择这个还是 jQueryTool的我需要抉择啊...

37 楼 hilliate 2010-05-08

36 楼 ainbax 2010-05-08

在IE上显示的效果非常不理想啊很难看~

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论