小程序获取手机验证码倒计时的方法

本文实例为大家分享了小程序获取手机验证码倒计时的具体代码,供大家参考,具体内容如下

test:

.wxss

.bind_input{ width: 450rpx; height: 80rpx; padding: 0 20rpx; margin: 0 auto 20rpx auto; border-radius: 40rpx; border: #ddd solid 1px;
    display: flex; justify-content: space-between; align-items: center;
}
.bind_input input{ width: 230rpx; height: 50rpx; padding-left: 30rpx;}
.bind_yzm_btn{ width: 160rpx; height: 50rpx; line-height: 50rpx; text-align: center; color: #fff; font-size: 24rpx; border-radius: 25rpx; background-color: #0FC393;}
.bind_yzm_btn.grey{ font-size: 28rpx; background-color: #ccc;}
 
.bind_btn{ width: 450rpx; height: 80rpx; line-height: 80rpx; margin: 40rpx auto 0 auto; text-align: center; color: #fff; font-size: 36rpx; font-weight: 300; border-radius: 40rpx; background-color: #0FC393;
    box-shadow:0px 10px 20px rgba(0,182,142,0.4);
}

.wxml

<view class="bind_input">
    <input type="tel" value="{{mobile}}" bindinput="setMobile" placeholder="输入手机号" maxlength="11" placeholder-style="color:#ccc;" />
</view>
 
<view class="bind_input">
    <input type="tel" value="{[code]}" bindinput="setCode" placeholder="短信验证码" maxlength="4" placeholder-style="color:#ccc;" />
    <text wx:if="{{ifTimeIn}}" class="bind_yzm_btn grey">{{timeCur}}</text>
    <text wx:else bindtap="getMobileVerify" class="bind_yzm_btn">获取验证码</text>
</view>
 
<view bindtap="bindDo" class="bind_btn">确定</view>

.js

Page({
 
  /**
   * 页面的初始数据
   */
  data: {
        mobile:'',
        code:'',
        
        // 倒计时参数
        timeStart:60, //倒计时初始值
        timeCur:null, //当前倒计时显示值
        timer:null,
        
        ifTimeIn:false, //是否倒计时中
        
        ifSendMobileVerify:false, //是否发送成功验证码
  },
    
    // 设置用户输入的手机号
    setMobile(e){
        // console.log(e.detail.value);
        this.setData({
            mobile : e.detail.value.replace(/\s+/g,"")
        });
    },
    
    // 设置用户输入的验证码
    setCode(e){
        // console.log(e.detail.value);
        this.setData({
            code : e.detail.value.replace(/\s+/g,"")
        });
    },
    
    
    
    // 倒计时
    setTime(){
        let timeCur = this.data.timeCur - 1;
        // console.log(timeCur);
        if(timeCur < 0){
            clearInterval(this.data.timer);
            this.setData({
                ifTimeIn:false
            });
            return false;
        }
        this.setData({
            timeCur : timeCur
        });
    },
    
    // 获取验证码
    getMobileVerify(){
        if(!this.data.mobile){
            wx.showModal({
                title: '友情提示',
                content: '请输入手机号',
                showCancel: false,
            });
            return false
        }
        
        if(!/^1\d{10}$/.test(this.data.mobile)){
            wx.showModal({
                title: '友情提示',
                content: '请输入正确的手机号',
                showCancel: false,
            });
            return false;
        }
        
        wx.showLoading({
          title: "发送中",
          mask: true
        });
        
        let dataJson = {
            mobile : this.data.mobile,
        };
        
        /* ----请求后台发送验证码成功---- */
        // 执行倒计时
        this.setData({
            timeCur : this.data.timeStart,
            timer : setInterval(this.setTime,1000),
            ifTimeIn : true,
            ifSendMobileVerify : true
        });
        /* ----请求后台发送验证码成功---- */
        wx.hideLoading();
    },
    
    // 确定提交
    bindDo(){
        if(!this.data.ifSendMobileVerify){
            wx.showModal({
                title: '友情提示',
                content: '请确定您的手机收到验证码再操作',
                showCancel: false,
            });
            return false;
        }
        if(!this.data.code){
            wx.showModal({
                title: '友情提示',
                content: '请输入验证码',
                showCancel: false,
            });
            return false;
        }
        
        /* ----请求后台提交成功---- */
        wx.showToast({
            title: '成功',
            icon: 'success',
            mask: true,
            duration: 1500
        });
        /* ----请求后台提交成功---- */
    },
 
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
 
  },
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 微信小程序项目实践之验证码倒计时功能

    效果如下:点击发送验证码按钮,按钮背景变色,不可点击,显示倒计时文字 首先js文件的data里面 声明一个变量用于表示当前是否可以点击,codeIsCanClick = true,  默认是可以点击的 写下界面代码: wxml文件中 <view class='centerRow'> <view class='inputLabel'>动态码:</view> <input class='inputStyle' style="flex:1 " bin

  • 微信小程序实现手机获取验证码倒计时60s

    本文实例为大家分享了微信小程序实现手机获取验证码倒计时的具体代码,供大家参考,具体内容如下 功能展示: WXML: <view class="all">   <!-- 手机 -->   <view class="tel">     <!-- 手机图标 -->     <view class="icon_tel">       <image class="tel_image

  • 微信小程序实现短信验证码倒计时

    本文实例为大家分享了微信小程序实现短信验证码倒计时的具体代码,供大家参考,具体内容如下 初始效果 当点击按钮时候设置禁止点击效果:如下图 话不多说,直接上代码 1.wxml部分 <view>     <block wx:if="{{Num==60 || Num==-1}}">       <button bindtap="countDown">获取验证码</button>     </block>    

  • 微信小程序实现验证码倒计时效果

    本文实例为大家分享了微信小程序验证码倒计时效果的具体代码,供大家参考,具体内容如下 如果写过js的倒计时,那么小程序中使用也是差不多的: 代码: data: {       daojishi:60,     inter:''     },   daojishi: function () {     this.data.inter = setInterval((res) => {       this.fun();     }, 1000);   },   fun: function () {  

  • 小程序实现简单验证码倒计时

    本篇文章主要讲关于小程序验证码倒计时的功能实现,供大家参考,具体内容如下 首先是wxml部分 <form bindsubmit="regist">     <view class="vip-title">验证码</view>       <input type="text" name="verifyCode" placeholder="验证码" value=&quo

  • 微信小程序实现发送短信验证码倒计时

    本文实例为大家分享了微信小程序发送短信验证码倒计时的具体代码,供大家参考,具体内容如下 效果图 WXML文件 <view class="container"> <view class="userinfo"> <image class="userinfo-avatar" src="../../images/timg.jpg" mode="cover"></image&

  • 微信小程序实现倒计时60s获取验证码

    本文实例为大家分享了微信小程序倒计时获取验证码的具体代码,供大家参考,具体内容如下 1.工具类(引用微信小程序提供的工具类) countdown.js class Countdown { constructor(options = {}) { Object.assign(this, { options, }) this.__init() } /** * 初始化 */ __init() { this.page = getCurrentPages()[getCurrentPages().length

  • 微信小程序实现验证码获取倒计时效果

    本文实例为大家分享了微信小程序实现获取验证码倒计时效果的具体代码,供大家参考,具体内容如下 wxml <button disabled='{{disabled}}' data-id="2" bindtap="getVerificationCode"> {{time}} </button> js var interval = null //倒计时函数 Page({ data: { date:'请选择日期', fun_id:2, time: '获

  • 微信小程序实现验证码倒计时

    本文实例为大家分享了微信小程序实现验证码倒计时的具体代码,供大家参考,具体内容如下 wxml代码: <view class='container'>   <form bindsubmit='denglu'>     <view class='list'>       <view class='left'>         <label>手机号:</label>         <input type='number' name=

  • 微信小程序的注册页面包含倒计时验证码、获取用户信息

    1.页面展示 2.wxml代码 <!--pages/register/register.wxml--> <scroll-view> <image src='/images/register.png' mode='widthFix' class="topImage"></image> <view class='input-top'> <input id="telphone" maxlength='11'

随机推荐