溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

[置頂]       JQuery實(shí)現(xiàn)簡單驗(yàn)證碼提示

發(fā)布時(shí)間:2020-07-18 03:54:08 來源:網(wǎng)絡(luò) 閱讀:269 作者:873582595 欄目:web開發(fā)

先看效果圖:

[置頂]          JQuery實(shí)現(xià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();

 

向AI問一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI