验证码倒计时,手机号格式校验。
【简要说明】code字段在获取验证码之前显示验证码,点击获取验证码后显示倒计时数字。``用来拼接字符串,格式为字符串${data}
。设置每1s执行一次减秒计数,setInterval(function(){}, 1000);当秒数为0的时候用clearInterval()结束减秒。
data: {
count:60,
code:'获取验证码',
iPhoneValue:' ', //手机号码
}
textCode: function () {
let that = this
// 手机号码格式验证
if (!(/^1[3456789]d{9}$/.test(that.data.iphoneValue))) {
wx.showToast({
title: '输入手机号有误',
icon: 'none',
duration: 2000
})
return;
}
if(that.data.code !== '获取验证码'){
return
}
const countDown = setInterval(() => {
if(that.data.count <= 0){
that.setData({
count:60,
code:'获取验证码'
})
clearInterval(countDown)
return
}
that.data.count --
that.setData({
count: that.data.count,
code: that.data.count < 10 ? `请等待0${that.data.count}s` : `请等待${that.data.count}s`
})
},1000);
// 调用验证码接口
that.textCode_http()
}
WXML(随意写的demo代码不规范,看得懂就好哈)
<view style='display:flex;flex-direction: row;'>
<view style='padding:10px;'>
<text style='font-size:14px;color:#333;'>手机号:</text>
</view>
<view style='flex:1;padding:10px;'>
<input placeholder='请输入手机号' placeholder-style='color:#999;font-size:12px;' style='color:#333;font-size:14px;' type='number' bindinput="Input_iphone" maxlength="11"></input>
</view>
<view style='padding:10px;' bindtap='textCode'>
<text class='store_quan'>{{code}}</text>
</view>
</view>