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

更新時(shí)間：2017年09月29日 11:00:11 作者：J_Cherry

本篇文章主要介紹了vue生成隨機(jī)驗(yàn)證碼的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧‘

本文介紹了vue生成隨機(jī)驗(yà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)證碼的長(zhǎng)度 
  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)化為大寫(xiě)   
  if(this.picLyanzhengma == '') {
   //代碼是直接復(fù)制項(xiàng)目?jī)?nèi)容，這里選擇器選擇時(shí) 請(qǐng)根據(jù)自己的需求來(lái)實(shí)現(xiàn)提示語(yǔ)效果，很簡(jiǎ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)目?jī)?nèi)容，這里選擇器選擇時(shí) 請(qǐng)根據(jù)自己的需求來(lái)實(shí)現(xiàn)提示語(yǔ)效果，很簡(jiǎ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)目?jī)?nèi)容，這里選擇器選擇時(shí) 請(qǐng)根據(jù)自己的需求來(lái)實(shí)現(xiàn)提示語(yǔ)效果，很簡(jiǎn)單，我懶，就不改了 ~  
   $(".login_content1 span:eq(2)").addClass("disappear");
   $(".login_content1 span:eq(2)").text("請(qǐng)輸入驗(yàn)證碼")
   return true;
  } 
}

友情提示：本文直接從項(xiàng)目拿來(lái)供大家思路參考，驗(yàn)證提示那塊大家可根據(jù)自己情況做更改。懶得改的可以去我github拿demo。

demo已放到鄙人github，也可自?。?a rel="external nofollow" target="_blank" >https://github.com/JOSIE1988/JS-Random-authentication-code

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: