無論是移動端還是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:{}, //驗證提示信息
}
}
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<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次
|
1
|
getVerifyCode(){
|
|
1
2
3
4
5
6
7
8
9
10
11
12
|
//獲取驗證碼
if
(
this
.validatePhone()) {
this
.validateBtn()
//發送網絡請求
this
.$axios.post(
'/api/posts/sms_send'
,{<br>
//注冊聚合數據找到短信api服務，申請會得到兩個tpl_id和key值，然后填入相對應的就行，具體還是和你門后端進行溝通
tpl_id:
""
,
key:
""
,
phone:
this
.phone
}).then(res => {
console.log(res)
})
}<br>},
|
2.1點擊發送驗證碼的時候判斷是否合法
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
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點擊登錄之前手機已經發送驗證密，並且手機上以及獲取到正確的驗證碼，登錄之前需要判斷，手機號和驗證碼都不能為空，所以在計算屬性判斷是否兩個都為空，如果都不為空的話，可以點擊按鈕，否則不能點擊按鈕
|
1
2
3
4
5
6
7
8
9
10
11
|
computed: {
//手機號和驗證碼都不能為空
isClick(){
if
(!
this
.phone || !
this
.verifyCode) {
return
true
}
else
{
return
false
}
}
},
|
3.2點擊登錄發送請求，得到的並存儲到localStorage里面，最后跳轉到登錄頁面
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
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實現手機號碼登錄的整個流程，如果喜歡可以多多關注一下