input输入框错误提示信息
图形验证码：
<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);