本文介紹了vue生成隨機(jī)驗(yàn)證碼的示例代碼,分享給大家,具體如下:
為東明等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計(jì)制作服務(wù),及東明網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為成都網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、外貿(mào)網(wǎng)站建設(shè)、東明網(wǎng)站設(shè)計(jì),以傳統(tǒng)方式定制建設(shè)網(wǎng)站,并提供域名空間備案等一條龍服務(wù),秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求,就會(huì)得到認(rèn)可,從而選擇與我們長期合作。這樣,我們也可以走得更遠(yuǎn)!
樣式自調(diào),最終效果如圖:
實(shí)現(xiàn)效果:
點(diǎn)擊右邊input框會(huì)自動(dòng)切換,如果輸入的值與字不同,則清空換一串隨機(jī)數(shù)
HTML
<input type="text" placeholder="請(qǐng)輸入驗(yàn)證碼" class="yanzhengma_input" @blur="checkLpicma" v-model="picLyanzhengma"> <input type="button" id="code" @click="createCode" class="verification1" v-model="checkCode"/> <br> <span class="tishixiaoxi disappear">請(qǐng)輸入驗(yàn)證碼。</span> <a class="user_login" @click="Login">登錄</a>
JS
// 圖片驗(yàn)證碼 createCode(){ code = ""; var codeLength = 4;//驗(yàn)證碼的長度 var random = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R', 'S','T','U','V','W','X','Y','Z');//隨機(jī)數(shù) for(var i = 0; i < codeLength; i++) { //循環(huán)操作 var index = Math.floor(Math.random()*36);//取得隨機(jī)數(shù)的索引(0~35) code += random[index];//根據(jù)索引取得隨機(jī)數(shù)加到code上 } this.checkCode = code;//把code值賦給驗(yàn)證碼 }, // 失焦驗(yàn)證圖和密碼 checkLpicma(){ this.picLyanzhengma.toUpperCase();//取得輸入的驗(yàn)證碼并轉(zhuǎn)化為大寫 if(this.picLyanzhengma == '') { //代碼是直接復(fù)制項(xiàng)目內(nèi)容,這里選擇器選擇時(shí) 請(qǐng)根據(jù)自己的需求來實(shí)現(xiàn)提示語效果,很簡單,我懶,就不改了 ~ $(".login_content1 span:eq(2)").text("請(qǐng)輸入驗(yàn)證碼") $(".login_content1 span:eq(2)").removeClass("disappear"); }else if(this.picLyanzhengma.toUpperCase() != this.checkCode ) { //若輸入的驗(yàn)證碼與產(chǎn)生的驗(yàn)證碼不一致時(shí) console.log( this.picLyanzhengma.toUpperCase()) //代碼是直接復(fù)制項(xiàng)目內(nèi)容,這里選擇器選擇時(shí) 請(qǐng)根據(jù)自己的需求來實(shí)現(xiàn)提示語效果,很簡單,我懶,就不改了 ~ $(".login_content1 span:eq(2)").text("驗(yàn)證碼不正確") $(".login_content1 span:eq(2)").removeClass("disappear"); this.createCode();//刷新驗(yàn)證碼 this.picLyanzhengma = ''; }else { //輸入正確時(shí) //代碼是直接復(fù)制項(xiàng)目內(nèi)容,這里選擇器選擇時(shí) 請(qǐng)根據(jù)自己的需求來實(shí)現(xiàn)提示語效果,很簡單,我懶,就不改了 ~ $(".login_content1 span:eq(2)").addClass("disappear"); $(".login_content1 span:eq(2)").text("請(qǐng)輸入驗(yàn)證碼") return true; } }
友情提示:本文直接從項(xiàng)目拿來供大家思路參考,驗(yàn)證提示那塊大家可根據(jù)自己情況做更改。懶得改的可以去我github拿demo。
demo已放到鄙人github,也可自?。篽ttps://github.com/JOSIE1988/JS-Random-authentication-code
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。
當(dāng)前名稱:vue生成隨機(jī)驗(yàn)證碼的示例代碼
地址分享:http://jinyejixie.com/article16/ggsjgg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站排名、全網(wǎng)營銷推廣、ChatGPT、外貿(mào)建站、營銷型網(wǎng)站建設(shè)、自適應(yīng)網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)