欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

input输入框错误提示信息

程序员文章站 2022-05-28 12:45:40
...

图形验证码：
 
<script src="jquery-1.9.1.js"></script>
<script src="inputTip.js"></script>

<style>
.item_mini {
   margin-top:10rem;
}
</style>
<script type="text/javascript">
function tipInput(element,flag,message) {
  if(flag) {
     $("#"+element).css("border", "1px solid #d5d5d5");
     $("#"+element).unbind("focus");
  }else {
      $("#"+element).css("border", "1px solid red");
      $("#"+element).bind("focus",function(){
     	 $("#"+element).errortip({
     	    text: message,
         	show: true
         })
      });
  }
  $("#"+element).bind("blur",function() {
  	$("#"+element).errortip({
  		show: false
  	})
  });
}

function checkCode() {
	 var imgcode = $("#imgcode").val();
    if(imgcode==null || imgcode=='') {
       tipInput("imgcode",false,"请输入图形验证码");
    }else {
       tipInput("imgcode",true,"请输入图形验证码");
    }
}
</script>

<body>
<div class="item_mini">
     <span class="wid_105">图形验证码：</span>
     <span><input type="text" placeholder="请输入图形验证码" class="wid_150" id="imgcode" onblur="checkCode()"><span>
</div>
</body>
 2.inputTip.js
;(function($){$.fn.errortip=function(options){var defaults={text:'输入有误，请重新输入',show:false,bg:'#fff',border:'#ddd',height:30,width:150,font:13};var options=$.extend(defaults,options);var thisParent=$(this).parent()
if(options.show){if(thisParent.find(".judgeShow").size()==0){thisParent.css("position","relative");thisParent.append('<div class="judgeShow" style=\"display:block;position: absolute;height:'+options.height+'px;line-height:'+options.height+'px;width:'+options.width+'px;left: 0;top: -7px;transform: translate(-2%, -100%);z-index: 0;border-radius: 4px;font-size: '+options.font+'px;color: #333;border: 1px solid '+options.border+';\"><div style=\"position: absolute; width: 7px;height: 7px;bottom:0;left:15px;background-color: '+options.bg+';z-index: -1;border: 1px solid '+options.border+';transform:translate(-50%, 50%) rotate(45deg);\"></div><div style=\"position: relative;color: #000;background-color: '+options.bg+';border-radius: 3px;\"><div style=\"text-align: center;\">'+options.text+'</div></div></div>');}else{thisParent.find(".judgeShow").css("display","block");}}else{thisParent.find(".judgeShow").css("display","none");}}})(jQuery);
 
 

上一篇： Vue中的scoped及穿透方法

下一篇： JS笔记（一）：基础知识

推荐阅读