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