Use the JS components to implement instance code with the tooltip verification box

This component relies on jQuery

The jQuery IT is 1.8,

is compatible with IE8, IE9, Google, Firefox, etc.

// Verify input box function validatecomping (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 ​​”; // Verify the style THIS.VALIDATE = false; this.faileiconclass =” icon-time “; // Verify the style VARIDateroot = $ (‘
  
'); var $ tooltip = $ validateroot.children (". Validate-v1-tooltip"); var $ input = _input; if ($ INPUT! = Undefined) {var maxwidth = $ = $ 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("textchange focus",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) { $tooltip.hide(); 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); that.validate = true; }else{ regvali[i].view.setIconClass(that.faileIconClass); $input.css("border","1px solid red"); that.validate = false; break; } } }); $validateRoot.append($input); }else{ return; } } this.dom = function(){ return $validateRoot; } function ValidateMessage(message,iconFontClass){ var dom = $('
'); 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 (MSSAGE); THIS. Dom = Dom;} $ validateroot.insertafter ($ (input)); $ (input) .remove ();}
The following is an HTML code

  The method is as follows   
$ ( Function () {var c = new validatecompent (“# test”);});

Depending on jQuery,
Also attached to jQuery TextChange events After the code, the TextChange code is placed in jQuery, before using the method.
  / ** * jQuery "SPLENDID TEXTCHANGE" PLUGIN * http://benalpert.com/2013/06/18/a-near-perfect-oninput-shim- For-IE-8-and-9.html * * (c) 2013 Ben Alpert, Released Under the mit license * / (function) {var testnode = document.createElement ("infut"); var isinputSupported = "OnInput "in Testnode && (! (" DocumentMode "in Document) || Document.documentMode> 9); var HasinputCapabilities = functionION (ELEM) {// The html5 spec lists many more type than `text` and` password` ON // Which the Input Event Id IE 8 OR // 9, So We don't check . them here // TODO:  should be supported too but IE seems to reset the // selection when changing textarea contents during a selectionchange // event so it's not listed here for now return elem.nodeName === "INPUT. "&& (elem.type ===" text "|| Elem.Type ===" password ");}; var activeElement = null; var activeElementValue = NULL; var ActiveElementValueProp = null; / ** * (for old ie ..) Replacement getter / setter for the `value` property that * gets set on the active element * / var newValueProp = {get: function () {return activeElementValueProp.get.call (this);}, set: function (val ){ActiveElementValue = val; activeElementValueProp.set.call (this, val);}}; / ** * (. For old IE) Starts tracking propertychange events on the passed-in element * and override the value property so that we can distinguish user events from * value changes in JS * / var startWatching = function (target) {activeElement = target;. activeElementValue = target.value; activeElementValueProp = Object.getOwnPropertyDescriptor (target.constructor.prototype, "value"); Object.defineProperty ( activeElement, "value", newValueProp); activeElement.attachEvent ( "onpropertychange", handlePropertyChange);};. / ** * (For old IE) Removes the event listeners from the currently-tracked * element, if any exists * /. Var stopwatching = function () {if (! activeElement) return; // delete restores the original property definition delete activeElement.value; activeElement.detachEvent ( "onpropertychange", handlePropertyChange); activeElementValue = null;; activeElementValueProp = null;}; activeElement = null / ** * (. For old IE) Handles a propertychange event , sending a textChange event if * the value of the active element has changed * / var handlePropertyChange = function (nativeEvent) {if (nativeEvent.propertyName == "value"!) return;. var value = nativeEvent.srcElement.value; if (Value === ActiveElementValue) Return; ActiveElementValue = Value; $ (ActiveElement); "TextChange");}; if (isInputSupported) {$ (document) .on ("Input", function (e) {//// In Modern Browsers (IE, Not IE 8 or 9), The Input Event Is // EXACTLY What WAWANT So Fall Through Here and Trigger The // Event ... if (e.target.nodeename! == "textarea") {// ... unless it's a textarea, in which case we don't fire an // Event (E.TARGET) .TRIGGER ("TEXTCHANGE";}});}});}});}}} .on ("Focusin", Function (e) {// In IE 8, we can capture almost all .value changes by adding a // propertychange handler and looking for events with propertyName // equal to 'value'. // In IE 9, propertychange fires for most input events but is Buggy // and doesn't fire when textly, // selectionChange Appears to fire in all of the remaining case so // we catch those and forward the Event if the value HASChanged. // in Either Case, We don't want to call the Event handler if the // value is change from js so we redine a setter for `.Value` // That Updates Our ActiveElelementValue Variable, Allowing US to // Ignore Those Changes. {// stopwatching () SHOULD BE A NOOP Here But We call it just in // case we missed a blur Event Somehow. stopwatching (); startwatching (e.target) }}) .on ("FOCUSOUT", function () {stopwatching ();}) .on ("SelectionChange Keyup Keydown", function () {// on the selectionchange energy Event, E.TARGET IS JUST Document Which // Isn't Helpful for US So Just Check ActiveElement Instead. // 90% of The Time, Keydown and Keyup Aren'T necessary. IE 8 fails // to fire propertychange on the first input event after setting // `value` from a script and fires only keydown, keypress, keyup. // Catching keyup usually gets it and catching keydown lets us fire / / an event for the first keystroke if user does a key repeat // (it'll be a little delayed: right before the second keystroke) // Other input methods (eg, paste) seem to fire selectionchange // normally if.. (activeElement && activeElement.value == activeElementValue!) {activeElementValue = activeElement.value; $ (activeElement) .trigger ( "textchange");}});}}) (jQuery); 

Get verification results

 $ (function () {var c = new validatecompent ("# test"); $ ("# TES)T "). Click (Function () {console.log (c.validate);};});