成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

vue生成隨機(jī)驗(yàn)證碼的示例代碼

本文介紹了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),最終效果如圖:

vue生成隨機(jī)驗(yàn)證碼的示例代碼

實(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)

成都seo排名網(wǎng)站優(yōu)化
泌阳县| 晋城| 古田县| 屏东市| 旅游| 阳西县| 岚皋县| 福鼎市| 丰城市| 芦溪县| 上高县| 娱乐| 中山市| 黎川县| 丹东市| 德昌县| 长顺县| 临城县| 柳江县| 苏尼特右旗| 日照市| 浦北县| 辽中县| 鄱阳县| 大新县| 油尖旺区| 成都市| 大埔区| 阿克苏市| 上饶县| 龙游县| 开化县| 肇源县| 西昌市| 平度市| 图们市| 武平县| 涿州市| 丹凤县| 常州市| 保康县|