小程序手机号验证及验证码倒计时

本文主要是介绍小程序手机号验证及验证码倒计时，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

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

这篇关于小程序手机号验证及验证码倒计时的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！