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

input输入框错误提示信息

程序员文章站 2022-05-28 12:53:46
...

图形验证码：
 
<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);
 
 

上一篇： ethz.ssh2 本地操作linux服务器 远程连接linux服务ss2远程执行shell脚本 

下一篇： java socket 心跳链接 javasocket心跳 

推荐阅读