前言：
前端登录组件的代码实现，包括手机号输入、短信验证码验证及提交登录的功能。下文介绍了用户输入手机号后，点击发送验证码，后台将发送验证码到手机，用户输入验证码后可进行登录操作的实现逻辑。代码中使用了事件监听、正则表达式校验手机号格式，并通过定时器实现验证码倒计时显示。
实现方法一（原始写法）：
<template>
<div>
<label for="">手机号码</label>
<input type="text" v-model="tel" @blur="blur($event)" placeholder="请输入手机号"><br/>
<label for="">手机验证码</label>
<input type="text" placeholder="请输入短信验证码" v-model="phone">
<button v-show="show" class="btn1" @click="getCode">获取短信验证码</button>
<button v-show="!show" class="btn2" disabled="disabled">{{authtime}} 秒后重新发送</button>
</div>
</template>
<script>
export default {
data(){
return{
tel:'', //手机号码
hone:'',//短信验证码
authtime: 60,//倒计时默认60s
show:true,//默认显示获取验证码按钮
}
},
methods:{
// 输入手机号失去焦点
blur(e){
console.log(e.target.value);
if(e.target.value.length>0){
if (/^((1[3,5,8,7,9][0-9])|(14[5,7])|(17[0,6,7,8])|(19[1,7]))\d{8}$/.test(e.target.value)) {
alert('手机号正确')
console.log(this.tel);
}else{
alert('手机号格式错误')
}
}else{
alert('请输入手机号')
}
},
//获取验证码
getCode () {
this.axios.post('验证码接口', {
phone:this.tel,
}).then((res) => {
let data = res.data;
if( data.status == 0 ){
this.$toast(data.msg);
}
else if( data.status == 1 ){
this.$toast(data.msg);//获取成功
this.show = false;//显示倒计时按钮
//每隔一秒执行一次authtime--，当authtime的值<=0，显示获取验证码按钮，清除定时器，authtime重新赋值为60s
var timer = setInterval(()=>{
this.authtime--;
if(this.authtime<=0){
this.show = true;
clearInterval(timer);
this.authtime = 60;
}
}, 1000);
}
});
},
}
}
</script>
实现方法二（拆组件，可复用）：
<template>
<div class="get-mobile" @touchmove.prevent>
<div class="main">
<div class="pt-20 pr-15 pl-15 pb-20">
<input class="input mb-15" v-model="form.tel" placeholder="请输入手机号" type="number">
<div class="box">
<input class="input" v-model="form.telVerificationCode" placeholder="请输入短信验证码" type="number">
<div class="el-button" @click="send">{{ countDown }}</div>
</div>
</div>
<div class="btn" @click="sumbit">提交</div>
</div>
</div>
</template>
<script>
import { sendLoginMsgCode, login } from 'xx';
export default {
name: 'GetMobile',
data() {
return {
form: {
telVerificationCode: '',
tel: '',
},
countDown: "发送验证码", // 倒计时
bVerification: false // 节流
}
},
methods: {
async sumbit() {
const { telVerificationCode, tel } = this.form
if (!telVerificationCode || !tel) return this.$toast("请输入手机号和验证码");
let { code, data } = await login({
tel,
telVerificationCode,
isOffline: false
});
if (code === 200) {
this.$toast('登录成功');
this.$emit('sumbit', data.userInfo);
this.$emit('update:dialog', false)
}
},
async send() {
if (!/^1[3-8]\d{9}$/.test(this.form.tel)) return this.$toast("请先输入正确的手机号");
if (this.bVerification) return;
this.bVerification = true;
const { code } = await sendLoginMsgCode({
tel: this.form.tel
});
if (code === 200) {
this.$toast("发送验证码...");
let countDown = 59;
const auth_time = setInterval(() => {
this.countDown = countDown--;
if (this.countDown <= 0) {
this.bVerification = false;
this.countDown = "发送验证码";
clearInterval(auth_time);
}
}, 1000);
} else {
this.bVerification = false;
}
}
}
}
</script>
<style lang='scss' scoped>
.get-mobile {
height: 100vh;
width: 100vw;
background-color: rgba(0, 0, 0, .6);
display: flex;
justify-content: center;
align-items: center;
.main {
width: 280px;
height: 178px;
background: #FFFFFF;
border-radius: 5px;
.input {
border: 1px solid #EBEBEF;
border-radius: 5px;
height: 40px;
padding-left: 10px;
}
.el-button {
margin-left: 10px;
border-radius: 5px;
background: #5F93FD;
color: #fff;
width: 140px;
display: flex;
justify-content: center;
align-items: center;
}
.btn {
height: 45px;
color: #5F93FD;
display: flex;
justify-content: center;
align-items: center;
border-top: 1px solid #EBEBEF;
}
}
}
</style>
