标签：disabled false 手机号 currentTime 验证码 倒计时 setData

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中做判断 保证卸载此页面后再加载回此页面倒计时的连贯

标签：disabled,false,手机号,currentTime,验证码,倒计时,setData
来源： https://blog.csdn.net/wgz6101/article/details/120183899

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。