vue實現短信驗證碼登陸

不管是移動端仍是pc端登陸或者註冊界面都會見到手機驗證碼登陸這個功能，輸入手機號，獲得驗證碼，最後先服務器發送請求，保存登陸的信息，一個必不可少的功能

思路

1，先判斷手機號和驗證是否爲空，

2，點擊發送驗證碼，獲得驗證碼

3，輸入的驗證碼是否爲空和是否正確，

4，最後向服務發送請求

界面展現

1.準備工做

這個會對input進行封裝處理

<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)"
            >
            <!-- 輸入框後面的內容 -->
            <button v-if="btnTitle" @click="$emit('btnClick')" :disabled="disabled">{{btnTitle}}</button>
        </div>
        <!-- 驗證提示 -->
        <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  //驗證不正確提示
        }
    }
</script>

input組件封裝完以後在咱們這個login組件中引入並註冊

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

最後在components註冊

data() {
 return {
        phone:"", //手機號
        verifyCode:"", //驗證碼
        btnTitle:"獲取驗證碼",
        disabled:false,  //是否可點擊
        errors:{}, //驗證提示信息
   }
 }

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

　　

2.判斷手機號是否正確和合法

(1)點擊驗證碼發送驗證的時候，必須符合手機號正確和手機號碼不能爲空，短信發送服務用的是《聚合數據》，申請能夠免費調用10次

getVerifyCode(){

//獲取驗證碼
if(this.validatePhone()) {
	this.validateBtn()
	//發送網絡請求
	this.$axios.post('/api/posts/sms_send',{
　　　　　　　　//註冊聚合數據找到短信api服務，申請會獲得兩個tpl_id和key值，而後填入相對應的就行，具體仍是和你門後端進行溝通
		tpl_id: "",
                key: "",
		phone:this.phone
	}).then(res => {
		console.log(res)
	})
  }
},

2.1點擊發送驗證碼的時候判斷是否合法

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

2.2點擊驗證碼發送倒計時

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

3.點擊登陸實現

　　3.1點擊登陸以前手機已經發送驗證密，而且手機上以及獲取到正確的驗證碼，登陸以前須要判斷，手機號和驗證碼都不能爲空，因此在計算屬性判斷是否兩個都爲空，若是都不爲空的話，能夠點擊按鈕，不然不能點擊按鈕

computed: {
	//手機號和驗證碼都不能爲空
	isClick(){
	   if(!this.phone || !this.verifyCode) {
		return true
	   } else {
		return false
	   }
				
	}
},

　　3.2點擊登陸發送請求，獲得的並存儲到localStorage裏面，最後跳轉到登陸頁面

handleLogin() {
	//點擊發送
	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 =>{
		//返回錯誤信息
		this.errors ={
		code:error.response.data.msg
	}
   })
}

　　以上都是vue實現手機號碼登陸的整個流程，若是喜歡能夠多多關注一下