微信小程序发送验证码

记录一下，小程序发送验证码的小案例。废话不多说，直接撸代码。。。

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: '服务器发生异常，请稍后再试'

});

},

});

}

})