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


Posted in Javascript onOctober 22, 2019

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

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

<!-- 绑定手机号 -->
<view class='content'>
 <form bindsubmit="formSubmit">
  <view class='phone-box'>
   <text class='phone'>手机号</text>
   <input name="phone" type='number' placeholder="请输入手机号" maxlength='11' name="phone" class='number' bindinput='lovePhone' />
  </view>
  <view class='phone-box'>
   <text class='phone'>验证码</text>
   <input name="phoneCode" placeholder="请输入验证码" class='number' placeholder-style='color:#bbb' bindinput="yanLoveInput" />
   <view bindtap='yanLoveBtn' class='getNum'>{{getText2}}</view>
  </view>
  <button formType="submit" class='submit'>绑定</button>
 </form>
</view>
.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 //验证码
 },
})

总结

以上所述是小编给大家介绍的微信小程序绑定手机号获取验证码功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
Javascript动态绑定事件的简单实现代码
Dec 25 Javascript
浅析document.ready和window.onload的区别讲解
Dec 18 Javascript
页面刷新时记住滚动条的位置jquery代码
Jun 17 Javascript
jquery validate demo 基础
Oct 29 Javascript
JavaScript仿支付宝密码输入框
Dec 29 Javascript
详解Jquery Easyui的验证扩展
Jan 09 Javascript
vue实现ajax滚动下拉加载,同时具有loading效果(推荐)
Jan 11 Javascript
JS简单获取并修改input文本框内容的方法示例
Apr 08 Javascript
JavaScript数值类型知识汇总
Nov 17 Javascript
vue父子组件间引用之$parent、$children
May 20 Javascript
如何用JS模拟实现数组的map方法
Jul 30 Javascript
解决vue cli4升级sass-loader(v8)后报错问题
Jul 30 Javascript
微信小程序开发之转发分享功能
Oct 22 #Javascript
微信小程序转发事件实现解析
Oct 22 #Javascript
小程序点击图片实现png转jpg
Oct 22 #Javascript
Node.js 实现抢票小工具 &amp; 短信通知提醒功能
Oct 22 #Javascript
微信小程序实现左侧滑动导航栏
Apr 08 #Javascript
微信小程序自定义组件components(代码详解)
Oct 21 #Javascript
微信小程序实现侧边分类栏
Oct 21 #Javascript
You might like
奇怪的PHP引用效率问题分析
2012/03/23 PHP
PHP四舍五入精确小数位及取整
2014/01/14 PHP
PHP使用Pthread实现的多线程操作实例
2015/11/14 PHP
PHP创建word文档的方法(平台无关)
2016/03/29 PHP
PHP使用 Imagick 扩展实现图片合成,圆角处理功能示例
2019/09/09 PHP
javascript 文档的编码问题解决
2009/03/01 Javascript
ExtJS Window 最小化的一种方法
2009/11/18 Javascript
js弹出层包含flash 不能关闭隐藏的2种处理方法
2013/06/17 Javascript
jquery 多行文本框(textarea)高度变化
2013/07/03 Javascript
div浮层,滚动条移动,位置保持不变的4种方法汇总
2013/12/11 Javascript
JavaScript中字符串拼接的基本方法
2015/07/07 Javascript
谈谈JavaScript异步函数发展历程
2015/09/29 Javascript
Node.js模块封装及使用方法
2016/03/06 Javascript
jQuery的Cookie封装,与PHP交互的简单实现
2016/10/05 Javascript
用React-Native+Mobx做一个迷你水果商城APP(附源码)
2017/12/25 Javascript
详解SPA中前端路由基本原理与实现方式
2018/09/12 Javascript
微信小程序实现登录遮罩效果
2018/11/01 Javascript
浅析vue中的MVVM实现原理
2019/03/04 Javascript
javascript面向对象三大特征之继承实例详解
2019/07/24 Javascript
小程序websocket心跳库(websocket-heartbeat-miniprogram)
2020/02/23 Javascript
flexible.js实现移动端rem适配方案
2020/04/07 Javascript
vue 判断页面是首次进入还是再次刷新的实例
2020/11/05 Javascript
Python中使用pprint函数进行格式化输出的教程
2015/04/07 Python
Python3中常用的处理时间和实现定时任务的方法的介绍
2015/04/07 Python
python实现清屏的方法
2015/04/30 Python
Linux下安装python3.6和第三方库的教程详解
2018/11/09 Python
Python函数装饰器原理与用法详解
2019/08/16 Python
Python中BeautifuSoup库的用法使用详解
2019/11/15 Python
浅谈Python协程
2020/06/17 Python
Python 中如何使用 virtualenv 管理虚拟环境
2021/01/21 Python
html+css实现自定义图片上传按钮功能
2019/09/04 HTML / CSS
viagogo英国票务平台:演唱会、体育比赛、戏剧门票
2017/03/24 全球购物
秋季运动会通讯稿
2014/01/24 职场文书
培训班开班仪式主持词
2014/03/28 职场文书
证婚人致辞精选
2015/07/28 职场文书
三严三实·严以律己心得体会
2016/01/13 职场文书