JQuery實現(xiàn)簡單驗證碼提示解決方案
更新時間：2012年12月20日 16:17:39 作者：
驗證碼提示功能在ui界面的登陸及提交窗口中起到了一定的有好作用，極大的提高了用戶體驗，本文帶著這個美好的祝愿為您實現(xiàn)簡單驗證碼提示,需要的朋友可以了解下
先看效果圖：
要求：當(dāng)輸入框獲得焦點時，自動顯示驗證圖片。
代碼如下（學(xué)習(xí)而已，僅供參考）：
/***********************下是驗證碼對象*****************/
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();
要求：當(dāng)輸入框獲得焦點時，自動顯示驗證圖片。
代碼如下（學(xué)習(xí)而已，僅供參考）：
復(fù)制代碼 代碼如下:
/***********************下是驗證碼對象*****************/
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();
}
}
使用方式：
復(fù)制代碼 代碼如下:
//驗證碼對象初始化
Validation.init('validation','Ajax.ashx?handle=validation');
// 輸入框ID 驗證圖片地址
//隱藏
Validation.hide();
相關(guān)文章
這篇文章主要介紹了基于jquery和svg實現(xiàn)超炫酷的動畫特效,想學(xué)習(xí)SVG的童鞋們可以來參考下。2014-12-12
jquery和javascript中如何將一元素的內(nèi)容賦給另一元素
將一元素的內(nèi)容賦給另一元素，在某些情況下還是比較實用的，下面為大家講解下jquery和javascript中是如何實現(xiàn)的2014-01-01
這篇文章主要介紹了jquery插件EasyUI中form表單提交實例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-01-01
這篇文章主要介紹了jQuery動態(tài)添加元素后元素注冊事件失效解決，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-08-08
基于JQuery的數(shù)字改變的動畫效果--可用來做計數(shù)器
之前用javascript做個計數(shù)器，從網(wǎng)上搜了搜，找不到合適的，就想著用jquery自己做一個2010-08-08
jQuery Mobile頁面跳轉(zhuǎn)后未加載外部JS原因分析及解決
Web開發(fā)進(jìn)行頁面跳轉(zhuǎn)時在pageB中引用的JS并未成功運行，針對這個問題本文給予了詳細(xì)的解決方法，感興趣的你可以參考下哈，希望可以幫助到你2013-03-03
這篇文章主要介紹了jquery實現(xiàn)選中單選按鈕下拉伸縮效果的方法,涉及jquery鼠標(biāo)事件及頁面元素樣式的動態(tài)操作技巧,該功能可用于動態(tài)顯示特定內(nèi)容(如發(fā)票打印等),需要的朋友可以參考下2015-08-08
本文是對jquery 強制cookie失效的解決方法進(jìn)行了詳細(xì)的介紹,需要的朋友可以過來參考下,希望對大家有所幫助2015-05-05
這篇文章主要介紹了jQuery實現(xiàn)的右下角廣告窗體跟隨效果,涉及jQuery結(jié)合時間函數(shù)動態(tài)操作頁面元素屬性的相關(guān)技巧,需要的朋友可以參考下2016-09-09
z-blog SyntaxHighlighter 長代碼無法換行解決辦法(jquery)
由于我的博客主要是代碼分享，很多貼的代碼，都很長。很多時候我都是手動給他換行。但是今天實在是受不了。從網(wǎng)上找個辦法解決一下2014-11-11