手机验证码60秒倒计时

标签：计时   data   class   ast   inter   手机号   v-model   ber   hone   

<!--手机号输入框-->
<div class="login_box">
<input type="number" placeholder="请输入手机号" class="phoneInput" v-model="mobile"/>
<span v-if="codeShow" style="color:red;" @click="getPhoneCode">获取验证码</span>
<!-- 倒计时 -->
<span v-if="!codeShow" class="count">{{count}}秒后重试</span>
</div>

data() {
return {
codeShow: true,
count: ‘‘,
timer: null,
mobile: "", //手机号
};
},
getPhoneCode() { //获取短信验证码
var Reg = /^[1][34578][0-9]{9}$/;
// 正则验证
if (Reg.test(this.mobile)) {
this.$toast(‘验证码发送成功‘);
const TIME_COUNT = 60;
if (!this.timer) {
this.count = TIME_COUNT;
this.codeShow = false;
this.timer = setInterval(() => {
if (this.count > 0 && this.count <= TIME_COUNT) {
this.count--;
} else {
this.codeShow = true;
clearInterval(this.timer);
this.timer = null;
}
}, 1000)
}
let code = {
mobile: this.mobile,
sms_type: "login"
}
getSmsCode(code).then(res => {
console.log(res)
})
} else {
this.$toast(‘手机号码格式不正确‘);
}
}

手机验证码60秒倒计时

标签：计时   data   class   ast   inter   手机号   v-model   ber   hone   

原文地址：https://www.cnblogs.com/lsyy2017/p/14681752.html