微信小程序怎么实现绑定手机号获取验证码功能-创新互联

小编给大家分享一下微信小程序怎么实现绑定手机号获取验证码功能，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

微信小程序验证码获取方式，代码如下所示：

 
  
   手机号
   
  
  
   验证码
   
   {{getText2}}
  
  绑定
 

.content {
 width: 100%;
 height: auto;
 padding: 0 50rpx;
 box-sizing: border-box;
}
.phone-box {
 width: 100%;
 height: 89rpx;
 border-bottom: 1rpx solid #efefef;
 display: flex;
 flex-direction: row;
 justify-content: flex-start;
 align-items: center;
}
.phone {
 color: #333;
 margin-right: 60rpx;
 font-size: 28rpx;
}
.number {
 color: #333;
 font-size: 28rpx;
 width: 200rpx;
}
.getNum {
 width:210rpx;
 height:48rpx;
 background:rgba(248, 112, 57, 1);
 border-radius:8rpx;
 font-size:28rpx;
 font-family:PingFang-SC-Medium;
 color:rgba(255, 255, 255, 1);
 line-height:48rpx;
 margin-right:36rpx;
 text-align:center;
}
.submit {
 width: 480rpx;
 height: 80rpx;
 background: rgba(248, 112, 57, 1);
 border-radius: 8rpx;
 margin-top: 80rpx;
 color: #fff;
 font-size: 32rpx;
}
const app = getApp();
Page({
 data: {
  // 验证手机号
  loginPhone: false,
  loginPwd: false,
  loveChange: true,
  hongyzphone: '',
  // 验证码是否正确
  zhengLove: true,
  huoLove: '',
  getText2: '获取验证码',
 },
 // 手机验证
 lovePhone: function (e) {
  let phone = e.detail.value;
  this.setData({ hongyzphone: phone })
  if (!(/^1[34578]\d{9}$/.test(phone))) {
   this.setData({
    lovePhone: false
   })
   console.log(phone.length)
   if (phone.length >= 11) {
    wx.showToast({
     title: '手机号有误',
     icon: 'none',
     duration: 1000
    })
   }
  } else {
   this.setData({
    lovePhone: true
   })
  }
 },
 // 验证码输入
 yanLoveInput: function (e) {
  let that = this;
  let yanLove = e.detail.value;
  let huoLove = this.data.huoLove;
  that.setData({
   yanLove: yanLove,
   zhengLove: false,
  })
  if (yanLove.length >= 4) {
   if (yanLove == huoLove) {
    that.setData({
     zhengLove: true,
    })
   } else {
    that.setData({
     zhengLove: false,
    })
    wx.showModal({
     content: '输入验证码有误',
     showCancel: false,
     success: function (res) { }
    })
   }
  }
 },
 // 验证码按钮
 yanLoveBtn: function () {
  let loveChange = this.data.loveChange;
  console.log(loveChange)
  let lovePhone = this.data.lovePhone;
  console.log(lovePhone)
  let phone = this.data.hongyzphone;
  console.log(phone)
  let n = 59;
  let that = this;
  if (!lovePhone) {
   wx.showToast({
    title: '手机号有误',
    icon: 'success',
    duration: 1000
   })
  } else {
   if (loveChange) {
    this.setData({
     loveChange: false
    })
    let lovetime = setInterval(function () {
     let str = '(' + n + ')' + '重新获取'
     that.setData({
      getText2: str
     })
     if (n <= 0) {
      that.setData({
       loveChange: true,
       getText2: '重新获取'
      })
      clearInterval(lovetime);
     }
     n--;
    }, 1000);
    //获取验证码接口写在这里
    //例子 并非真实接口
    app.agriknow.sendMsg(phone).then(res => {
     console.log('请求获取验证码.res =>', res)
    }).catch(err => {
     console.log(err)
    })
   }
  }
 },
 //form表单提交
 formSubmit(e){
  let val = e.detail.value 
  console.log('val', val)
  var phone = val.phone //电话
  var phoneCode = val.phoneCode //验证码
 },
})

以上是“微信小程序怎么实现绑定手机号获取验证码功能”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！