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


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多线程的实现方法
May 08 Javascript
用apply让javascript函数仅执行一次的代码
Jun 27 Javascript
Jquery拖拽并简单保存的实现代码
Nov 28 Javascript
jQuery EasyUI API 中文文档 搜索框
Sep 29 Javascript
javascript (用setTimeout而非setInterval)
Dec 28 Javascript
Javascript全局变量var与不var的区别深入解析
Dec 09 Javascript
js实现日历可获得指定日期周数及星期几示例分享(js获取星期几)
Mar 14 Javascript
javascript使用for循环批量注册的事件不能正确获取索引值的解决方法
Dec 20 Javascript
jquery动态添加删除(tr/td)
Feb 09 Javascript
防止Node.js中错误导致进程阻塞的办法
Aug 11 Javascript
setTimeout函数的神奇使用
Feb 26 Javascript
Typescript3.9 常用新特性一览(推荐)
May 14 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
全文搜索和替换
2006/10/09 PHP
php中单个数据库字段多列显示(单字段分页、横向输出)
2014/07/28 PHP
Yii 快速,安全,专业的PHP框架
2014/09/03 PHP
PHP多维数组转一维数组的简单实现方法
2015/12/23 PHP
PHP新特性之字节码缓存和内置服务器
2017/08/11 PHP
php实现的支付宝网页支付功能示例【基于TP5框架】
2019/09/16 PHP
javascript onkeydown,onkeyup,onkeypress,onclick,ondblclick
2009/02/04 Javascript
Extjs学习笔记之六 面版
2010/01/08 Javascript
关于可运行代码无法正常执行的使用说明
2010/05/13 Javascript
javascript模拟枚举的简单实例
2014/03/06 Javascript
jQuery插件kinMaxShow扩展效果用法实例
2015/05/04 Javascript
探寻JavaScript中this指针指向
2016/04/23 Javascript
Bootstrap插件全集
2016/07/18 Javascript
Vue组件BootPage实现简单的分页功能
2016/09/12 Javascript
基于bootstrap实现bootstrap中文网巨幕效果
2017/05/02 Javascript
详解AngularJS脏检查机制及$timeout的妙用
2017/06/19 Javascript
vue 父组件给子组件传值子组件给父组件传值的实例代码
2019/04/15 Javascript
PHP读取远程txt文档到数组并实现遍历
2020/08/25 Javascript
利用Python中的mock库对Python代码进行模拟测试
2015/04/16 Python
用python写的一个wordpress的采集程序
2016/02/27 Python
python机器学习之神经网络(二)
2017/12/20 Python
Python实现图片尺寸缩放脚本
2018/03/10 Python
Django1.9 加载通过ImageField上传的图片方法
2018/05/25 Python
python做接口测试的必要性
2019/11/20 Python
Python 处理日期时间的Arrow库使用
2020/08/18 Python
Python实现加密的RAR文件解压的方法(密码已知)
2020/09/11 Python
Python存储读取HDF5文件代码解析
2020/11/25 Python
详解pandas apply 并行处理的几种方法
2021/02/24 Python
英国索普公园票务和酒店套餐:Thorpe Breaks
2019/09/14 全球购物
中软国际Java程序员机试题
2012/08/19 面试题
机电一体化应届生求职信范文
2014/01/24 职场文书
群众路线教育实践活动方案
2014/02/02 职场文书
培训协议书范本
2014/04/22 职场文书
夫妻分居协议书范文
2014/11/26 职场文书
《赵州桥》教学反思
2016/02/17 职场文书
Vue实现跑马灯样式文字横向滚动
2021/11/23 Vue.js