vue實(shí)現(xiàn)短信驗(yàn)證碼登錄功能的案例

小編給大家分享一下vue實(shí)現(xiàn)短信驗(yàn)證碼登錄功能的案例，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

思路

1，先判斷手機(jī)號(hào)和驗(yàn)證是否為空，

2，點(diǎn)擊發(fā)送驗(yàn)證碼，得到驗(yàn)證碼

3，輸入的驗(yàn)證碼是否為空和是否正確，

4，最后向服務(wù)發(fā)送請(qǐng)求

界面展示

1.準(zhǔn)備工作

這個(gè)會(huì)對(duì)input進(jìn)行封裝處理

<template>
 <div class="text_group">
  <div class="input_group" :class="{'is-invalid': error}">
   <!-- 輸入框 -->
   <input 
    :type="type"
    :placeholder="placeholder"
    :value="value"
    :name="name"
    @input="$emit('input',$event.target.value)"
   >
   <!-- 輸入框后面的內(nèi)容 -->
   <button v-if="btnTitle" @click="$emit('btnClick')" :disabled="disabled">{{btnTitle}}</button>
  </div>
  <!-- 驗(yàn)證提示 -->
  <div v-if="error" class="invalid-feedback">{{error}}</div>
 </div>
</template>
<script>
 export default {
  name:"inputGroup",
  props:{
   type: {
    type: String,
    default: "text"
   },
   placeholder:String,
   value:String,
   name:String,
   disabled:Boolean,
   btnTitle:String, //input框中的文字
   error:String //驗(yàn)證不正確提示
  }
 }
</script>

input組件封裝完之后在我們這個(gè)login組件中引入并注冊(cè)

import InputGroup from '../components/InputGroup'引入封裝的組件

最后在components注冊(cè)

data() {
 return {
  phone:"", //手機(jī)號(hào)
  verifyCode:"", //驗(yàn)證碼
  btnTitle:"獲取驗(yàn)證碼",
  disabled:false, //是否可點(diǎn)擊
  errors:{}, //驗(yàn)證提示信息
 }
 }

<template>
 <div class="login">
  <!-- 手機(jī)號(hào) -->
  <InputGroup
   type="number"
   placeholder="手機(jī)號(hào)"
   v-model="phone" 
   :btnTitle="btnTitle"
   :disabled="disabled"
   :error="errors.phone"
   @btnClick="getVerifyCode"
  />
  <!-- 輸入驗(yàn)證碼 -->
  <InputGroup
   type="number"
   v-model="verifyCode"
   placeholder="驗(yàn)證碼"
   :error="errors.code"
  />
  <!-- 登錄按鈕 -->
 　　　　　　　　
 <div class="login_btn">
   <button @click="handleLogin" :disabled="isClick">登錄</button>
  </div>
 </div>
 </template>

2.判斷手機(jī)號(hào)是否正確和合法

(1)點(diǎn)擊驗(yàn)證碼發(fā)送驗(yàn)證的時(shí)候，必須符合手機(jī)號(hào)正確和手機(jī)號(hào)碼不能為空，短信發(fā)送服務(wù)用的是《聚合數(shù)據(jù)》，申請(qǐng)可以免費(fèi)調(diào)用10次

getVerifyCode(){

//獲取驗(yàn)證碼
if(this.validatePhone()) {
 this.validateBtn()
 //發(fā)送網(wǎng)絡(luò)請(qǐng)求
 this.$axios.post('/api/posts/sms_send',{<br>　　　　　　　　//注冊(cè)聚合數(shù)據(jù)找到短信api服務(wù)，申請(qǐng)會(huì)得到兩個(gè)tpl_id和key值，然后填入相對(duì)應(yīng)的就行，具體還是和你門后端進(jìn)行溝通
  tpl_id: "",
    key: "",
  phone:this.phone
 }).then(res => {
  console.log(res)
 })
 }<br>},

2.1點(diǎn)擊發(fā)送驗(yàn)證碼的時(shí)候判斷是否合法

validatePhone(){
 //判斷輸入的手機(jī)號(hào)是否合法
 if(!this.phone) {
 this.errors = {
 phone:"手機(jī)號(hào)碼不能為空"
 }
 // return false
 } else if(!/^1[345678]\d{9}$/.test(this.phone)) {
 this.errors = {
 phone:"請(qǐng)輸入正確是手機(jī)號(hào)"
 }
 // return false
 } else {
 this.errors ={}
 return true
 }
},

2.2點(diǎn)擊驗(yàn)證碼發(fā)送倒計(jì)時(shí)

validateBtn(){
 //倒計(jì)時(shí)
 let time = 60;
 let timer = setInterval(() => {
 if(time == 0) {
 clearInterval(timer);
 this.disabled = false;
 this.btnTitle = "獲取驗(yàn)證碼";
 } else {
 this.btnTitle =time + '秒后重試';
 this.disabled = true;
 time--
 }
 },1000)
},

3.點(diǎn)擊登錄實(shí)現(xiàn)

　　3.1點(diǎn)擊登錄之前手機(jī)已經(jīng)發(fā)送驗(yàn)證密，并且手機(jī)上以及獲取到正確的驗(yàn)證碼，登錄之前需要判斷，手機(jī)號(hào)和驗(yàn)證碼都不能為空，所以在計(jì)算屬性判斷是否兩個(gè)都為空，如果都不為空的話，可以點(diǎn)擊按鈕，否則不能點(diǎn)擊按鈕

computed: {
 //手機(jī)號(hào)和驗(yàn)證碼都不能為空
 isClick(){
  if(!this.phone || !this.verifyCode) {
  return true
  } else {
  return false
  }
     
 }
},

　　3.2點(diǎn)擊登錄發(fā)送請(qǐng)求，得到的并存儲(chǔ)到localStorage里面，最后跳轉(zhuǎn)到登錄頁(yè)面

handleLogin() {
 //點(diǎn)擊發(fā)送
 this.errors = {};
 this.$axios.post('/api/posts/sms_back',{
  phone:this.phone,
  code:this.verifyCode
 }).then(res => {
  console.log(res);
  localStorage.setItem('ele_login',true)
  this.$router.push('/')
 }).catch(error =>{
  //返回錯(cuò)誤信息
  this.errors ={
  code:error.response.data.msg
 }
 })
}

看完了這篇文章，相信你對(duì)“vue實(shí)現(xiàn)短信驗(yàn)證碼登錄功能的案例”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！