现在的位置: 首页 > easyui > Form > validatebox > 正文
小 中 大
让validatebox组件支持blur时触发校验
2013年03月27日 ⁄ validatebox ⁄ 共 6407字 ⁄ 评论数 9 ⁄ 被围观 16,580 views+
文章目录
[隐藏]

对于Easyui的validatebox组件，默认是“focus之后，失去焦点之前”这段时间内每隔200ms自动校验一次，这对需要跟数据库交互的校验来讲，消耗服务器太多性能，弊端显而易见，通过改源码的方式，其实是很容易纠正这个问题的，之所以写这篇文章，是因为本文使用了扩展的方式来解决这个问题，对源码无污染，方便升级。

因为1.3.3版本的Easyui出了新tooltip组件，并且validatebox也依赖tooltip，所以本文的扩展只适用于1.3.3之前的版本，对于1.3.3版本，如果有实现的话会在文章最后的“更新日志”中给出通知。

实现代码

  1. /**  
  2.  * validatebox方法扩展  
  3.  * coder by 小雪转中雪  
  4.  */  
  5. jQuery.extend(jQuery.fn.validatebox.methods, {   
  6.     removeTip: function(jq) {   
  7.         return jq.each(function() {   
  8.             var tip = $.data(this, "validatebox").tip;   
  9.             if(tip) {   
  10.                 tip.remove();   
  11.                 $.data(this, "validatebox").tip = null;   
  12.             }   
  13.         });   
  14.     },   
  15.     createTipToShow: function(jq) {   
  16.         return jq.each(function() {   
  17.             var message = $.data(this, "validatebox").message;   
  18.             var tip = $.data(this, "validatebox").tip;   
  19.             if(!tip) {   
  20.                 tip = $("<div class=\"validatebox-tip\">" + "<span class=\"validatebox-tip-content\">" + "</span>" + "<span class=\"validatebox-tip-pointer\">" + "</span>" + "</div>").appendTo("body");   
  21.                 $.data(this, "validatebox").tip = tip;   
  22.             }   
  23.             tip.find(".validatebox-tip-content").html(message);   
  24.             $(this).validatebox('showTip');   
  25.         });   
  26.     },   
  27.     showTip: function(jq) {   
  28.         return jq.each(function() {   
  29.             var data = $.data(this, "validatebox");   
  30.             if(!data) {   
  31.                 return;   
  32.             }   
  33.             var tip = data.tip;   
  34.             if(tip) {   
  35.                 var box = $(this);   
  36.                 var pointer = tip.find(".validatebox-tip-pointer");   
  37.                 var content = tip.find(".validatebox-tip-content");   
  38.                 tip.show();   
  39.                 tip.css("top", box.offset().top - (content._outerHeight() - box._outerHeight()) / 2);   
  40.                 if(data.options.tipPosition == "left") {   
  41.                     tip.css("left", box.offset().left - tip._outerWidth());   
  42.                     tip.addClass("validatebox-tip-left");   
  43.                 } else {   
  44.                     //alert($.data(this,'combo'));   
  45.                     if(box.hasClass('combo-text')) {   
  46.                         tip.css("left", box.offset().left + box._outerWidth() + 20);   
  47.                     } else {   
  48.                         tip.css("left", box.offset().left + box._outerWidth());   
  49.                     }   
  50.                     tip.removeClass("validatebox-tip-left");   
  51.                 }   
  52.                 pointer.css("top", (content._outerHeight() - pointer._outerHeight()) / 2);   
  53.             }   
  54.         });   
  55.     },   
  56.     /**
  57.      * 设置验证的触发方式  
  58.      * @param {jQuery object} jq    jq对象  
  59.      * @param {number} param 触发方式 0为默认方式；1为失去焦点触发  
  60.      */  
  61.     setValidateTrigger: function(jq, param) {   
  62.         return jq.each(function() {   
  63.             var box = $(this);   
  64.             var validatebox = $.data(this, "validatebox");   
  65.             var that = this;   
  66.             switch(param) {   
  67.             case 0:   
  68.                 //默认方式   
  69.                 box.unbind(".validatebox").bind("focus.validatebox", function() {   
  70.                     validatebox.validating = true;   
  71.                     validatebox.value = undefined;   
  72.                     (function() {   
  73.                         if(validatebox.validating) {   
  74.                             if(validatebox.value != box.val()) {   
  75.                                 validatebox.value = box.val();   
  76.                                 if(validatebox.timer) {   
  77.                                     clearTimeout(validatebox.timer);   
  78.                                 }   
  79.                                 validatebox.timer = setTimeout(function() {   
  80.                                     $(that).validatebox("validate");   
  81.                                 }, validatebox.options.delay);   
  82.                             } else {   
  83.                                 $(that).validatebox('showTip');   
  84.                             }   
  85.                             setTimeout(arguments.callee, 200);   
  86.                         }   
  87.                     })();   
  88.                 }).bind("blur.validatebox", function() {   
  89.                     if(validatebox.timer) {   
  90.                         clearTimeout(validatebox.timer);   
  91.                         validatebox.timer = undefined;   
  92.                     }   
  93.                     validatebox.validating = false;   
  94.                     $(that).validatebox('removeTip');   
  95.                 }).bind("mouseenter.validatebox", function() {   
  96.                     if(box.hasClass("validatebox-invalid")) {   
  97.                         $(that).validatebox('createTipToShow');   
  98.                     }   
  99.                 }).bind("mouseleave.validatebox", function() {   
  100.                     if(!validatebox.validating) {   
  101.                         $(that).validatebox('removeTip');   
  102.                     }   
  103.                 });   
  104.                 break;   
  105.             case 1:   
  106.                 //blur时触发   
  107.                 box.unbind(".validatebox").bind("focus.validatebox", function() {   
  108.                     validatebox.validating = false;   
  109.                     $(that).removeClass("validatebox-invalid");   
  110.                     $(that).validatebox('removeTip');   
  111.                 }).bind("blur.validatebox", function() {   
  112.                     validatebox.validating = true;   
  113.                     if(validatebox.timer) {   
  114.                         clearTimeout(validatebox.timer);   
  115.                         validatebox.timer = undefined;   
  116.                     }   
  117.                     validatebox.timer = setTimeout(function() {   
  118.                         $(that).validatebox("validate");   
  119.                     }, validatebox.options.delay);   
  120.                 }).bind("mouseenter.validatebox", function() {   
  121.                     if(box.hasClass("validatebox-invalid")) {   
  122.                         $(that).validatebox('createTipToShow');   
  123.                     }   
  124.                 });   
  125.                 break;   
  126.             default:   
  127.                 break;   
  128.             }   
  129.         });   
  130.     }   
  131. });  

使用方式：

代码里我扩展了不止一个方法，我们要使用的只有setValidateTrigger这个方法，入参为"0"的话是默认的校验方式，入参为"1"的话是blur时校验。对于validatebox组件本身，只要调用这个方法即可。但是对依赖validatebox组件的其它组件来讲，则要先找到承载validatebox组件的input，然后才能使用这个方法，下面是示例：

  1. jQuery(function(){   
  2.     //validatebox组件   
  3.     jQuery('#input1').validatebox('setValidateTrigger',1);   
  4.     //datebox组件   
  5.     jQuery.data(jQuery('#input3')[0],'combo').combo.find("input.combo-text").validatebox('setValidateTrigger',1);   
  6. })  

效果演示：

http://www.easyui.info/easyui/demo/validatebox/setTrigger.html

返回

作者:

【上篇】
【下篇】

您可能还会对这些文章感兴趣！

  1. 扩展的validatebox校验规则跑哪里去了
  2. 让jQuery Easyui的validatebox支持poshytip插件
  3. jQuery Easyui 源码分析之validatebox组件
  4. 扩展:validatebox实现多重规则验证
  5. 浅谈validatebox组件校验的实现方案
  6. validatebox组件常用校验规则搜集整理
jQuery EasyUI Datagrid组件fixRowHeight接口源码分析
阻止datagrid填充已经获取到的远程数据
panel改进:auto属性定制自动解析远程数据
基于jQuery的监控表单元素变化的小插件

目前有 9 条留言 其中：访客:6 条, 博主:3 条

  1. 求回答 : 2013年07月30日14:57:00  -49楼 @回复 回复

    请问如何直接在源码里修改,我想让所有validatebox都以这种方式提示,急求回答,感激不尽!


    • 管理员       世纪之光 : 2013年07月30日20:33:42  地下1层 @回复 回复

      源码我也分析过，自己参照着改一下，无非就是事件的绑定。

  2. 求回答 : 2013年07月31日10:37:42  -48楼 @回复 回复

    我还遇到个问题,就是validatebox偶尔会卡住无法输入,就是鼠标一点进去就没有光标,怎么点就是点不进去,无法选中输入框内部.这个是什么问题?
    非常感谢


    • 管理员       世纪之光 : 2013年07月31日11:52:05  地下1层 @回复 回复

      是不是你用了服务端的校验，因为之前的校验还未完成造成页面的停顿？
      如果仅仅是客户端的校验，运行效率不会差到影响用户操作的，我没遇到过这种情况呀。

      • 求回答 : 2013年07月31日11:55:34  地下2层 @回复 回复

        我没有用服务端校验,.谢谢你了,这个问题还真不知道怎么解决了.


        • 管理员           世纪之光 : 2013年07月31日14:17:12  地下3层 @回复 回复

          你用的Easyui什么版本？浏览器是什么？能否给我一个能重现你说的问题的html文件？

          • 求指教 : 2015年03月06日12:06:03  地下4层 @回复 回复

            Easyui1.3.2 ie11 大概率出现弹出框dialog中的输入框点击无法获取光标 ❓ ，如果validdatebox初始化后validate一下就又正常了

  3. 求回答 : 2013年08月09日14:21:02  -47楼 @回复 回复

    楼主加我qq2559053483行不?qq上具体说下吧

  4. checkme : 2013年09月06日17:23:18  -46楼 @回复 回复

    想请问一下同一个input在不同的判断条件下设置不同表单控件为什么不生效？

    在destroy时会报对象of undefined

    $(‘#’ + typeTarget).datebox(‘destroy’);

    $(‘#’ + typeTarget).numberspinner({
    required: true,
    missingMessage:’请输入有效值！’,
    invalidMessage: ‘请输入有效值！’,
    editable: true,
    min: 0
    });

给我留言

留言无头像?


插入图片

返回首页

Copyright © 2012-2017 WebUI框架使用参考  保留所有权利.   Theme by Robin
×