jQuery點(diǎn)擊輸入框顯示驗(yàn)證碼圖片
先看效果圖:
要求:當(dāng)輸入框獲得焦點(diǎn)時(shí),自動(dòng)顯示驗(yàn)證圖片。
代碼如下(學(xué)習(xí)而已,僅供參考):
/***********************下是驗(yàn)證碼對(duì)象*****************/ 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)證碼對(duì)象初始化 Validation.init('validation','Ajax.ashx?handle=validation'); // 輸入框ID 驗(yàn)證圖片地址 //隱藏 Validation.hide();
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助。
- 使用jQuery,Angular實(shí)現(xiàn)登錄界面驗(yàn)證碼詳解
- jQuery實(shí)現(xiàn)倒計(jì)時(shí)重新發(fā)送短信驗(yàn)證碼功能示例
- jQuery實(shí)現(xiàn)發(fā)送驗(yàn)證碼并60秒倒計(jì)時(shí)功能
- jquery實(shí)現(xiàn)無刷新驗(yàn)證碼的簡(jiǎn)單實(shí)例
- jQuery插件實(shí)現(xiàn)靜態(tài)HTML驗(yàn)證碼校驗(yàn)
- jQuery實(shí)現(xiàn)的手機(jī)發(fā)送驗(yàn)證碼倒計(jì)時(shí)效果代碼分享
- Jquery插件實(shí)現(xiàn)點(diǎn)擊獲取驗(yàn)證碼后60秒內(nèi)禁止重新獲取
- PHP+jQuery 注冊(cè)模塊的改進(jìn)(一):驗(yàn)證碼存入SESSION
- jquery禁止輸入數(shù)字以外的字符的示例(純數(shù)字驗(yàn)證碼)
- 使用jQuery如何寫一個(gè)含驗(yàn)證碼的登錄界面
相關(guān)文章
Jquery插件easyUi實(shí)現(xiàn)表單驗(yàn)證示例
這篇文章主要介紹了Jquery插件easyUi實(shí)現(xiàn)表單驗(yàn)證示例,需要的朋友可以參考下2015-12-12jQuery+SpringMVC中的復(fù)選框選擇與傳值實(shí)例
下面小編就為大家分享一篇jQuery+SpringMVC中的復(fù)選框選擇與傳值實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-01-01jQuery實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03jQuery實(shí)現(xiàn)圖片隨機(jī)切換、抽獎(jiǎng)功能(實(shí)例代碼)
本文通過實(shí)例代碼給大家介紹了jQuery實(shí)現(xiàn)圖片隨機(jī)切換、抽獎(jiǎng)功能,感興趣的朋友跟隨小編一起看看吧2019-10-10jquery 實(shí)現(xiàn)滾動(dòng)條下拉時(shí)無限加載的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)硪黄猨query 實(shí)現(xiàn)滾動(dòng)條下拉時(shí)無限加載的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06jQuery UI插件自定義confirm確認(rèn)框的方法
這篇文章主要介紹了jQuery UI插件自定義confirm確認(rèn)框的方法,實(shí)例分析了jQuery的UI插件使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-03-03