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


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学习阶段性总结(2)--(X)HTML学习
Feb 03 Javascript
在网站上应该用的30个jQuery插件整理
Nov 03 Javascript
javascript 获取网页标题代码实例
Jan 22 Javascript
JS组件Bootstrap Table表格行拖拽效果实现代码
Aug 27 Javascript
JavaScript实现显示函数调用堆栈的方法
Apr 21 Javascript
BootStrap Table对前台页面表格的支持实例讲解
Dec 22 Javascript
基于JavaScript实现表格滚动分页
Nov 22 Javascript
Bootstrap4如何定制自己的颜色和风格
Feb 26 Javascript
select获取下拉框的值 下拉框默认选中方法
Feb 28 Javascript
使用typescript开发angular模块并发布npm包
Apr 19 Javascript
Node.js 多线程完全指南总结
Mar 27 Javascript
从0到1搭建element后台框架优化篇(打包优化)
May 12 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代码
2016/08/08 PHP
yii2局部关闭(开启)csrf的验证的实例代码
2017/07/10 PHP
PHP实现将优酷土豆腾讯视频html地址转换成flash swf地址的方法
2017/08/04 PHP
php实现有序数组旋转后寻找最小值方法
2018/09/27 PHP
phpStudy vscode 搭建debug调试的教程详解
2020/07/28 PHP
JSON 入门指南 想了解json的朋友可以看下
2009/08/26 Javascript
javascript 限制输入脚本大全
2009/11/03 Javascript
jquery(live)中File input的change方法只起一次作用的解决办法
2011/10/21 Javascript
新发现一个骗链接的方法(js读取cookies)
2012/01/11 Javascript
jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)
2013/01/23 Javascript
jquery中使用$(#form).submit()重写提交表单无效原因分析及解决
2013/03/25 Javascript
JavaScript+CSS实现仿天猫侧边网页菜单效果
2015/08/25 Javascript
原生JS实现首页进度加载动画
2016/09/14 Javascript
Vue.js展示AJAX数据简单示例讲解
2017/03/29 Javascript
easyui关于validatebox实现多重规则验证的方法(必看)
2017/04/12 Javascript
AngularJS实现表单验证功能详解
2017/10/12 Javascript
总结JavaScript在IE9之前版本中内存泄露问题
2018/04/28 Javascript
Node.js爬虫如何获取天气和每日问候详解
2019/08/26 Javascript
js实现经典贪吃蛇小游戏
2020/03/19 Javascript
Python实现截屏的函数
2015/07/25 Python
python批量替换多文件字符串问题详解
2018/04/22 Python
详解Python打包分发工具setuptools
2019/08/05 Python
python实现门限回归方式
2020/02/29 Python
使用keras实现densenet和Xception的模型融合
2020/05/23 Python
adidas瑞典官方网站:购买阿迪达斯鞋子和运动服
2019/12/11 全球购物
自动化专业本科毕业生求职信
2013/10/20 职场文书
银行职员个人的工作自我评价
2014/02/15 职场文书
人事科岗位职责范本
2014/03/02 职场文书
担保书怎么写
2014/04/01 职场文书
岗位标兵事迹材料
2014/05/17 职场文书
中学生逃课检讨书
2015/02/17 职场文书
小学班主任个人总结
2015/03/03 职场文书
趣味运动会标语口号
2015/12/26 职场文书
导游词之澳门妈祖庙
2019/12/19 职场文书
Vue OpenLayer 为地图绘制风场效果
2022/04/24 Vue.js
win10截图快捷键win+shift+s没有反应无法截图怎么解决?
2022/08/14 数码科技