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

  介绍

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

微信小程序怎么实现绑定手机号获取验证码功能“> <br/> </p> <p>微信小程序验证码获取方式,代码如下所示:</p> <pre类= & lt; !——,绑定手机号,——比;   & lt; view 类=& # 39;内容# 39;比;   ,& lt; form  bindsubmit=癴ormSubmit"比;   & lt;才能view 类=& # 39;phone-box& # 39;比;   ,,& lt; text 类=& # 39;电话# 39;祝辞手机号& lt;/text>   ,,& lt; input  name=皃hone", type=& # 39;数字# 39;,占位符=扒胧淙胧只拧?最大长度=& # 39;11 & # 39;,name=皃hone",类=& # 39;数字# 39;,bindinput=& # 39; lovePhone& # 39;,/比;   & lt;才能/view>   & lt;才能view 类=& # 39;phone-box& # 39;比;   ,,& lt; text 类=& # 39;电话# 39;在验证码& lt;/text>   ,,& lt; input  name=皃honeCode",占位符=扒胧淙胙橹ぢ搿?类=& # 39;数字# 39;,placeholder-style=& # 39;颜色:# bbb # 39;, bindinput=皔anLoveInput",/比;   ,,& lt; view  bindtap=& # 39; yanLoveBtn& # 39;,类=& # 39;getNum& # 39;在{{getText2}} & lt;/view>   & lt;才能/view>   & lt;才能button  formType=皊ubmit",类=& # 39;提交# 39;在绑定& lt;/button>   ,& lt;/form>   & lt;/view>   .content  {   ,宽度:100%;   高度:大敌;汽车;   ,填充:0,50 rpx;   ,box-sizing: border-box;   }   .phone-box  {   ,宽度:100%;   ,身高:89 rpx;   ,边界底部:1 rpx  solid  # efefef;   ,显示:flex;   ,flex-direction:行;   ,justify-content: flex-start;   ,对齐项目:中心;   }   .phone  {   ,颜色:# 333;   ,margin-right: 60 rpx;   ,字体大小:28 rpx;   }   .number  {   ,颜色:# 333;   ,字体大小:28 rpx;   ,宽度:200 rpx;   }   .getNum  {   ,宽度:210 rpx;   ,高度:48 rpx;   ,背景:rgba(248,, 112,, 57岁,1);   ,这个特性:8 rpx;   ,字体大小:28 rpx;   ,字体类型:PingFang-SC-Medium;   ,颜色:rgba (255,, 255,, 255,, 1);   ,行高:48 rpx;   ,margin-right: 36 rpx;   ,text-align:中心;   }   .submit  {   ,宽度:480 rpx;   ,身高:80 rpx;   背景:大敌;rgba(248,, 112,, 57岁,1);   ,这个特性:8 rpx;   80年,margin-top: rpx;   ,颜色:# fff;   ,字体大小:32 rpx;   }   const  app =, getApp ();   页面({   ,数据:{//,才能验证手机号   ,,loginPhone:假的,   ,,loginPwd:假的,   loveChange才能:,真的,   hongyzphone才能:& # 39;& # 39;//,才能验证码是否正确   zhengLove才能:,真的,   huoLove才能:& # 39;& # 39;   getText2才能:& # 39;获取验证码& # 39;,   },   ,//手机验证   ,lovePhone: function  (e), {   let 才能;phone =, e.detail.value;   this.setData才能({,hongyzphone: phone })   if 才能;(! (/^ 1 [34578]\ d {9} $/test(手机))),{   ,,this.setData ({   ,,,lovePhone:假   ,,})   ,,console.log (phone.length)   ,,if  (phone.length 祝辞=,11),{   ,,,wx.showToast ({   ,,,,标题:,& # 39;手机号有误& # 39;,   ,,,,图标:,& # 39;没有# 39;   ,,,,时间:1000年   ,,,})   ,,}   ,,},{else    ,,this.setData ({   ,,,lovePhone:真实   ,,})   ,,}   },   ,//验证码输入   ,yanLoveInput: function  (e), {   let 才能;that =,;   let 才能;yanLove =, e.detail.value;   let 才能;huoLove =, this.data.huoLove;   that.setData({才能   ,,,yanLove: yanLove,   ,,,zhengLove:假的,   })才能   if 才能;(yanLove.length 祝辞=,4),{   ,,if  (yanLove ==, huoLove), {   ,,,that.setData ({   ,,,,zhengLove:,真的,   ,,,})   ,,},{else    ,,,that.setData ({   ,,,,zhengLove:,假的,   ,,,})   ,,,wx.showModal ({   ,,,,内容:,& # 39;输入验证码有误& # 39;,   ,,,,showCancel:,假的,   ,,,,成功:,function  (res), {,}   ,,,})   ,,}   ,,}   },   ,//验证码按钮   ,yanLoveBtn: function  (), {   let 才能;loveChange =, this.data.loveChange;   console.log才能(loveChange)   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null

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