对于Easyui的validatebox组件,默认是“focus之后,失去焦点之前”这段时间内每隔200ms自动校验一次,这对需要跟数据库交互的校验来讲,消耗服务器太多性能,弊端显而易见,通过改源码的方式,其实是很容易纠正这个问题的,之所以写这篇文章,是因为本文使用了扩展的方式来解决这个问题,对源码无污染,方便升级。
因为1.3.3版本的Easyui出了新tooltip组件,并且validatebox也依赖tooltip,所以本文的扩展只适用于1.3.3之前的版本,对于1.3.3版本,如果有实现的话会在文章最后的“更新日志”中给出通知。
实现代码
- /**
- * validatebox方法扩展
- * coder by 小雪转中雪
- */
- jQuery.extend(jQuery.fn.validatebox.methods, {
- removeTip: function(jq) {
- return jq.each(function() {
- var tip = $.data(this, "validatebox").tip;
- if(tip) {
- tip.remove();
- $.data(this, "validatebox").tip = null;
- }
- });
- },
- createTipToShow: function(jq) {
- return jq.each(function() {
- var message = $.data(this, "validatebox").message;
- var tip = $.data(this, "validatebox").tip;
- if(!tip) {
- tip = $("<div class=\"validatebox-tip\">" + "<span class=\"validatebox-tip-content\">" + "</span>" + "<span class=\"validatebox-tip-pointer\">" + "</span>" + "</div>").appendTo("body");
- $.data(this, "validatebox").tip = tip;
- }
- tip.find(".validatebox-tip-content").html(message);
- $(this).validatebox('showTip');
- });
- },
- showTip: function(jq) {
- return jq.each(function() {
- var data = $.data(this, "validatebox");
- if(!data) {
- return;
- }
- var tip = data.tip;
- if(tip) {
- var box = $(this);
- var pointer = tip.find(".validatebox-tip-pointer");
- var content = tip.find(".validatebox-tip-content");
- tip.show();
- tip.css("top", box.offset().top - (content._outerHeight() - box._outerHeight()) / 2);
- if(data.options.tipPosition == "left") {
- tip.css("left", box.offset().left - tip._outerWidth());
- tip.addClass("validatebox-tip-left");
- } else {
- //alert($.data(this,'combo'));
- if(box.hasClass('combo-text')) {
- tip.css("left", box.offset().left + box._outerWidth() + 20);
- } else {
- tip.css("left", box.offset().left + box._outerWidth());
- }
- tip.removeClass("validatebox-tip-left");
- }
- pointer.css("top", (content._outerHeight() - pointer._outerHeight()) / 2);
- }
- });
- },
- /**
- * 设置验证的触发方式
- * @param {jQuery object} jq jq对象
- * @param {number} param 触发方式 0为默认方式;1为失去焦点触发
- */
- setValidateTrigger: function(jq, param) {
- return jq.each(function() {
- var box = $(this);
- var validatebox = $.data(this, "validatebox");
- var that = this;
- switch(param) {
- case 0:
- //默认方式
- box.unbind(".validatebox").bind("focus.validatebox", function() {
- validatebox.validating = true;
- validatebox.value = undefined;
- (function() {
- if(validatebox.validating) {
- if(validatebox.value != box.val()) {
- validatebox.value = box.val();
- if(validatebox.timer) {
- clearTimeout(validatebox.timer);
- }
- validatebox.timer = setTimeout(function() {
- $(that).validatebox("validate");
- }, validatebox.options.delay);
- } else {
- $(that).validatebox('showTip');
- }
- setTimeout(arguments.callee, 200);
- }
- })();
- }).bind("blur.validatebox", function() {
- if(validatebox.timer) {
- clearTimeout(validatebox.timer);
- validatebox.timer = undefined;
- }
- validatebox.validating = false;
- $(that).validatebox('removeTip');
- }).bind("mouseenter.validatebox", function() {
- if(box.hasClass("validatebox-invalid")) {
- $(that).validatebox('createTipToShow');
- }
- }).bind("mouseleave.validatebox", function() {
- if(!validatebox.validating) {
- $(that).validatebox('removeTip');
- }
- });
- break;
- case 1:
- //blur时触发
- box.unbind(".validatebox").bind("focus.validatebox", function() {
- validatebox.validating = false;
- $(that).removeClass("validatebox-invalid");
- $(that).validatebox('removeTip');
- }).bind("blur.validatebox", function() {
- validatebox.validating = true;
- if(validatebox.timer) {
- clearTimeout(validatebox.timer);
- validatebox.timer = undefined;
- }
- validatebox.timer = setTimeout(function() {
- $(that).validatebox("validate");
- }, validatebox.options.delay);
- }).bind("mouseenter.validatebox", function() {
- if(box.hasClass("validatebox-invalid")) {
- $(that).validatebox('createTipToShow');
- }
- });
- break;
- default:
- break;
- }
- });
- }
- });
使用方式:
代码里我扩展了不止一个方法,我们要使用的只有setValidateTrigger这个方法,入参为"0"的话是默认的校验方式,入参为"1"的话是blur时校验。对于validatebox组件本身,只要调用这个方法即可。但是对依赖validatebox组件的其它组件来讲,则要先找到承载validatebox组件的input,然后才能使用这个方法,下面是示例:
- jQuery(function(){
- //validatebox组件
- jQuery('#input1').validatebox('setValidateTrigger',1);
- //datebox组件
- jQuery.data(jQuery('#input3')[0],'combo').combo.find("input.combo-text").validatebox('setValidateTrigger',1);
- })
效果演示:
http://www.easyui.info/easyui/demo/validatebox/setTrigger.html
管理员 世纪之光 : 2013年07月30日20:33:42 地下1层
管理员 世纪之光 : 2013年07月31日11:52:05 地下1层
管理员 世纪之光 : 2013年07月31日14:17:12 地下3层