easyui之validatebox控件分析

/**
 * validatebox - jQuery EasyUI
 *
 * Licensed under the GPL:
 *   http://www.gnu.org/licenses/gpl.txt
 *
 * Copyright 2010 stworthy [ stworthy@gmail.com ]
 *
 */
/**
 * 太简单,不进行注释分析
 */
(function ($) {

    function init(target) {
        $(target).addClass('validatebox-text');
    }

    /**
     * destroy the box, including it's tip object.
     */
    function destroyBox(target) {
        var tip = $.data(target, 'validatebox').tip;
        if (tip) {
            tip.remove();
        }
        $(target).remove();
    }

    function bindEvents(target) {
        var box = $(target);
        var tip = $.data(target, 'validatebox').tip;

        var time = null;
        box.unbind('.validatebox').bind('focus.validatebox', function () {
            if (time) {
                clearInterval(time);
            }
            time = setInterval(function () {
                validate(target);
            }, 200);
        }).bind('blur.validatebox', function () {
            clearInterval(time);
            time = null;
            hideTip(target);
        }).bind('mouseover.validatebox', function () {
            if (box.hasClass('validatebox-invalid')) {
                showTip(target);
            }
        }).bind('mouseout.validatebox', function () {
            hideTip(target);
        });
    }

    /**
     * show tip message.
     */
    function showTip(target) {
        var box = $(target);
        var msg = $.data(target, 'validatebox').message;
        var tip = $.data(target, '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(target, 'validatebox').tip = tip;
        }
        tip.find('.validatebox-tip-content').html(msg);
        tip.css({
            display: 'block',
            left: box.offset().left + box.outerWidth(),
            top: box.offset().top
        })
    }

    /**
     * hide tip message.
     */
    function hideTip(target) {
        var tip = $.data(target, 'validatebox').tip;
        if (tip) {
            tip.remove();
            $.data(target, 'validatebox').tip = null;
        }
    }

    /**
     * do validate action
     */
    function validate(target) {
        var opts = $.data(target, 'validatebox').options;
        var tip = $.data(target, 'validatebox').tip;
        var box = $(target);
        var value = box.val();

        function setTipMessage(msg) {
            $.data(target, 'validatebox').message = msg;
        }

        // if the box is disabled, skip validate action.
        var disabled = box.attr('disabled');
        if (disabled == true || disabled == 'true') {
            return true;
        }

        if (opts.required) {
            if (value == '') {
                box.addClass('validatebox-invalid');
                setTipMessage(opts.missingMessage);
                showTip(target);
                return false;
            }
        }
        if (opts.validType) {
            var result = /([a-zA-Z_]+)(.*)/.exec(opts.validType);
            var rule = opts.rules[result[1]];
            if (value && rule) {
                var param = eval(result[2]);
                if (!rule['validator'](value, param)) {
                    box.addClass('validatebox-invalid');

                    var message = rule['message'];
                    if (param) {
                        for (var i = 0; i < param.length; i++) {
                            message = message.replace(new RegExp("\\{" + i + "\\}", "g"), param[i]);
                        }
                    }
                    setTipMessage(opts.invalidMessage || message);
                    showTip(target);
                    return false;
                }
            }
        }

        box.removeClass('validatebox-invalid');
        hideTip(target);
        return true;
    }

    $.fn.validatebox = function (options) {
        if (typeof options == 'string') {
            switch (options) {
                case 'destroy':
                    return this.each(function () {
                        destroyBox(this);
                    });
                case 'validate':
                    return this.each(function () {
                        validate(this);
                    });
                case 'isValid':
                    return validate(this[0]);
            }
        }

        options = options || {};
        return this.each(function () {
            var state = $.data(this, 'validatebox');
            if (state) {
                $.extend(state.options, options);
            } else {
                init(this);
                var t = $(this);
                var opx=eval("({"+$(this).attr("data-options")+"})");
                state = $.data(this, 'validatebox', {
                    options: $.extend({}, $.fn.validatebox.defaults, {
                        required: (t.attr('required') ? (t.attr('required') == 'true' || t.attr('required') == true) : undefined),
                        validType: (t.attr('validType') || undefined),
                        missingMessage: (t.attr('missingMessage') || undefined),
                        invalidMessage: (t.attr('invalidMessage') || undefined)
                    }, options,opx)
                });
            }

            bindEvents(this);
        });
    };

    $.fn.validatebox.defaults = {
        required: false,
        validType: null,
        missingMessage: 'This field is required.',
        invalidMessage: null,

        rules: {
            email: {
                validator: function (value) {
                    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.test(value);
                },
                message: 'Please enter a valid email address.'
            },
            url: {
                validator: function (value) {
                    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.test(value);
                },
                message: 'Please enter a valid URL.'
            },
            length: {
                validator: function (value, param) {
                    var len = $.trim(value).length;
                    return len >= param[0] && len <= param[1]
                },
                message: 'Please enter a value between {0} and {1}.'
            }
        }
    };
})(jQuery);