vue實現簡訊驗證碼登入

小周sri的碼農發表於2019-03-09
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實現手機號碼登入的整個流程，如果喜歡可以多多關注一下




相關文章