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


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 相关文章推荐
JS仿flash上传头像效果实现代码
Jul 18 Javascript
JS使用ajax方法获取指定url的head信息中指定字段值的方法
Mar 24 Javascript
JavaScript面对国际化编程时的一些建议
Jun 24 Javascript
JS遍历页面所有对象属性及实现方法
Aug 01 Javascript
分享JS数组求和与求最大值的方法
Aug 11 Javascript
vue二级路由设置方法
Feb 09 Javascript
vue项目中跳转到外部链接的实例讲解
Sep 20 Javascript
vue中使用 pako.js 解密 gzip加密字符串的方法
Jun 10 Javascript
使用vscode快速建立vue模板过程详解
Oct 10 Javascript
es6 for循环中let和var区别详解
Jan 12 Javascript
JavaScript中this函数使用实例解析
Feb 21 Javascript
微信小程序向Java后台传输参数的方法实现
Dec 10 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
收音机频率指针指示不准确和灵敏度低问题
2021/03/02 无线电
PHP操作文件方法问答
2007/03/16 PHP
JSON用法之将PHP数组转JS数组,JS如何接收PHP数组
2015/10/08 PHP
Zend Framework实现多文件上传功能实例
2016/03/21 PHP
利用PHP生成静态html页面的原理
2016/09/30 PHP
PHP数组相加操作及与array_merge的区别浅析
2016/11/26 PHP
JS+CSS实现实用的单击输入框弹出选择框的方法
2015/02/28 Javascript
jQuery的load()方法及其回调函数用法实例
2015/03/25 Javascript
简化版手机端照片预览组件
2015/04/13 Javascript
jquery控制页面的展开和隐藏实现方法(推荐)
2016/10/15 Javascript
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
2017/04/21 jQuery
HTML5开发Kinect体感游戏的实例应用
2017/09/18 Javascript
使用Dropzone.js上传的示例代码
2017/10/10 Javascript
React 无状态组件(Stateless Component) 与高阶组件
2018/08/14 Javascript
Vue数据驱动表单渲染,轻松搞定form表单
2019/07/19 Javascript
JavaScript 生成唯一ID的几种方式
2021/02/19 Javascript
[32:56]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第二场 12.11
2020/12/16 DOTA
Python设计模式之观察者模式简单示例
2018/01/10 Python
Python3.6安装及引入Requests库的实现方法
2018/01/24 Python
python提取图像的名字*.jpg到txt文本的方法
2018/05/10 Python
python 提取tuple类型值中json格式的key值方法
2018/12/31 Python
matplotlib 曲线图 和 折线图 plt.plot()实例
2020/04/17 Python
五分钟带你搞懂python 迭代器与生成器
2020/08/30 Python
Python2与Python3关于字符串编码处理的差别总结
2020/09/07 Python
Expedia丹麦:全球领先的旅游网站
2018/03/18 全球购物
采用冷却技术的超自然舒适度:GhostBed床垫
2018/09/18 全球购物
Nanushka官网:匈牙利服装品牌
2019/08/14 全球购物
人事主管岗位职责范本
2013/12/04 职场文书
打架检讨书800字
2014/01/10 职场文书
优秀志愿者事迹材料
2014/02/03 职场文书
五年级科学教学反思
2014/02/05 职场文书
数学国培研修感言
2014/02/13 职场文书
《圆明园的毁灭》教学反思
2014/02/28 职场文书
分居协议书范本
2014/11/03 职场文书
教学督导岗位职责
2015/04/10 职场文书
微信小程序 WeUI扩展组件库的入门教程
2022/04/21 Javascript