input输入框错误提示信息 -

落叶换新叶

浏览: 25524 次
性别:

最近访客更多访客>>

ehu1986

u010214413

zyhby2017

javaweb小王子

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

input输入框错误提示信息

博客分类：

前段 css

图形验证码：

<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);

分享到：