首页 > 课堂 > 小程序 > 正文

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

2020-03-21 16:07:48
字体:
来源:转载
供稿:网友

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

先看效果图:

微信小程序,手机验证码

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

直接上代码吧:

<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 () {  }})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持VEVB武林网。


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表