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


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 相关文章推荐
javascript实例分享---具有立体效果的图片特效
Jun 08 Javascript
Backbone.js中的集合详解
Jan 14 Javascript
jQuery中empty()方法用法实例
Jan 16 Javascript
jQuery预加载图片常用方法
Jun 15 Javascript
JavaScript基础知识之方法汇总结
Jan 24 Javascript
Angularjs结合Bootstrap制作的一个TODO List
Aug 18 Javascript
BootStrap Table 获取同行不同列元素的方法
Dec 19 Javascript
js实现hashtable的赋值、取值、遍历操作实例详解
Dec 25 Javascript
在Vue.js中使用Mixins的方法
Sep 12 Javascript
Node.js 中使用 async 函数的方法
Nov 20 Javascript
js实现视图和数据双向绑定的方法分析
Feb 05 Javascript
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
Apr 27 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
PHP入门速成(2)
2006/10/09 PHP
php二维数组排序方法(array_multisort usort)
2013/12/25 PHP
PHP fastcgi模式上传大文件(大约有300多K)报错
2014/09/28 PHP
JavaScript中的this实例分析
2011/04/28 Javascript
动态加载脚本提升javascript性能
2014/02/24 Javascript
原生js实现模拟滚动条
2015/06/15 Javascript
jQuery 操作input中radio的技巧
2016/07/18 Javascript
微信小程序-详解数据缓存
2016/11/24 Javascript
vuejs父子组件通信的问题
2017/01/11 Javascript
React教程之封装一个Portal可复用组件的方法
2018/01/02 Javascript
基于 Immutable.js 实现撤销重做功能的实例代码
2018/03/01 Javascript
解决vue页面DOM操作不生效的问题
2018/03/17 Javascript
ES6关于Promise的用法详解
2018/05/07 Javascript
说说如何使用Vuex进行状态管理(小结)
2019/04/14 Javascript
个人小程序接入支付解决方案
2019/05/23 Javascript
jQuery操作cookie的示例代码
2019/06/05 jQuery
在mpvue框架中使用Vant WeappUI组件库的注意事项【推进】
2019/06/09 Javascript
JavaScript设计模式--简单工厂模式定义与应用案例详解
2020/05/23 Javascript
Vue组件间数据传递的方式(3种)
2020/07/13 Javascript
[47:18]完美世界DOTA2联赛循环赛 IO vs FTD BO2第一场 11.05
2020/11/06 DOTA
python with statement 进行文件操作指南
2014/08/22 Python
Python Socket使用实例
2017/12/18 Python
简单实现python聊天程序
2018/04/01 Python
python实现时间o(1)的最小栈的实例代码
2018/07/23 Python
Python 实现域名解析为ip的方法
2019/02/14 Python
numpy.ndarray 实现对特定行或列取值
2019/12/05 Python
python socket通信编程实现文件上传代码实例
2019/12/14 Python
Python如何定义有默认参数的函数
2020/08/10 Python
使用Python实现音频双通道分离
2020/12/25 Python
详解css3自定义滚动条样式写法
2017/12/25 HTML / CSS
John Hardy官方网站:手工设计首饰的奢侈品牌
2017/07/05 全球购物
华为消费者德国官方网站:HUAWEI德国
2020/11/03 全球购物
社区平安建设汇报材料
2014/08/14 职场文书
先进基层党组织材料
2014/12/25 职场文书
2015年保险公司个人工作总结
2015/05/22 职场文书
手写实现JS中的new
2021/11/07 Javascript