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

本组件依赖JQuery

创新互联-专业网站定制、快速模板网站建设、高性价比定州网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式定州网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖定州地区。费用合理售后完善，10年实体公司更值得信赖。

本人测试的JQuery 是1.8，

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

//验证输入框
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 = $('');
  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:  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);
 activeElement = null;
 activeElementValue = null;
 activeElementValueProp = 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).trigger("textchange");
};
if (isInputSupported) {
  $(document)
    .on("input", function(e) {
      // In modern browsers (i.e., not IE 8 or 9), the input event is
      // exactly what we want so fall through here and trigger the
      // event...
      if (e.target.nodeName !== "TEXTAREA") {
        // ...unless it's a textarea, in which case we don't fire an
        // event (so that we have consistency with our old-IE shim).
        $(e.target).trigger("textchange");
      }
    });
} else {
  $(document)
    .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 text is deleted, but conveniently,
      // selectionchange appears to fire in all of the remaining cases so
      // we catch those and forward the event if the value has changed.
      // In either case, we don't want to call the event handler if the
      // value is changed from JS so we redefine a setter for `.value`
      // that updates our activeElementValue variable, allowing us to
      // ignore those changes.
      if (hasInputCapabilities(e.target)) {
        // 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 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 (e.g., paste) seem to fire selectionchange
      // normally.
      if (activeElement && activeElement.value !== activeElementValue) {
        activeElementValue = activeElement.value;
        $(activeElement).trigger("textchange");
      }
    });
}
})(jQuery);</pre></div><p>获取验证结果</p><div><pre>$(function(){
  var c = new ValidateCompent("#test");
  $("#test").click(function(){
    console.log(c.validate);
  });
});</pre></div><p>自定义显示方案</p><div><pre>$(function(){
  var c = new ValidateCompent("#test");
  $("#test").click(function(){
    console.log(c.validate);
  });
  c.dom().addClass("你的样式类");
});</pre></div><p>设置图标字体样式</p><div><pre>$(function(){
  var c = new ValidateCompent("#test");
  $("#test").click(function(){
    console.log(c.validate);
  });
  c.successIconClass = "";//成功时的样式
  c.faileIconClass = "";//失败时的样式
});</pre></div><p>效果图如下</p><p>分别是成功，部分成功，全部失败选中，未选中的样式效果，（勾叉是用的字体css,建议自行寻找字体替代）</p><p><img src="/upload/otherpic52/67677.png" alt="使用JS组件实现带ToolTip验证框的实例代码"><img src="/upload/otherpic52/67678.png" alt="使用JS组件实现带ToolTip验证框的实例代码"><img src="/upload/otherpic52/67679.png" alt="使用JS组件实现带ToolTip验证框的实例代码"><img src="/upload/otherpic52/67680.png" alt="使用JS组件实现带ToolTip验证框的实例代码"></p><p><strong>总结</strong></p><p>以上所述是小编给大家介绍的使用JS组件实现带ToolTip验证框的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对创新互联网站的支持！</p>            
            
                            <br>
                网页标题：使用JS组件实现带ToolTip验证框的实例代码                <br>
                浏览路径：<a href="http://scyanting.com/article/gsccdi.html">http://scyanting.com/article/gsccdi.html</a>
            </div>
        </div>
        <div class="contentr fr">
            <h3>其他资讯</h3>
            <ul>
                <li>
                        <a href="/article/dsidpop.html">php怎么打印出数据库表,php怎么打印出数据库表</a>
                    </li><li>
                        <a href="/article/dsidpos.html">javascript继续,必须启用JavaScript才能继续</a>
                    </li><li>
                        <a href="/article/dsidpoc.html">java代码写动图,java动态图片代码</a>
                    </li><li>
                        <a href="/article/dsidjic.html">html5超炫,html有啥炫酷的代码</a>
                    </li><li>
                        <a href="/article/dsidjpj.html">html5min,html5名片</a>
                    </li>            </ul>
        </div>
    </div>
</div>
<!--底部-->
<footer>
    <div class="foot">
        <div class="container">
            <h1>盐亭大橙子建站您身边的网站制作服务商</h1>
            <div class="foot1">
                <ul>
                    <li>
                        <dl><i class="iconfont"></i><b>地址ADDRESS</b></dl>
                        <p>四川-成都青羊区太升南路288号<br>
                            锦天国际A座10楼
                        </p>
                    </li>
                    <li>
                        <dl><i class="iconfont"></i><b>电话/TEL</b></dl>
                        <p><a href="tel:02886922220" target="_blank">028 86922220</a> (工作日)<br>
                            <a href="tel:18980820575" target="_blank">1898082 0575</a> ( 7x24 )
                        </p>
                    </li>
                    <li>
                        <dl><i class="iconfont"></i><b>QQ咨询</b></dl>
                        <p> 244261566 (售前)<br>
                            631063699 (售后)
                        </p>
                    </li>
                    <li>
                        <dl><i class="iconfont"></i><b>邮箱/E: mail</b></dl>
                        <p> service@cdcxhl.com (业务)<br>
                            hr@cdcxhl.com (求职)
                        </p>
                    </li>
                </ul>
            </div>
            <div class="link">
                友情链接：
                <a href="http://www.njzdgg.com/" title="内江广告" target="_blank">内江广告</a>   <a href="http://www.6mz.cn/" title="成都网站运维" target="_blank">成都网站运维</a>   <a href="https://www.cdcxhl.cn/
" title="腾讯云虚拟主机" target="_blank">腾讯云虚拟主机</a>   <a href="http://www.kswsj.cn/tuiguang/" title="网站推广营销" target="_blank">网站推广营销</a>   <a href="http://www.cdhuace.com/zhuangxiu.html" title="成都工装公司" target="_blank">成都工装公司</a>   <a href="http://www.4006tel.net/mobile/" title="app开发" target="_blank">app开发</a>   <a href="http://www.cqcxhl.com/" title="重庆网站设计" target="_blank">重庆网站设计</a>   <a href="http://www.cqcxhl.com/miniprogram/" title="重庆小程序开发公司" target="_blank">重庆小程序开发公司</a>   <a href="http://www.cxhljz.cn/app/" title="ios开发" target="_blank">ios开发</a>   <a href="http://www.dzwzjz.com/" title="达州网站制作" target="_blank">达州网站制作</a>               </div>
        </div>
    </div>
    <div class="copy container">
        Copyright © 2017-2023 All Rights Reserved. 青羊区大橙子信息咨询工作室 版权所有  <a href="http://www.beian.miit.gov.cn/" target="_blank" rel="nofollow">蜀ICP备2022028542号-18</a>
        [原创设计,独立版权。未经许可.不得拷贝或镜像]<br>
        <a href="http://www.kswsj.cn/" target="_blank">网站营销推广</a> | <a href="https://www.cdcxhl.com/pinpai.html" target="_blank">品牌网站设计</a> | <a href="http://www.cdweb.net/" target="_blank">自适应网站制作</a> | <a href="http://cdkjz.cn/wangzhan/pinpai/" target="_blank">品牌网站制作</a> | <a href="http://chengdu.cdxwcx.cn/" target="_blank">成都网站制作</a> | <a href="https://www.cdcxhl.com/cloud/" target="_blank">云服务器</a> | <a href="https://www.cdcxhl.com/weihu/abazhou.html" target="_blank">盐亭网站维护</a> | (盐亭网站制作QQ : 631063699 )</div>
</footer>
<!--在线咨询-->
<div class="fot">
    <ul>
        <li>
            <a href="mqqwpa://im/chat?chat_type=wpa&uin=532337155&version=1&src_type=web&web_src=oicqzone.com" target="_blank">
                <img src="/Public/Home/img/fot1.png" alt="建站咨询">
                <p>在线咨询</p>
            </a>
        </li>
        <li>
            <a href="tel:18980820575" target="_blank">
                <img src="/Public/Home/img/fot2.png" alt="建站电话">
                <p>拨打电话</p>
            </a>
        </li>
    </ul>
</div>
</body>
</html>
<script>
    $(".con img").each(function(){
        var src = $(this).attr("src");    //获取图片地址
        var str=new RegExp("http");
        var result=str.test(src);
        if(result==false){
            var url = "https://www.cdcxhl.com"+src;    //绝对路径
            $(this).attr("src",url);
        }
    });
    window.onload=function(){
        document.oncontextmenu=function(){
            return false;
        }
    }
</script>