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


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 相关文章推荐
TextArea 控件的最大长度问题(js json)
Dec 16 Javascript
JavaScript 面向对象之命名空间
May 04 Javascript
使用变量动态设置js的属性名
Oct 19 Javascript
jquery中ajax跨域方法实例分析
Dec 18 Javascript
vue.js实例对象+组件树的详细介绍
Oct 20 Javascript
微信小程序结合mock.js实现后台模拟及调试
Mar 28 Javascript
vue+element实现表格新增、编辑、删除功能
May 28 Javascript
js实现内置计时器
Dec 16 Javascript
jQuery实现颜色打字机的完整代码
Mar 19 jQuery
Vue如何基于es6导入外部js文件
May 15 Javascript
利用Vue的v-for和v-bind实现列表颜色切换
Jul 17 Javascript
jQuery实现评论模块
Aug 19 jQuery
微信小程序开发之转发分享功能
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
Linux下 php5 MySQL5 Apache2 phpMyAdmin ZendOptimizer安装与配置[图文]
2008/11/18 PHP
PHP 进程锁定问题分析研究
2009/11/24 PHP
PHP中PDO的错误处理
2011/09/04 PHP
yii框架中的Url生产问题小结
2012/01/16 PHP
深入php define()函数以及defined()函数的用法详解
2013/06/05 PHP
php数组键名技巧小结
2015/02/17 PHP
YII2框架中excel表格导出的方法详解
2017/07/21 PHP
laravel5.6中的外键约束示例
2019/10/23 PHP
Convert Seconds To Hours
2007/06/16 Javascript
[推荐]javascript 面向对象技术基础教程
2009/03/03 Javascript
有关DOM元素与事件的3个谜题
2010/11/11 Javascript
原生JS实现表单checkbook获取已选择的值
2013/07/21 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史
2015/01/09 Javascript
使用canvas实现仿新浪微博头像截取上传功能
2015/09/02 Javascript
jQuery插件formValidator自定义函数扩展功能实例详解
2015/11/25 Javascript
极易被忽视的javascript面试题七问七答
2016/02/15 Javascript
Nodejs爬虫进阶教程之异步并发控制
2016/02/15 NodeJs
AngularJs学习第八篇 过滤器filter创建
2016/06/08 Javascript
js实现4个方向滚动的球
2017/03/06 Javascript
js 监控iframe URL的变化实例代码
2017/07/12 Javascript
基于BootStrap的文本编辑器组件Summernote
2017/10/27 Javascript
CountUp.js实现数字滚动增值效果
2019/10/17 Javascript
[50:50]完美世界DOTA2联赛PWL S3 Galaxy Racer vs Phoenix 第一场 12.10
2020/12/13 DOTA
python中对list去重的多种方法
2014/09/18 Python
python使用xmlrpclib模块实现对百度google的ping功能
2015/06/02 Python
Python判断文件和字符串编码类型的实例
2017/12/21 Python
Python实现监控Nginx配置文件的不同并发送邮件报警功能示例
2019/02/26 Python
CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码详解
2020/06/01 HTML / CSS
通信工程毕业生自荐信
2013/11/01 职场文书
对公司合理化的建议书
2014/03/12 职场文书
不遵守课堂纪律的检讨书
2014/09/24 职场文书
2014年技术部工作总结
2014/12/12 职场文书
2015年乡镇妇联工作总结
2015/05/19 职场文书
丧事主持词
2015/07/02 职场文书
2019学校请假条格式及范文
2019/06/25 职场文书
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
2021/06/29 Javascript