1.手机号合法验证
.wxml
<input bindinput="check" name='phone' type='number' placeholder="请输入手机号" maxlength="11"></input> <button disabled="{{!active}}">下一步</button>
.js
Page({ data: { active: false }, check(e) { this.setData({ phone: e.detail.value, active: /^1[345678]\d{9}$/.test(e.detail.value) ? true : false }) }, })
2.发送验证码倒计时
.wxml
<button disabled='{{disabled}}' bindtap="verificavtion"> {{time}}</button>
.js
var countDown = null Page({ data: { disabled: false, time: '获取验证码' }, onUnload: function () { clearInterval(countDown) }, verification(){ // 手机获取验证码成功后 if(success){ let that = this that.setData({ disabled: true, }) var currentTime = 60 countDown = setInterval(function () { currentTime-- that.setData({ time: currentTime + 's' }) if (currentTime <= 0) { clearInterval(countDown) that.setData({ time: '重新发送', disabled: false }) } }, 1000) } } })
(1)在.js最外层声明倒计时
(2)卸载此页面后倒计时不会结束 在onUnload和其他跳转事件中停止倒计时,另外可以在全局中同时做一个倒计时并在onload中做判断 保证卸载此页面后再加载回此页面倒计时的连贯