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

