JQuery实现简单验证码提示解决方案 |
本文标签:验证码,提示 先看效果图: ![]() 要求:当输入框获得焦点时,自动显示验证图片 。 代码如下(学习而已,仅供参考): 复制代码 代码如下: /***********************下是验证码对象*****************/ var Validation = {}; Validation.init = function(eleName,imageSrc){ this.image = imageSrc; $(#+eleName).focusin(function(){ Validation.show(eleName); }); } Validation.image = ; Validation.display=false; Validation.width = 100px; Validation.height = 30px; Validation.div = null; Validation.show = function(eleName){ if(this.display==false){ //首次显示 if(this.div==null){ $(#+eleName).after(<div style="display:none;" id="div_validation_+eleName+" title="点击更换"></div>); this.div = $(#div_validation_+eleName); this.div.css(position,absolute); this.div.css(cursor,pointer); this.div.css(border,1px solid #CCC); this.div.css(background-color,#FFF); this.div.css(background-position,center); this.div.css(background-repeat,no-repeat); this.div.css(height,this.height); this.div.css(width,this.width); var objOffset = $(#+eleName).offset(); objOffset.top+=$(#+eleName).height()+6; this.div.offset(objOffset); this.div.css(background-image,url(+Validation.image+&_t=+new Date()+)); this.div.css(display,inline-block); this.display = true; //点击更换 this.div.click(function(){ Validation.div.css(background-image,url(+Validation.image+&_t=+new Date()+)); }); } else{ this.div.css(background-image,url(+Validation.image+&_t=+new Date()+)); this.display = true; this.div.css(display,inline-block); } } } Validation.hide =function(){ if(this.display==true){ this.display = false; this.div.hide(); } } 使用方式: 复制代码 代码如下: //验证码对象初始化 Validation.init(validation,Ajax.ashx?handle=validation); // 输入框ID 验证图片地址 //隐藏 Validation.hide(); |