微信小程序如何获取手机验证码


Posted in Javascript onNovember 04, 2018

一种比较常见的功能获取手机验证码,供大家参考,具体内容如下

先看效果图:

微信小程序如何获取手机验证码

其实这个功能实现起来很简单,主要就是调取第三方接口,拿到返回值验证的问题

直接上代码吧:

<view class='changeInfo'>
 <view class='changeInfoName'>
   <input placeholder='请输入姓名' bindinput='getNameValue' value='{{name}}'/> 
 </view>
 
 <view class='changeInfoName'>
   <input placeholder='请输入手机号' bindinput='getPhoneValue' value='{{phone}}'/> 
 </view>
 <view class='changeInfoName'>
   <input placeholder='请输验证码' bindinput='getCodeValue' value='{[code]}' style='width:70%;'/> 
   <button class='codeBtn' bindtap='getVerificationCode' disabled='{{disabled}}' >{{codename}}</button>
 </view>
 <button class='changeBtn' bindtap='save'>保存</button>
</view>

CSS:

page{
 height: 100%;
 width: 100%;
 background: linear-gradient(#5681d7, #486ec3);
}
.changeInfo{
 display: flex;
 flex-direction: column;
 justify-content: space-between;
 width: 90%;
 margin: 50rpx auto;
}
.changeInfoName{
 position: relative;
 height: 80rpx;
 width: 100%;
 border-radius: 10rpx;
 background: #fff;
 margin-bottom: 20rpx;
 padding-left: 20rpx;
 box-sizing: border-box;
}
.codeBtn{
 position: absolute;
 right: 0;
 top: 0;
 color: #bbb;
 width: 30%;
 font-size: 26rpx;
 height: 80rpx;
 line-height: 80rpx;
}
.changeInfoName input{
 width: 100%;
 height:100%;
}
.changeBtn{
 width: 40%;
 height: 100rpx;
 background: #fff;
 color: #000;
 border-radius: 50rpx;
 position: absolute;
 bottom: 10%;
 left: 50%;
 margin-left: -20%;
 line-height: 100rpx;
}

js: 

var app = require('../../resource/js/util.js');
Page({
 /**
  * 页面的初始数据
  */
 data: {
  name:'',//姓名
  phone:'',//手机号
  code:'',//验证码
  iscode:null,//用于存放验证码接口里获取到的code
  codename:'获取验证码'
 },
 //获取input输入框的值
 getNameValue:function(e){
  this.setData({
   name:e.detail.value
  })
 },
 getPhoneValue:function(e){
  this.setData({
   phone:e.detail.value
  })
 },
 getCodeValue: function (e) {
  this.setData({
   code: e.detail.value
  })
 },
 getCode:function(){
  var a = this.data.phone;
  var _this = this;
  var myreg = /^(14[0-9]|13[0-9]|15[0-9]|17[0-9]|18[0-9])\d{8}$$/;
  if (this.data.phone == "") {
   wx.showToast({
    title: '手机号不能为空',
    icon: 'none',
    duration: 1000
   })
   return false;
  } else if (!myreg.test(this.data.phone)) {
   wx.showToast({
    title: '请输入正确的手机号',
    icon: 'none',
    duration: 1000
   })
   return false;
  }else{
   wx.request({
    data: {},
    'url': 接口地址,
    success(res) {
     console.log(res.data.data)
     _this.setData({
      iscode: res.data.data
     })
     var num = 61;
     var timer = setInterval(function () {
      num--;
      if (num <= 0) {
       clearInterval(timer);
       _this.setData({
        codename: '重新发送',
        disabled: false
       })
 
      } else {
       _this.setData({
        codename: num + "s"
       })
      }
     }, 1000)
    }
   })
   
  }
  
  
 },
 //获取验证码
 getVerificationCode() {
  this.getCode();
  var _this = this
  _this.setData({
   disabled: true
  })
 },
 //提交表单信息
 save:function(){
  var myreg = /^(14[0-9]|13[0-9]|15[0-9]|17[0-9]|18[0-9])\d{8}$$/;
  if(this.data.name == ""){
   wx.showToast({
    title: '姓名不能为空',
    icon: 'none',
    duration: 1000
   })
   return false;
  }
  if(this.data.phone == ""){
   wx.showToast({
    title: '手机号不能为空',
    icon: 'none',
    duration: 1000
   })
   return false;
  }else if(!myreg.test(this.data.phone)){
   wx.showToast({
    title: '请输入正确的手机号',
    icon: 'none',
    duration: 1000
   })
   return false;
  }
  if(this.data.code == ""){
   wx.showToast({
    title: '验证码不能为空',
    icon: 'none',
    duration: 1000
   })
   return false;
  }else if(this.data.code != this.data.iscode){
   wx.showToast({
    title: '验证码错误',
    icon: 'none',
    duration: 1000
   })
   return false;
  }else{
   wx.setStorageSync('name', this.data.name);
   wx.setStorageSync('phone', this.data.phone);
   wx.redirectTo({
    url: '../add/add',
   })
  }
 },
 /**
  * 生命周期函数--监听页面加载
  */
 onLoad: function (options) {
  
 },
 
 /**
  * 生命周期函数--监听页面初次渲染完成
  */
 onReady: function () {
 
 },
 
 /**
  * 生命周期函数--监听页面显示
  */
 onShow: function () {
 
 },
 
 /**
  * 生命周期函数--监听页面隐藏
  */
 onHide: function () {
 
 },
 
 /**
  * 生命周期函数--监听页面卸载
  */
 onUnload: function () {
 
 },
 
 /**
  * 页面相关事件处理函数--监听用户下拉动作
  */
 onPullDownRefresh: function () {
 
 },
 
 /**
  * 页面上拉触底事件的处理函数
  */
 onReachBottom: function () {
 
 },
 
 /**
  * 用户点击右上角分享
  */
 onShareAppMessage: function () {
 
 }
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS写的数字拼图小游戏代码[学习参考]
Oct 29 Javascript
jQuery学习笔记之jQuery的DOM操作
Dec 22 Javascript
extjs之去除s.gif的影响
Dec 25 Javascript
JavaScript中的Math.sin()方法使用详解
Jun 15 Javascript
浅谈键盘上回车按钮的js触发事件
Feb 13 Javascript
详解angular2实现ng2-router 路由和嵌套路由
Mar 24 Javascript
浅析Angular2子模块以及异步加载
Apr 24 Javascript
Cropper.js 实现裁剪图片并上传(PC端)
Aug 20 Javascript
分分钟学会vue中vuex的应用(入门教程)
Sep 14 Javascript
Vue 自定义动态组件实例详解
Mar 28 Javascript
layui table设置某一行的字体颜色方法
Sep 05 Javascript
微信小程序学习总结(五)常见问题实例小结
Jun 04 Javascript
微信小程序实现弹出层效果
May 26 #Javascript
微信小程序实现预览图片功能
Oct 22 #Javascript
详解如何使用koa实现socket.io官网的例子
Nov 04 #Javascript
微信小程序实现多选功能
Nov 04 #Javascript
微信小程序实现无限滚动列表
May 29 #Javascript
微信小程序自定义轮播图
Nov 04 #Javascript
微信小程序实现带缩略图轮播效果
Nov 04 #Javascript
You might like
Zend引擎的发展 [15]
2006/10/09 PHP
PHP对象Object的概念 介绍
2012/06/14 PHP
php中的一些数组排序方法分享
2012/07/20 PHP
浅谈使用PHP开发微信支付的流程
2015/10/04 PHP
laravel框架路由分组,中间件,命名空间,子域名,路由前缀实例分析
2020/02/18 PHP
javascript一个无懈可击的实例化XMLHttpRequest的方法
2010/10/13 Javascript
node.js中的http.response.end方法使用说明
2014/12/14 Javascript
jquery实现右键菜单插件
2015/03/29 Javascript
js代码验证手机号码和电话号码是否合法
2015/07/30 Javascript
js实现带圆角的两级导航菜单效果代码
2015/08/24 Javascript
jQuery配合coin-slider插件制作幻灯片效果的流程解析
2016/05/13 Javascript
EasyUI 结合JS导出Excel文件的实现方法
2016/11/10 Javascript
JavaScript基于activexobject连接远程数据库SQL Server 2014的方法
2017/07/12 Javascript
nodejs实现简单的gulp打包
2017/12/21 NodeJs
React 实现拖拽功能的示例代码
2019/01/06 Javascript
小程序hover-class点击态效果实现
2019/02/26 Javascript
JavaScript惰性载入函数实例分析
2019/03/27 Javascript
[02:39]DOTA2英雄基础教程 天怒法师
2013/11/29 DOTA
tensorflow 恢复指定层与不同层指定不同学习率的方法
2018/07/26 Python
Python 实现Serial 与STM32J进行串口通讯
2019/12/18 Python
如何利用pygame实现简单的五子棋游戏
2019/12/29 Python
python小白学习包管理器pip安装
2020/06/09 Python
python解释器安装教程的方法步骤
2020/07/02 Python
python 发送邮件的示例代码(Python2/3都可以直接使用)
2020/12/03 Python
基于CSS3制作立体效果导航菜单
2016/01/12 HTML / CSS
京东全球售:直邮香港,澳门,台湾,美国,澳大利亚等地区
2017/09/24 全球购物
次世代生活态度:Hypebeast
2018/07/05 全球购物
Famous Footwear加拿大:美国多品牌运动休闲鞋店
2018/12/05 全球购物
同步和异步有何异同,在什么情况下分别使用他们?举例说明
2014/02/27 面试题
小学生五年级大队长竞选发言稿
2014/09/12 职场文书
2014年平安建设工作总结
2014/11/19 职场文书
2016年离婚协议书范文
2016/03/18 职场文书
本地通过nginx配置反向代理的全过程记录
2021/03/31 Servers
LayUI+Shiro实现动态菜单并记住菜单收展的示例
2021/05/06 Javascript
redis调用二维码时的不断刷新排查分析
2022/04/01 Redis
MySQL中order by的执行过程
2022/06/05 MySQL