现在的位置: 首页 > easyui > Form > validatebox > 正文
让jQuery Easyui的validatebox支持poshytip插件
2013年01月17日 validatebox ⁄ 共 16693字 暂无评论 ⁄ 被围观 7,488 views+
文章目录
[隐藏]

很多朋友比较恼火于jQuery Easyui的validatebox组件的提示消息太过丑陋,也有很多人垂青于poshytip插件优雅且功能强大的消息提示方式。既然,poshytip也基于jQuery,我们让validatebox支持poshytip就变的较为简单了。

夏悸的这篇文章中也曾经提到过简单的实现方案,不过当时jQuery Easyui的版本还比较低,不能定制提示消息的位置,而且代码修改过后就必须要引入poshytip插件的js库才行。本文也是通过修改源码的方式来实现功能的,不过针对前面提到的缺点均做了相应处理。

实现代码:

  1. /**  
  2.  * jQuery EasyUI 1.3.2  
  3.  *   
  4.  * Copyright (c) 2009-2013 www.jeasyui.com. All rights reserved.  
  5.  *   
  6.  * Licensed under the GPL or commercial licenses To use it on other terms please  
  7.  * contact us: jeasyui@gmail.com http://www.gnu.org/licenses/gpl.txt  
  8.  * http://www.jeasyui.com/license_commercial.php  
  9.  *   
  10.  */  
  11. (function($) {   
  12.     function init(target) {   
  13.         $(target).addClass("validatebox-text");   
  14.     };   
  15.     function destroyBox(target) {   
  16.         var data = $.data(target, "validatebox");   
  17.         data.validating = false;   
  18.         var tip = data.tip;   
  19.         if (tip) {   
  20.             tip.remove();   
  21.         }   
  22.         $(target).unbind();   
  23.         $(target).remove();   
  24.     };   
  25.     function bindEvents(target) {   
  26.         var box = $(target);   
  27.         var validatebox = $.data(target, "validatebox");   
  28.         box.unbind(".validatebox").bind("focus.validatebox"function() {   
  29.                     validatebox.validating = true;   
  30.                     validatebox.value = undefined;   
  31.         (function   () {   
  32.                         if (validatebox.validating) {   
  33.                             if (validatebox.value != box.val()) {   
  34.                                 validatebox.value = box.val();   
  35.                                 if (validatebox.timer) {   
  36.                                     clearTimeout(validatebox.timer);   
  37.                                 }   
  38.                                 validatebox.timer = setTimeout(function() {   
  39.                                             $(target).validatebox("validate");   
  40.                                         }, validatebox.options.delay);   
  41.                             } else {   
  42.                                 showTip(target);   
  43.                             }   
  44.                             setTimeout(arguments.callee, 200);   
  45.                         }   
  46.                     })();   
  47.                 }).bind("blur.validatebox"function() {   
  48.                     if (validatebox.timer) {   
  49.                         clearTimeout(validatebox.timer);   
  50.                         validatebox.timer = undefined;   
  51.                     }   
  52.                     validatebox.validating = false;   
  53.                     removeTip(target);   
  54.                 }).bind("mouseenter.validatebox"function() {   
  55.                     if (box.hasClass("validatebox-invalid")) {   
  56.                         createTipToShow(target);   
  57.                     }   
  58.                 }).bind("mouseleave.validatebox"function() {   
  59.                     if (!validatebox.validating) {   
  60.                         removeTip(target);   
  61.                     }   
  62.                 });   
  63.     };   
  64.     /**
  65.      * 兼容easyui原提示方式,和poshytip提示方式  
  66.      * @param {Object} target  
  67.      */  
  68.     function createTipToShow(target){   
  69.         if($(target).poshytip){   
  70.             createTipToShow_poshy(target);   
  71.         }else{   
  72.             createTipToShow_easyui(target);   
  73.         }   
  74.     }   
  75.     function createTipToShow_poshy(target) {   
  76.         //alert("createTipToShow_poshy")   
  77.         var validatebox = $.data(target, "validatebox");   
  78.         var message = validatebox.message;   
  79.         var offsetX = 8,offsetY = 5;   
  80.         var alignX = validatebox.options.tipPositionX || validatebox.options.tipPosition;   
  81.         var alginY = validatebox.options.tipPositionY || 'center';   
  82.         if ($(target).hasClass('combo-text')) {   
  83.             if(alignX=="right") offsetX = offsetX + 20;   
  84.         }   
  85.         if(!validatebox.tip){   
  86.             validatebox.tip = true;   
  87.             if(!$(target).data('poshytip')){   
  88.                 $(target).poshytip({   
  89.                     className: validatebox.options.className,   
  90.                     showOn: 'none',   
  91.                     alignTo: 'target',   
  92.                     alignX: alignX,   
  93.                     alignY: alginY,   
  94.                     offsetX: offsetX,   
  95.                     offsetY: offsetY   
  96.                 });   
  97.             }   
  98.         }   
  99.         showTip(target);   
  100.     };   
  101.     function createTipToShow_easyui(target){   
  102.         var message = $.data(target, "validatebox").message;   
  103.         var tip = $.data(target, "validatebox").tip;   
  104.         if (!tip) {   
  105.             tip = $("<div class=\"validatebox-tip\">" + "<span class=\"validatebox-tip-content\">" + "</span>" + "<span class=\"validatebox-tip-pointer\">" + "</span>" + "</div>").appendTo("body");   
  106.             $.data(target, "validatebox").tip = tip;   
  107.         }   
  108.         tip.find(".validatebox-tip-content").html(message);   
  109.         showTip_easyui(target);   
  110.     };   
  111.     /**
  112.      * 兼容easyui原提示方式,和poshytip提示方式  
  113.      * @param {Object} target  
  114.      */  
  115.     function showTip(target){   
  116.         if($(target).poshytip){   
  117.             showTip_poshy(target);   
  118.         }else{   
  119.             showTip_easyui(target);   
  120.         }   
  121.     };   
  122.     function showTip_poshy(target){   
  123.         var data = $.data(target, "validatebox");   
  124.         var message = data.message;   
  125.         if (!data) {   
  126.             return;   
  127.         }   
  128.         if(data.tip){   
  129.             if(data.messageChg){   
  130.                 data.messageChg = false;   
  131.                 $(target).poshytip('show').poshytip('update',message,false);   
  132.             }else{   
  133.                 $(target).poshytip('show');   
  134.             }   
  135.         }   
  136.     };   
  137.     function showTip_easyui(target){   
  138.         var data = $.data(target, "validatebox");   
  139.         if (!data) {   
  140.             return;   
  141.         }   
  142.         var tip = data.tip;   
  143.         if (tip) {   
  144.             var box = $(target);   
  145.             var pointer = tip.find(".validatebox-tip-pointer");   
  146.             var content = tip.find(".validatebox-tip-content");   
  147.             tip.show();   
  148.             tip.css("top", box.offset().top - (content._outerHeight() - box._outerHeight()) / 2);   
  149.             if (data.options.tipPosition == "left") {   
  150.                 tip.css("left", box.offset().left - tip._outerWidth());   
  151.                 tip.addClass("validatebox-tip-left");   
  152.             }   
  153.             else {   
  154.                 tip.css("left", box.offset().left + box._outerWidth());   
  155.                 tip.removeClass("validatebox-tip-left");   
  156.             }   
  157.             pointer.css("top", (content._outerHeight() - pointer._outerHeight()) / 2);   
  158.         }   
  159.     };   
  160.     function removeTip(target){   
  161.         if($(target).poshytip){   
  162.             removeTip_poshy(target);   
  163.         }else{   
  164.             removeTip_easyui(target);   
  165.         }   
  166.     }   
  167.     function removeTip_poshy(target){   
  168.         $.data(target, "validatebox").tip = false;   
  169.         $(target).poshytip("hide");   
  170.         //$(target).poshytip("destroy");   
  171.     };   
  172.     function removeTip_easyui(target){   
  173.         var tip = $.data(target, "validatebox").tip;   
  174.         if (tip) {   
  175.             tip.remove();   
  176.             $.data(target, "validatebox").tip = null;   
  177.         }   
  178.     };   
  179.     function validate(target) {   
  180.         var data = $.data(target, "validatebox");   
  181.         var opts = data.options;   
  182.         var tip = data.tip;   
  183.         var box = $(target);   
  184.         var value = box.val();   
  185.         function setMessage(msg) {   
  186.             data.messageChg = true;   
  187.             data.message = msg;   
  188.         };   
  189.         function doValidate(validType) {   
  190.             var result = /([a-zA-Z_]+)(.*)/.exec(validType);   
  191.             var rule = opts.rules[result[1]];   
  192.             if (rule && value) {   
  193.                 var param = eval(result[2]);   
  194.                 if (!rule["validator"](value, param)) {   
  195.                     box.addClass("validatebox-invalid");   
  196.                     var message = rule["message"];   
  197.                     if (param) {   
  198.                         for (var i = 0; i < param.length; i++) {   
  199.                             message = message.replace(   
  200.                                     new RegExp("\\{" + i + "\\}""g"), param[i]);   
  201.                         }   
  202.                     }   
  203.                     setMessage(opts.invalidMessage || message);   
  204.                     if (data.validating) {   
  205.                         createTipToShow(target);   
  206.                     }   
  207.                     return false;   
  208.                 }   
  209.             }   
  210.             return true;   
  211.         };   
  212.         if (opts.required) {   
  213.             if (value == "") {   
  214.                 box.addClass("validatebox-invalid");   
  215.                 setMessage(opts.missingMessage);   
  216.                 if (data.validating) {   
  217.                     createTipToShow(target);   
  218.                 }   
  219.                 return false;   
  220.             }   
  221.         }   
  222.         if (opts.validType) {   
  223.             if (typeof opts.validType == "string") {   
  224.                 if (!doValidate(opts.validType)) {   
  225.                     return false;   
  226.                 }   
  227.             } else {   
  228.                 for (var i = 0; i < opts.validType.length; i++) {   
  229.                     if (!doValidate(opts.validType[i])) {   
  230.                         return false;   
  231.                     }   
  232.                 }   
  233.             }   
  234.         }   
  235.         box.removeClass("validatebox-invalid");   
  236.         removeTip(target);   
  237.         return true;   
  238.     };   
  239.     $.fn.validatebox = function(options, params) {   
  240.         if (typeof options == "string") {   
  241.             return $.fn.validatebox.methods[options](this, params);   
  242.         }   
  243.         options = options || {};   
  244.         return this.each(function() {   
  245.                     var state = $.data(this"validatebox");   
  246.                     if (state) {   
  247.                         $.extend(state.options, options);   
  248.                     } else {   
  249.                         init(this);   
  250.                         $.data(this"validatebox", {   
  251.                                     options : $.extend(   
  252.                                                     {},   
  253.                                                     $.fn.validatebox.defaults,   
  254.                                                     $.fn.validatebox.parseOptions(this),   
  255.                                                     options)   
  256.                                 });   
  257.                     }   
  258.                     bindEvents(this);   
  259.                 });   
  260.     };   
  261.     $.fn.validatebox.methods = {   
  262.         destroy : function(jq) {   
  263.             return jq.each(function() {   
  264.                         destroyBox(this);   
  265.                     });   
  266.         },   
  267.         validate : function(jq) {   
  268.             return jq.each(function() {   
  269.                         validate(this);   
  270.                     });   
  271.         },   
  272.         isValid : function(jq) {   
  273.             return validate(jq[0]);   
  274.         }   
  275.     };   
  276.     $.fn.validatebox.parseOptions = function(target) {   
  277.         var t = $(target);   
  278.         return $.extend({}, $.parser.parseOptions(target, ["validType",   
  279.                                 "missingMessage""invalidMessage",   
  280.                                 "tipPosition", {   
  281.                                     delay : "number"  
  282.                                 }]), {   
  283.                     required : (t.attr("required") ? true : undefined)   
  284.                 });   
  285.     };   
  286.     $.fn.validatebox.defaults = {   
  287.         required : false,   
  288.         validType : null,   
  289.         delay : 200,   
  290.         missingMessage : "This field is required.",   
  291.         invalidMessage : null,   
  292.         tipPosition : "right",   
  293.         rules : {   
  294.             email : {   
  295.                 validator : function(value) {   
  296.                     return /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i   
  297.                             .test(value);   
  298.                 },   
  299.                 message : "Please enter a valid email address."  
  300.             },   
  301.             url : {   
  302.                 validator : function(value) {   
  303.                     return /^(https?|ftp):\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i   
  304.                             .test(value);   
  305.                 },   
  306.                 message : "Please enter a valid URL."  
  307.             },   
  308.             length : {   
  309.                 validator : function(value, param) {   
  310.                     var len = $.trim(value).length;   
  311.                     return len >= param[0] && len <= param[1];   
  312.                 },   
  313.                 message : "Please enter a value between {0} and {1}."  
  314.             },   
  315.             remote : {   
  316.                 validator : function(value, param) {   
  317.                     var data = {};   
  318.                     data[param[1]] = value;   
  319.                     var isValidate  = $.ajax({   
  320.                                 url : param[0],   
  321.                                 dataType : "json",   
  322.                                 data : data,   
  323.                                 async : false,   
  324.                                 cache : false,   
  325.                                 type : "post"  
  326.                             }).responseText;   
  327.                     return isValidate  == "true";   
  328.                 },   
  329.                 message : "Please fix this field."  
  330.             }   
  331.         }   
  332.     };   
  333. })(jQuery);  

使用方式:

引入poshytip用到样式文件以及核心库,在引入Easyui核心库之后,引入我修改的plugins目下的validatebox对应的组件:

  1. <head>  
  2.     <meta charset="UTF-8">  
  3.     <title>Basic ValidateBox - jQuery EasyUI Demo</title>  
  4.     <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">  
  5.     <link rel="stylesheet" type="text/css" href="../../themes/icon.css">  
  6.     <link rel="stylesheet" type="text/css" href="../demo.css">  
  7.     <link rel="stylesheet" type="text/css" href="../../poshytip/src/tip-yellowsimple/tip-yellowsimple.css">  
  8.     <link rel="stylesheet" type="text/css" href="../../poshytip/src/tip-green/tip-green.css ">  
  9.     <link rel="stylesheet" type="text/css" href="../../poshytip/src/tip-darkgray/tip-darkgray.css">  
  10.     <link rel="stylesheet" type="text/css" href="../../poshytip/src/tip-skyblue/tip-skyblue.css">  
  11.     <link rel="stylesheet" type="text/css" href="../../poshytip/src/tip-twitter/tip-twitter.css">  
  12.     <link rel="stylesheet" type="text/css" href="../../poshytip/src/tip-violet/tip-violet.css">  
  13.     <link rel="stylesheet" type="text/css" href="../../poshytip/src/tip-yellow/tip-yellow.css">  
  14.     <script type="text/javascript" src="../../jquery-1.8.0.min.js"></script>  
  15.     <script type="text/javascript" src="../../jquery.easyui.min.js"></script>  
  16.     <script type="text/javascript" src="../../plugins/jquery.validatebox.js"></script>  
  17.     <script type="text/javascript" src="../../poshytip/src/jquery.poshytip.min.js"></script>  
  18.     <script trpe="text/javascript" src="../../locale/easyui-lang-zh_CN.js"></script>  
  19. </head>  

注意以下几点:

  • poshytip插件的几个css样式分别对应该插件的几种皮肤,要是只用一个的话,只要引入一个就够了
  • 引入plugins目录下的jquery.validatebox.js其实是对核心库对应组件的覆盖定义
  • 本次修改是兼容validatebox原有方式的,即引入poshytip则会使用poshytip方式,不引入的话就是用原方式,完全无冲突
  • 在easyui的window等组件中使用,poshytip的消息体会被window等遮住,需要改poshytip插件每个皮肤下css文件定义的z-index值,由1000改为9900000

效果演示:

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

给我留言

留言无头像?


×