JQuery實作簡單驗證碼提示解決方案_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('

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