eayui的validatebox分析

在分析eayui的validatebox的源代码中发现，该验证框架不支持删除验证的方法，在api中可以看见有个destroy方法，这个方法不是用来删除验证的，而是把元素和验证都一块删除,所以不符合逻辑。

为此我写了一个删除验证的方法：

/*
*@param elemId 元素的id
*删除easyui已有的验证
*/
function delRules(elemId){
	var v = $("#"+elemId)[0] ;
	if($.data(v,'validatebox')){
		$.data(v,'validatebox').options={};
		$.data(v,'validatebox').tip=null;
		$("#"+elemId).removeClass('validatebox-invalid');
	}
}

调用改函数的方法

function delyanzheng(){
	/*destroy把元素和验证都一块删除,所以不符合逻辑
	$("#addValidate").validatebox('destroy');
	*/
	delRules('addValidate');
}

 

 

验证框架的小箭头样式比较有意思以后可以用下。

css代码为：

.validatebox-tip{
	position:absolute;
	width:200px;
	height:auto;
	display:none;
	z-index:9900000;
}
.validatebox-tip-content{
	display:inline-block;
	position:absolute;
	top:0px;
	left:10px;
	padding:3px 5px;
	border:1px solid #CC9933;
	background:#FFFFCC;
	z-index:9900001;
	font-size:12px;
}
.validatebox-tip-pointer{
	background:url('images/validatebox_pointer.gif') no-repeat left top;
	display:inline-block;
	width:10px;
	height:19px;
	position:absolute;
	left:1px;
	top:0px;
	z-index:9900002;
}

 

效果图为：

 

 

上面的方法只能算是流氓编码，现在给出基于easyui的真正扩展方法的写法

$.extend($.fn.validatebox.methods, {
	remove:function(jq,param){
		var f = param?param:false;
		if(f){
			//动态combo
			var v = $.data(jq[0], 'combo').combo.find('input.combo-text')[0];
		}else{
			var v = jq[0] ;
		}
		
		if($.data(v,'validatebox')){
			var tip = $.data(v, 'validatebox').tip;
			if (tip){
				tip.remove();
			}
			$(v).removeClass('validatebox-invalid');
			$(v).removeClass('validatebox-text');
			$(v).unbind('.validatebox');
			$(v).removeData('validatebox');
		}
	}
});

使用方法如下：

如果删除的是普通的即非combo的使用此方法：

 

$("#addValidate2").validatebox('remove');

 

 

如果删除的是combo的极其子对象的使用此方法

$("#addValidate2").validatebox('remove',true);

至于参数true的含义，看我扩展的方法立马就知道了

 

上面的方式忘记了删除项切换和下拉列表的监听，下面的验证是最终版

 

$.extend($.fn.validatebox.methods, {
remove : function(jq, param) {
//console.error("ddd",$.data(jq[0], 'combo').combo);
var f = param ? param : false;
if (f) {
//动态combo
var v = $.data(jq[0], 'combo').combo.find('input.combo-text')[0];
var opts = $.data(jq[0], 'combo').options;
delete (opts.validType);
//主体面板
var panel = $.data(jq[0], 'combo').panel.find('div.combobox-item');
//console.error("items",panel.length);
//找到下拉箭头
var arrow = $.data(jq[0], 'combo').combo.find('.combo-arrow');
//删除所有的监听
arrow.unbind('.validatebox');
} else {
var v = jq[0];
}

if ($.data(v, 'validatebox')) {
//console.error("ddd11111",$.data(v,'validatebox').options);
var tip = $.data(v, 'validatebox').tip;
if (tip) {
tip.remove();
}
$(v).removeClass('validatebox-invalid');
$(v).removeClass('validatebox-text');
$(v).unbind('.validatebox');
$(v).die('focus');
$(v).removeData('validatebox');
}
}
});

$.extend($.fn.validatebox.methods, {
	remove : function(jq, param) {
		//console.error("ddd",$.data(jq[0], 'combo').combo);
		var f = param ? param : false;
			if (f) {
				//动态combo
			var v = $.data(jq[0], 'combo').combo.find('input.combo-text')[0];
			var opts = $.data(jq[0], 'combo').options;
			delete (opts.validType);
			//主体面板
			var panel = $.data(jq[0], 'combo').panel.find('div.combobox-item');
			//console.error("items",panel.length);
			//找到下拉箭头
			var arrow = $.data(jq[0], 'combo').combo.find('.combo-arrow');
			//删除所有的监听
			arrow.unbind('.validatebox');
		} else {
			var v = jq[0];
		}
	
		if ($.data(v, 'validatebox')) {
			//console.error("ddd11111",$.data(v,'validatebox').options);
			var tip = $.data(v, 'validatebox').tip;
			if (tip) {
				tip.remove();
			}
			$(v).removeClass('validatebox-invalid');
			$(v).removeClass('validatebox-text');
			$(v).unbind('.validatebox');
			$(v).die('focus');
			$(v).removeData('validatebox');
		}
	}
});

 

 

评论

3 楼 sui159753 2013-09-17  

是否可以删除验证的问题，我也找了好久，我们公司用的1.3的。所以只能自己解决这个问题。
我看官网上1.3.4的版本已经更新是否需要验证方法了。楼主的扩展不错，拿过来直接可以用。。

2 楼 流浪鱼 2012-07-04  

哈哈！这个还不是最终版

1 楼 lqs6910 2012-07-03  

,敏兄。今天找这个问题，偶遇你博客啊。你真给力啊，问题一下解决了。