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


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 相关文章推荐
新老版本juqery获取radio对象的方法
Mar 01 Javascript
5分钟理解JavaScript中this用法分享
Nov 09 Javascript
判断JS对象是否拥有某种属性的两种方式
Dec 02 Javascript
jQuery实现仿Google首页拖动效果的方法
May 04 Javascript
SWFObject基本用法实例分析
Jul 20 Javascript
快速学习AngularJs HTTP响应拦截器
Dec 31 Javascript
canvas绘制表盘时钟
Jan 23 Javascript
jQuery.Form上传文件操作
Feb 05 Javascript
Vue路由跳转问题记录详解
Jun 15 Javascript
JS函数进阶之prototy用法实例分析
Jan 15 Javascript
npx create-react-app xxx创建项目报错的解决办法
Feb 17 Javascript
JavaScript原型链详解
Nov 07 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中的fopen()函数用打开文件模式说明
2013/06/20 PHP
利用ajax和PHP实现简单的流程管理
2017/03/23 PHP
PHP开发实现快递查询功能详解
2019/04/08 PHP
Mootools 1.2教程 Tooltips
2009/09/15 Javascript
JavaScript 入门基础知识 想学习js的朋友可以参考下
2009/12/26 Javascript
Javascript(AJAX)解析XML的代码(兼容FIREFOX/IE)
2010/07/11 Javascript
菜鸟javascript基础资料整理2
2010/12/06 Javascript
js 去掉空格实例 Trim() LTrim() RTrim()
2014/01/07 Javascript
js实现的类似于asp数据字典的数据类型代码实例
2014/09/03 Javascript
Javascript与jQuery方法的隐藏与显示
2015/01/19 Javascript
JavaScript学习笔记之JS函数
2015/01/22 Javascript
Bootstrap与KnockoutJs相结合实现分页效果实例详解
2016/05/03 Javascript
利用Node.js对文件进行重命名
2017/03/12 Javascript
Vue组件中slot的用法
2018/01/30 Javascript
手动用webpack搭建第一个ReactApp的示例
2018/04/11 Javascript
webstorm和.vue中es6语法报错的解决方法
2018/05/08 Javascript
vue操作动画的记录animate.css实例代码
2019/04/26 Javascript
基于Vue中使用节流Lodash throttle详解
2019/10/30 Javascript
Node.js 中判断一个文件是否存在
2020/08/24 Javascript
python实现异步回调机制代码分享
2014/01/10 Python
python修改字典内key对应值的方法
2015/07/11 Python
20招让你的Python飞起来!
2016/09/27 Python
Python排序搜索基本算法之堆排序实例详解
2017/12/08 Python
Python实现在tkinter中使用matplotlib绘制图形的方法示例
2018/01/18 Python
Python使用pip安装报错:is not a supported wheel on this platform的解决方法
2018/01/23 Python
使用jupyter notebook运行python和R的步骤
2020/08/13 Python
门诊挂号室室长岗位职责
2013/11/27 职场文书
木工主管岗位职责
2013/12/08 职场文书
工作收入证明模板
2014/10/10 职场文书
依法行政工作汇报
2014/10/28 职场文书
2014年仓库管理员工作总结
2014/11/18 职场文书
2014年音乐教师工作总结
2014/12/03 职场文书
2015年班主任个人工作总结
2015/03/31 职场文书
2015年团支部工作总结
2015/04/03 职场文书
雷锋的观后感
2015/06/10 职场文书
Python爬虫基础初探selenium
2021/05/31 Python