//html <input type="number" v-model="phoneNumber" placeholder="请输入手机号"/> <input type="number" v-model="phoneCode" placeholder="请输入验证码"/> <span style="color: #EA5504;" @click="sendMessage($event)">发送验证码</span> //数据 data:{ phoneNumber: '', phoneCode: '', num: 60, count: 60 } //方法 sendMessage(element){ if(null == this.phoneNumber || undefined == this.phoneNumber || '' == this.phoneNumber){ vant.Toast({position:'bottom',message:'请先输入手机号', duration:1000}); return; } if (!(/^1[3456789]\d{9}$/.test(this.phoneNumber))) { vant.Toast({position:'bottom',message:'请输入正确的手机号码', duration:1000}); return; } var that = this; if(that.num > 0 && that.num < that.count){ return; } var timer = setInterval(function () { that.num = that.num -1; element.target.innerHTML = that.num + 's后重新获取' element.target.style.color = 'gray' element.target.disabled = 'disabled' if (that.num === 0) { element.target.disabled = '' element.target.style.color = ' #EA5504' element.target.innerHTML = '获取验证码' clearInterval(timer) } }, 1000) }
验证码 倒计时 vue 操作对象
猜你喜欢
转载自www.cnblogs.com/helloearth/p/11767210.html
今日推荐
周排行