带ToolTip验证框JS组件

本组件依赖JQuery
本人测试的JQuery 是1.8，
兼容IE8,IE9，谷歌，火狐等。

/** * 验证输入框 * @param {Object} input */function ValidateCompent(input) {    var _input = $(input).clone(true);    _input.css("height", $(input).css("height"));    _input.css("width", $(input).css("width"));    var border = _input.css("border");    this.successIconClass = "icon-tick";    this.validate = false;    this.faileIconClass = "icon-times";    var $validateRoot = $('<div class="validate-v1-container"><div class="validate-v1-tooltip"></div></div>');    var $tooltip = $validateRoot.children(".validate-v1-tooltip");    var $input = _input;    if($input != undefined) {        var maxWidth = $input.css("width");        var maxHeight = $input.css("height");        $validateRoot.css("display", "inline");        $validateRoot.css("position", "relative");        $validateRoot.css("width", maxWidth);        $validateRoot.css("height", maxHeight);        $tooltip.css("width", maxWidth);        $tooltip.css("padding", "0px 5px");        $tooltip.css("position", "absolute");        $tooltip.css("top", "0px");        $tooltip.css("z-index", "999999");        $tooltip.css("background-color", "white");        $tooltip.css("border", "solid 1px rgb(188,188,188)");        $tooltip.css("left", parseInt(maxWidth) + 10 + "px");        $tooltip.hide();        var validateOption = $input.attr("data-vali-option");        if(validateOption != undefined) {            validateOption = JSON.parse(validateOption);            var that = this;            var regvali = new Array();            $tooltip.hide();            if(validateOption.length == 0) {                return;            }            for(var i = 0; i < validateOption.length; i++) {                var message = validateOption[i].message;                var pattern = validateOption[i].pattern;                var reg = new RegExp(pattern);                var messageView = new ValidateMessage(message, that.faileIconClass);                regvali.push({                    "reg": reg,                    "view": messageView                });                $tooltip.append(messageView.dom);            }            $tooltip.css("height", (parseInt(maxHeight) + 15) * validateOption.length);            $input.on("focus propertychange input", function(e) {                $tooltip.show();                for(var i = 0; i < regvali.length; i++) {                    if(regvali[i].reg.test($input.val())) {                        regvali[i].view.setIconClass(that.successIconClass);                        regvali[i].view.dom.css("color", "green");                    } else {                        regvali[i].view.setIconClass(that.faileIconClass);                        regvali[i].view.dom.css("color", "red");                    }                }            })            $input.on("blur", function(e) {                for(var i = 0; i < regvali.length; i++) {                    if(regvali[i].reg.test($input.val())) {                        regvali[i].view.setIconClass(that.successIconClass);                        $input.css("border", border == undefined ? "border 1px solid rgb(188,188,188)" : border);                        that.validate = true;                    } else {                        regvali[i].view.setIconClass(that.faileIconClass);                        $input.css("border", "1px solid red");                        that.validate = false;                        break;                    }                }                $tooltip.hide();            });            $validateRoot.append($input);        } else {            return;        }    }    this.dom = function() {        return $validateRoot;    }    function ValidateMessage(message, iconFontClass) {        var dom = $('<div class="validate-message"><span class="vticon"></span><span class="vmessage"></span></div>');        var $icon = dom.children(".vticon");        var $message = dom.children(".vmessage");        $message.css("line-height", "28px");        $message.css("padding", "5px 5px");        $message.css("padding-right", "10px");        $message.css("word-break", "break-all");        $message.css("word-wrap", "break-word");        $message.css("font-size", "14px");        $message.css("position", "relative");        $message.css("z-index", "999999");        this.setIconClass = function(iconClass) {            $icon.removeClass();            $icon.addClass("vticon");            $icon.addClass(iconClass);        }        this.getIcon = function() {            return $icon;        }        this.setMessageText = function(_message) {            $message.html(_message);        }        this.getMessageText = function() {            return $message;        }        this.setIconClass(iconFontClass);        this.setMessageText(message);        this.dom = dom;    }    $validateRoot.insertAfter($(input));    $(input).remove();}

以下是HTML代码

<input id="test" data-vali-option='[{"pattern":"[1-9]+","message":"只能输入1-9的数"},{"pattern":"[a-z]+","message":"只能输入a-z的数"}]' />

使用方法如下

$(function(){    var c = new ValidateCompent("#test");});

获取验证结果

$(function(){    var c = new ValidateCompent("#test");    $("#test").click(function(){        console.log(c.validate);    });});

自定义显示方案

$(function(){    var c = new ValidateCompent("#test");    $("#test").click(function(){        console.log(c.validate);    });    c.dom().addClass("你的样式类");});

设置图标字体样式

$(function(){    var c = new ValidateCompent("#test");    $("#test").click(function(){        console.log(c.validate);    });    c.successIconClass = "";//成功时的样式    c.faileIconClass = "";//失败时的样式});

效果图如下
分别是成功，部分成功，全部失败选中，未选中的样式效果，（勾叉是用的字体css,建议自行寻找字体替代）

优化：去除textchange事件，改为propertychange + input实时监控事件。