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


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 网页黑白效果实现代码(兼容IE/FF等)
Apr 23 Javascript
jquery的键盘事件修改代码
Feb 24 Javascript
JavaScript子类用Object.getPrototypeOf去调用父类方法解析
Dec 05 Javascript
Event altKey,ctrlKey,shiftKey属性解析
Dec 18 Javascript
用js一次改变多个input的readonly属性值的方法
Jun 11 Javascript
在JavaScript中处理数组之reverse()方法的使用
Jun 09 Javascript
jQuery手机拨号界面特效代码分享
Aug 27 Javascript
JS模拟实现方法重载示例
Aug 03 Javascript
JavaScript中数据类型转换总结
Dec 25 Javascript
JavaScript引用类型RegExp基本用法详解
Aug 09 Javascript
Vue项目前后端联调(使用proxyTable实现跨域方式)
Jul 18 Javascript
JavaScript实现网页计算器功能
Oct 29 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
android上传图片到PHP的过程详解
2015/08/03 PHP
jquery+json 通用三级联动下拉列表
2010/04/19 Javascript
表单类各种类型(文本框)失去焦点效果jquery代码
2013/04/26 Javascript
用RadioButten或CheckBox实现div的显示与隐藏
2013/09/21 Javascript
JavaScript的继承的封装介绍
2013/10/15 Javascript
jQuery插件EnPlaceholder实现输入框提示文字
2015/06/05 Javascript
javascript实现倒计时并弹窗提示特效
2015/06/05 Javascript
跨域请求两种方法 jsonp和cors的实现
2018/11/11 Javascript
Cocos2d实现刮刮卡效果
2018/12/20 Javascript
JS中的算法与数据结构之栈(Stack)实例详解
2019/08/20 Javascript
layui-table表复选框勾选的所有行数据获取的例子
2019/09/13 Javascript
在layer弹层layer.prompt中,修改placeholder的实现方法
2019/09/27 Javascript
vue实现学生信息管理系统
2020/05/30 Javascript
微信小程序实现简单的select下拉框
2020/11/23 Javascript
vue中watch的用法汇总
2020/12/28 Vue.js
python list 合并连接字符串的方法
2013/03/09 Python
用Python的Tornado框架结合memcached页面改善博客性能
2015/04/24 Python
Python基于百度AI的文字识别的示例
2018/04/21 Python
pandas 时间格式转换的实现
2019/07/06 Python
opencv转换颜色空间更改图片背景
2019/08/20 Python
Django中从mysql数据库中获取数据传到echarts方式
2020/04/07 Python
Python批量安装卸载1000个apk的方法
2020/04/10 Python
pycharm下pyqt4安装及环境配置的教程
2020/04/24 Python
Python request post上传文件常见要点
2020/11/20 Python
python 如何把docker-compose.yaml导入到数据库相关条目里
2021/01/15 Python
CSS3伪类选择器:nth-child()
2009/04/02 HTML / CSS
探索欧洲最好的品牌:Bombinate
2019/06/14 全球购物
大学生护理专业自荐信
2013/10/03 职场文书
《学棋》教后反思
2014/04/14 职场文书
餐饮服务食品安全责任书
2014/07/25 职场文书
2014村党支部书记党建工作汇报材料
2014/11/02 职场文书
部门经理迟到检讨书
2015/02/16 职场文书
Go各时间字符串使用解析
2021/04/02 Golang
用CSS3画一个爱心
2021/04/27 HTML / CSS
Java日常练习题,每天进步一点点(38)
2021/07/26 Java/Android
TV动画《间谍过家家》公开PV
2022/03/20 日漫