记录一下，小程序发送验证码的小案例。废话不多说，直接撸代码。。。
1、效果图如下
wxml:
<view class='header'>
<input type='number' placeholder='请输入手机号' bindinput='mInput'></input>
</view>
<view class='nav'>
<view class='nav_left'>
<input type='text' placeholder='短信验证码' bindinput='vInput'></input>
</view>
<button disabled='{{disabled}}' class='nav_btn' bindtap='getVCode'>{{time}}</button>
</view>
<view class='footer' bindtap='bd'>绑定</view>
js:
var interval = null //倒计时函数
const app = getApp();
Page({
data: {
time: '获取验证码', //倒计时
currentTime: 61,
disabled: false, //可点击
mobile: "",
yzm: ""
},
mInput: function(e) {
this.setData({
mobile: e.detail.value
})
},
vInput:function(e){
this.setData({
yzm: e.detail.value
})
},
//获取验证码，倒计时
getCode: function(mobile) {
var that = this;
var params = {
sms_type: 1,
mobile: mobile
};
wx.request({
url: app.globalData.u + "/send_verification_code.do",
data: params,
method: "get",
header: {
"content-type": "application/json"
},
dataType: "json",
success: function success(res) {
if (res.data.result_code == "0") {
wx.showToast({
title: '验证码发送成功'
})
//倒计时
var currentTime = that.data.currentTime
interval = setInterval(function() {
currentTime--;
that.setData({
time: currentTime + ' 秒'
})
if (currentTime <= 0) {
clearInterval(interval)
that.setData({
time: '重新获取',
currentTime: 61,
disabled: false
})
}
}, 1000)
} else {
wx.showModal({
title: "",
content: res.data.err_msg
});
that.setData({
time:'获取验证码',
disabled:false
})
}
},
fail: function fail(res) {
wx.showModal({
content: res
});
}
},
getVCode() {
//校验手机号
let mobile = this.data.mobile
var regMobile = /^1[3456789]\d{9}$/;
if (!regMobile.test(mobile)) {
wx.showModal({
title: '',
content: '手机格式错误',
})
return;
}
this.getCode(mobile);
this.setData({
disabled: true
})
},
//绑定
bd: function() {
let mobile = this.data.mobile
let yzm = this.data.yzm
//校验手机号、验证码
var regMobile = /^1[3456789]\d{9}$/;
if (!regMobile.test(mobile)) {
wx.showModal({
title: '',
content: '手机格式错误',
})
return;
}
if (yzm == '') {
wx.showModal({
title: '',
content: '验证码不能为空',
})
return;
}
this.updateUserMobile(mobile,yzm);
},
updateUserMobile: function (mobile, verifiy_code) {
var params = {
user_id: app.globalData.userInfo.user_id,
mobile: mobile,
verifiy_code: verifiy_code
};
// console.log(params)
wx.request({
url: app.globalData.u + 'update_user_mobile.do',
data: params,
method: 'post',
header: {
'content-type': 'application/x-www-form-urlencoded'
},
dataType: 'json',
success: function success(res) {
console.log(res)
if (res.data.result_code == '0') {
// wx.showToast({
// title: '绑定成功',
// icon: 'success',
// duration: 1000
// })
setTimeout(function(){
wx.redirectTo({
url: 'ziliao',
})
},1500)
} else {
wx.showModal({
title: '',
content: res.data.err_msg
});
}
},
fail: function fail(res) {
wx.showModal({
content: '服务器发生异常，请稍后再试'
});
},
});
}
})
