微信小程序发送验证码-微信小程序验证码功能-小程序图形验证码-即速应用

微信小程序发送验证码-微信小程序验证码功能-小程序图形验证码

浏览量：2519 时间：2020-04-06 来源：Java少年

1.
记录一下，小程序发送验证码的小案例。废话不多说，直接撸代码。。。
2.
1、效果图如下
3.
wxml:
4.
viewclass'header'
5.
inputtype'number'placeholder'请输入手机号'bindinput'mInput'/input
6.
/view
7.
viewclass'nav'
8.
viewclass'nav_left'
9.
inputtype'text'placeholder'短信验证码'bindinput'vInput'/input
10.
/view
11.
buttondisabled'{{disabled}}'class'nav_btn'bindtap'getVCode'{{time}}/button
12.
/view
13.
viewclass'footer'bindtap'bd'绑定/view
14.
js:
15.
varintervalnull//倒计时函数
16.
constappgetApp();
17.
Page({
18.
data:{
19.
time:'获取验证码',//倒计时
20.
currentTime:61,
21.
disabled:false,//可点击
22.
mobile:"",
23.
yzm:""
24.
},
25.
mInput:function(e){
26.
this.setData({
27.
mobile:e.detail.value
28.
})
29.
},
30.
vInput:function(e){
31.
this.setData({
32.
yzm:e.detail.value
33.
})
34.
},
35.
//获取验证码，倒计时
36.
getCode:function(mobile){
37.
varthatthis;
38.
varparams{
39.
sms_type:1,
40.
mobile:mobile
41.
};
42.
wx.request({
43.
url:app.globalData.u+"/send_verification_code.do",
44.
data:params,
45.
method:"get",
46.
header:{
47.
"content-type":"application/json"
48.
},
49.
dataType:"json",
50.
success:functionsuccess(res){
51.
if(res.data.result_code"0"){
52.
wx.showToast({
53.
title:'验证码发送成功'
54.
})
55.
//倒计时
56.
varcurrentTimethat.data.currentTime
57.
intervalsetInterval(function(){
58.
currentTime--;
59.
that.setData({
60.
time:currentTime+'秒'
61.
})
62.
if(currentTime0){
63.
clearInterval(interval)
64.
that.setData({
65.
time:'重新获取',
66.
currentTime:61,
67.
disabled:false
68.
})
69.
}
70.
},1000)
71.
}else{
72.
wx.showModal({
73.
title:"",
74.
content:res.data.err_msg
75.
});
76.
that.setData({
77.
time:'获取验证码',
78.
disabled:false
79.
})
80.
}
81.
},
82.
fail:functionfail(res){
83.
wx.showModal({
84.
content:res
85.
});
86.
}
87.
},
88.
getVCode(){
89.
//校验手机号
90.
letmobilethis.data.mobile
91.
varregMobile/^1[3456789]d{9}$/;
92.
if(!regMobile.test(mobile)){
93.
wx.showModal({
94.
title:'',
95.
content:'手机格式错误',
96.
})
97.
return;
98.
}
99.
this.getCode(mobile);
100.
this.setData({
101.
disabled:true
102.
})
103.
},
104.
//绑定
105.
bd:function(){
106.
letmobilethis.data.mobile
107.
letyzmthis.data.yzm
108.
//校验手机号、验证码
109.
varregMobile/^1[3456789]d{9}$/;
110.
if(!regMobile.test(mobile)){
111.
wx.showModal({
112.
title:'',
113.
content:'手机格式错误',
114.
})
115.
return;
116.
}
117.
if(yzm''){
118.
wx.showModal({
119.
title:'',
120.
content:'验证码不能为空',
121.
})
122.
return;
123.
}
124.
this.updateUserMobile(mobile,yzm);
125.
},
126.
updateUserMobile:function(mobile,verifiy_code){
127.
varparams{
128.
user_id:app.globalData.userInfo.user_id,
129.
mobile:mobile,
130.
verifiy_code:verifiy_code
131.
};
132.
//console.log(params)
133.
wx.request({
134.
url:app.globalData.u+'update_user_mobile.do',
135.
data:params,
136.
method:'post',
137.
header:{
138.
'content-type':'application/x-www-form-urlencoded'
139.
},
140.
dataType:'json',
141.
success:functionsuccess(res){
142.
console.log(res)
143.
if(res.data.result_code'0'){
144.
//wx.showToast({
145.
//title:'绑定成功',
146.
//icon:'success',
147.
//duration:1000
148.
//})
149.
setTimeout(function(){
150.
wx.redirectTo({
151.
url:'ziliao',
152.
})
153.
},1500)
154.
}else{
155.
wx.showModal({
156.
title:'',
157.
content:res.data.err_msg
158.
});
159.
}
160.
},
161.
fail:functionfail(res){
162.
wx.showModal({
163.
content:'服务器发生异常，请稍后再试'
164.
});
165.
},
166.
});
167.
}
168.
})