vue 무 작위 인증 코드 생 성 예시 코드

본 고 는 vue 가 랜 덤 인증 코드 를 생 성 하 는 예제 코드 를 소개 하고 여러분 에 게 공유 합 니 다.구체 적 으로 다음 과 같 습 니 다.
스타일 자체 조정,최종 효 과 는 그림 과 같 습 니 다:

구현 효과:
오른쪽 input 상 자 를 누 르 면 자동 으로 전환 되 며,입력 한 값 이 글자 와 다 르 면 무 작위 로 비 웁 니 다.
HTML

<input type="text" placeholder="      " 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">      。</span>
<a class="user_login" @click="Login">  </a>

JS

//      
createCode(){
  code = ""; 
  var codeLength = 4;//       
  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');//    
  for(var i = 0; i < codeLength; i++) {
   //     
   var index = Math.floor(Math.random()*36);//        （0~35） 
   code += random[index];//           code  
  } 
  this.checkCode = code;// code       
},
//         
checkLpicma(){   
  this.picLyanzhengma.toUpperCase();//                 
  if(this.picLyanzhengma == '') {
   //           ，                         ，   ，  ，     ~
   $(".login_content1 span:eq(2)").text("      ")
   $(".login_content1 span:eq(2)").removeClass("disappear");  
  }else if(this.picLyanzhengma.toUpperCase() != this.checkCode ) { 
   //                   
   console.log( this.picLyanzhengma.toUpperCase())
   //           ，                         ，   ，  ，     ~  
   $(".login_content1 span:eq(2)").text("      ")
   $(".login_content1 span:eq(2)").removeClass("disappear");
   this.createCode();//      
   this.picLyanzhengma = '';
  }else {
   //      
   //           ，                         ，   ，  ，     ~  
   $(".login_content1 span:eq(2)").addClass("disappear");
   $(".login_content1 span:eq(2)").text("      ")
   return true;
  } 
}

우정 힌트:본 고 는 프로젝트 에서 직접 여러분 의 생각 을 참고 하도록 제공 하고 검증 힌트 는 여러분 이 자신의 상황 에 따라 변경 할 수 있 습 니 다.고치 기 싫 으 면 github 에 가서 데 모 를 가 져 와.
demo 는 이미 소인 github 에 넣 었 습 니 다.스스로 취 할 수 있 습 니 다https://github.com/JOSIE1988/JS-Random-authentication-code
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.