使用JS组件实现带ToolTip验证框的实例代码

JavaScript 前端之家
前端之家收集整理的这篇文章主要介绍了使用JS组件实现带ToolTip验证框的实例代码，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

本组件依赖JQuery

本人测试的JQuery 是1.8，

兼容IE8,IE9，谷歌，火狐等。

'); 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
'); 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代码

使用方法如下

依赖JQuery,

另外附上JQuery textchange事件的代码，textchange代码放在JQuery之后，在使用方法之前。

9); var hasInputCapabilities = function(elem) { // The HTML5 spec lists many more types than `text` and `password` on // which the input event is triggered but none of them exist in IE 8 or // 9,so we don't check them here. // TODO: