真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

使用JS組件實(shí)現(xiàn)帶ToolTip驗(yàn)證框的實(shí)例代碼

本組件依賴JQuery

創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比定州網(wǎng)站開(kāi)發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式定州網(wǎng)站制作公司更省心,省錢(qián),快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋定州地區(qū)。費(fèi)用合理售后完善，10年實(shí)體公司更值得信賴。

本人測(cè)試的JQuery 是1.8，

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

//驗(yàn)證輸入框
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";//驗(yàn)證通過(guò)時(shí)的樣式
  this.validate = false;
  this.faileIconClass = "icon-times";//驗(yàn)證失敗時(shí)的樣式
  var $validateRoot = $('
');
  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代碼

使用方法如下

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

依賴JQuery,

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

/**
 * 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("input");
var isInputSupported = "oninput" in testNode && 
  (!("documentMode" in document) || document.documentMode > 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: