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


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 相关文章推荐
告诉大家什么是JSON
Jun 10 Javascript
js绑定事件this指向发生改变的问题解决方法
Apr 23 Javascript
jQuery动画效果-slideUp slideDown上下滑动示例代码
Aug 28 Javascript
浅谈JavaScript函数参数的可修改性问题
Dec 05 Javascript
node.js中的fs.readdirSync方法使用说明
Dec 17 Javascript
基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项,一个下拉菜单和登录表单导航条)
Jul 22 Javascript
BootStrap轮播HTML代码(推荐)
Dec 10 Javascript
详解vue-router 2.0 常用基础知识点之导航钩子
May 10 Javascript
vue刷新页面时去闪烁提升用户体验效果的实现方法
Dec 10 Javascript
原生JS使用Canvas实现拖拽式绘图功能
Jun 05 Javascript
微信小程序事件流原理解析
Nov 27 Javascript
javascript实现滚动条效果
Mar 24 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
玛琪朵 Macchiato
2021/03/03 咖啡文化
为php4加入动态flash文件的生成的支持
2006/10/09 PHP
php trim 去除空字符的定义与语法介绍
2010/05/31 PHP
php GeoIP的使用教程
2011/03/09 PHP
ThinkPHP发送邮件示例代码
2016/10/08 PHP
点击下载链接 弹出页面实现代码
2009/10/01 Javascript
javascript 特性检测并非浏览器检测
2010/01/15 Javascript
js函数在frame中的相互调用详解
2014/03/03 Javascript
JS实现选择TextArea内文本的方法
2015/08/03 Javascript
JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解
2016/06/14 Javascript
jQuery下拉框的简单应用
2016/06/24 Javascript
微信小程序中单位rpx和rem的使用
2016/12/06 Javascript
javascript编程实现栈的方法详解【经典数据结构】
2017/04/11 Javascript
详解Vue + Vuex 如何使用 vm.$nextTick
2017/11/20 Javascript
深入剖析Node.js cluster模块
2018/05/23 Javascript
代码整洁之道(重构)
2018/10/25 Javascript
JavaScript中var的重要性实例分析
2019/07/09 Javascript
Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)
2019/09/01 Javascript
layui异步加载table表中某一列数据的例子
2019/09/16 Javascript
微信小程序登录时如何获取input框中的内容
2019/12/04 Javascript
详解vue3.0 的 Composition API 的一种使用方法
2020/10/26 Javascript
[00:37]DOTA2上海特级锦标赛 OG战队宣传片
2016/03/03 DOTA
[52:06]完美世界DOTA2联赛决赛日 Inki vs LBZS 第一场 11.08
2020/11/10 DOTA
python爬虫爬取快手视频多线程下载功能
2018/02/28 Python
Python 删除整个文本中的空格,并实现按行显示
2018/07/24 Python
python tkinter实现界面切换的示例代码
2019/06/14 Python
Python符号计算之实现函数极限的方法
2019/07/15 Python
python tkinter基本属性详解
2019/09/16 Python
Python json模块与jsonpath模块区别详解
2020/03/05 Python
解决tensorflow/keras时出现数组维度不匹配问题
2020/06/29 Python
MATLAB数学建模之画图汇总
2020/07/16 Python
美国排名第一的在线葡萄酒商店:Wine.com
2016/09/07 全球购物
七年级音乐教学反思
2014/01/26 职场文书
逃课上网检讨书
2014/02/20 职场文书
车辆安全隐患排查制度
2015/08/05 职场文书
阿里云服务器部署mongodb的详细过程
2021/09/04 MongoDB