效果：

源码地址：链接：https://pan.baidu.com/s/17fbWUS1jrBLbPXyEgHKVcg 密码：ot16

参考：https://blog.csdn.net/Beijiyang999/article/details/77885021

布局

<view class="section">
  <text>手机号码</text>
  <input placeholder="请输入手机号码" type="number" maxlength="11" bindinput="inputPhoneNum" auto-focus='true' />
  <text wx:if='{{send}}' class='sendMsg' bindtap='sendMsg'>发送</text>
  <text wx:if="{{alreadySend}}" class="sendMsg" bindtap="sendMsg">{{second+"s"}}</text>

</view>

<view class="section">
  <text>短信验证</text>
  <input placeholder="短信验证码" type="number" maxlength="6" bindinput="addCode" />
</view>

<button type="{{buttonType}}" disabled="{{disabled}}" bindtap="onSubmit">保存</button>

js方法函数

// pages/info-two/info-two.js
Page({
/**
* 页面的初始数据
*/
data: {
send: false,
alreadySend: false,
second: 60,
disabled: true,
buttonType: 'default',
phoneNum: '',
code: '',
},
// 手机号部分
inputPhoneNum: function (e) {
let phoneNum = e.detail.value
if (phoneNum.length === 11) {
let checkedNum = this.checkPhoneNum(phoneNum)
if (checkedNum) {
this.setData({
phoneNum: phoneNum
})
console.log( 'phoneNum=' + this.data.phoneNum)
this.showSendMsg()
this.activeButton()
}
} else {
this.setData({
phoneNum: ''
})
this.hideSendMsg()
}
},
checkPhoneNum: function (phoneNum) {
let str = /^1\d{10}$/
if (str.test(phoneNum)) {
return true
} else {
wx.showToast({
title: '手机号不正确',
icon: 'none'
})
return false
}
},
showSendMsg: function () {
if (! this.data.alreadySend) {
this.setData({
send: true
})
}
},
hideSendMsg: function () {
this.setData({
send: false,
disabled: true,
buttonType: 'default'
})
},
sendMsg: function () {
console.log( '发送获取验证码')
this.setData({
alreadySend: true,
send: false
})
// this.timer()
this.countdown()
},
timer: function () {
//Promise:ES6将其写进了语言标准 获取异步操作的消息
let promise = new Promise((resolve, reject) => {
let setTimer = setInterval(
() => {
this.setData({
second: this.data.second - 1
})
if ( this.data.second <= 0) {
this.setData({
second: 60,
alreadySend: false,
send: true
})
// resolve异步操作成功
resolve(setTimer)
}
}
, 1000)
})
// 将Promise对象的状态从“未完成”变为“成功”
promise.then((setTimer) => {
console.log( 'resolve异步操作成功')
clearInterval(setTimer)
})
},
countdown: function() {
var that= this
var second= this.data.second
if(second== 0) {
that.setData({
second: 60
})
return
}
var time=setTimeout( function(){
that.setData({
second: second- 1
})
that.countdown(that)
}, 1000)
},
// 验证码
addCode: function (e) {
console.log( '验证码-addCode')
this.setData({
code: e.detail.value
})
this.activeButton()
},
// 按钮
activeButton: function () {
//let{} es6的解构赋值。大括号中的key对应item的key 其值也是相对应的
let { phoneNum, code } = this.data
console.log( this.data)
if (phoneNum) {
this.setData({
disabled: false,
buttonType: 'primary'
})
} else {
this.setData({
disabled: true,
buttonType: 'default'
})
}
},
// 提交
onSubmit: function () {
console.log( 'onSubmit')
//模拟校验验证码
if( this.data.code== '123456'){
wx.showToast({
title: '验证成功',
icon: 'success'
})
} else {
wx.showToast({
title: '验证失败',
icon: 'none'
})
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})

...

微信小程序-短信验证码相关推荐

  1. 微信小程序短信验证码 php,微信小程序中短信验证码登录全流程及代码

    才开始学习小程序,用到短信验证码登录,使用榛子云短信(smsow.zhenzikj.com) 效果: 我是java开发者,后端使用了springMvc 短信验证码实现流程 1.构造手机验证码,生成一个 ...

  2. 微信小程序短信验证码登录demo

    自己记录学习使用 html <view class="wrap"><view class="tel"><input type=&q ...

  3. 小程序短信验证码登录，1分钟实现小程序发短信功能，借助云开发10行代码实现短信验证码登录小程序

    老规矩先看效果图 普通短信 验证码短信 今天被云开发官方告知,云开发支持发短信功能了,然后就迫不及待的来尝下鲜. 进入官方文档一看,云开发给咱们开发者的福利还真不小. 不仅仅可以很方便的使用短信功能, ...

  4. 微信小程序中短信验证码登录全流程及代码

    才开始学习小程序,用到短信验证码登录 免费注册账号: http://sms_developer.zhenzikj.com/zhenzisms_user/register.html 完整demo下载:  ...

  5. 微信小程序短信验证登录

    首先小程序wxml页面 <!--pages/logins/logins.wxml--> <view class="container"><view c ...

  6. 微信小程序——短链接详解

    微信小程序短链接 今天看到朋友分享的一个链接,点开后可以直接打开学校疫情防控小程序的结果,简单了解发现这是微信推出的小程序短链接功能,可以快速分享微信小程序的内容.其具体格式有如下两种: mp://( ...

  7. 微信小程序 获取 手机验证码 短信验证码 后端功能实现解析

    本文原创首发CSDN,链接 https://mp.csdn.net/console/editor/html/106041472 ,作者博客https://blog.csdn.net/qq_414641 ...

  8. Django搭建服务器，和微信小程序通信，验证码存入redis，用户信息存入mysql以及图片上传

    写在前面:整体是实现小程序的登录和注册,并接收验证码进行校验. 一.创建项目 django-admin startproject wxTest 二.注册app,进入到wxTest目录中 python ...

  9. 微信小程序之获取验证码js

    在微信小程序中怎样实现获取验证码的倒计时功能捏,倒计时的原理是一样一样的,就是某些地方需要注意. 第一步:结构 <view class='get-code' wx:if="{{!isS ...

最新文章

  1. mysql 5.0 to mysql 5.1的BTREE索引问题
  2. 数据产品经理：埋点的设计、管理与应用
  3. 澳大利亚.新西兰C#考试题
  4. RxSwift之路 1#Swift语法知识准备
  5. 【渝粤教育】国家开放大学2019年春季 3896人文英语1 参考试题
  6. The Two Routes CodeForces - 601A（水最短路）
  7. 帮管客CRM客户管理系统 v3.6.0
  8. 和我一起读Java8 LinkedList源码
  9. MySQL String Functions and Operators(字符串处理)
  10. C++多线程map读写加锁
  11. LINQ语句之Select/Distinct和Count/Sum/Min/Max/Avg
  12. Wifi 与 2G/3G
  13. 2015-2016前端知识体系（转）
  14. 读《About Face 4 交互设计精髓》4
  15. 拦截图片代码 精易web浏览器_精易Web浏览器 UChk验证源码
  16. 车载以太网交换机功能和应用案例汇总, 适用于AVB/TSN, 802.1AS(gPTP时钟同步）
  17. 怎么把wps转换成word
  18. 第一篇：微信公众平台开发实战Java版之了解微信公众平台基础知识以及资料准备...
  19. JAVA练习165-复数乘法
  20. 【计量经济学导论】12. 格兰杰因果关系检验

热门文章

  1. mockup android素材,10款 iPhone 7 mockup 演示图素材（多种配色、多种视图）
  2. ios移动端click切换验证码失败
  3. 2023小米电视55寸排行榜单 这几款55寸小米电视更值得买
  4. 数一数西安的独立博客
  5. 国外十大免费服务器和域名（如何购买海外服务器）
  6. WEB开发常用集成环境
  7. mkfifo函数 及 解决Linux下 “mkfifo: no such file or directory”
  8. python生成器 send()方法
  9. latex缩进与对齐_latex 换行缩进
  10. 云服务器子系统,Linux子系统使用云服务器