您好,登錄后才能下訂單哦!
先看效果圖:
要求:當(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();
免責(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)容。