本文实例为大家分享了微信小程序获取手机验证码的具体代码，供大家参考，具体内容如下
完成手机验证码的功能：
（1）效果图如下：
（开始发送验证码）
（重新发送验证码）
（2）需求及思路说明：
- 输入正确的11位手机号，使用正则校验。
- 校验手机号的归属地----北京移动（这个根据需求而定）
- 点击 “获取验证码” ，获取成功与失败，都会以弹框的形式展现，完成倒计时。
- 倒计时为 ‘0’ 的时候，按钮文字变成 “重新发送”
- 当按钮是 “获取验证码” 和 “重新发送” 的时候，按钮是可以点击进行倒计时的
- 在倒计时过程中，按钮是不可点击的（也就是防止在倒计时的过程中重复点击）
.wxml 文件
<block wx:if='{{show_detail_title}}'>
<view class='show_detail_centent ver_phone_con'>
<form>
<view class='show_detail_centent_title ver_title' >验证</view>
<view class='error_tip}}' style="{{error_tip == true?'visibility:visible':'visibility: hidden'}}">{{error_tip_txt}}</view>
<view class='phone_verification'>
<view class='ver_item'>
<input type='text' class='phone_number' value="{{telNumber}}" bindinput="input_phone" placeholder-style='color:#cdcdcd' placeholder='请获取手机号'/>
<button type="primary" formType="submit" class='get_phone_number' open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">获取手机号</button>
</view>
<view class='last_phone_number ver_item'>
<input type='number' class='phone_number' bindinput="input_code" value='{{phone_code}}' placeholder-style='color:#cdcdcd' placeholder='验证码'/>
<button type="primary" formType="submit" class='get_phone_number' bindtap="getPhoneCode" disabled='{{code_show}}'>{{login_VerifyCode}}</button>
</view>
<button type="primary" formType="submit" class='finish_btn' disabled = '{{finish_show}}' bindtap="submit_finish" >完成</button>
<view class='phone_tip'>注：办理******需验证手机号码</view>
</view>
</form>
</view>
</block>.js文件
data:{
login_VerifyCode: '获取验证码',
telNumber: '', // 用户手机号
phone_code: '', // 手机验证码
error_tip: false, // 获取手机号、验证码的错误提示
error_tip_txt: '', // 错误信息提示内容
code_show: false, // 重复点击 获取验证码
},
// 获取手机验证码
getPhoneCode: function() {
if (this.data.login_VerifyCode == '获取验证码' || this.data.login_VerifyCode == '重新发送'){
let telNumber = this.data.telNumber;
console.log('获取验证码', telNumber.length);
console.log(util.regNumber(telNumber));
if (telNumber == '') {
this.setData({
error_tip: true,
error_tip_txt: '请输入手机号码'
})
} else if (telNumber.length != 11) {
this.setData({
error_tip: true,
error_tip_txt: '请输入正确的手机号码'
})
} else {
//验证是否是北京移动的手机号码
var url = '/v1/broadband/isBJMobiel.do';
var params = {
session: wx.getStorageSync('session'),
phone: telNumber
}
httpUtil.postData(url, params, '', (res) => {
console.log('判断手机号码的', res);
if (res.module == "N") {
this.setData({
error_tip: true,
error_tip_txt: '此手机号非北京移动用户',
code_show: true
})
} else {
var url = '/v1/bdbrokerRenewal/authSendMsg.do';
var params = {
session: wx.getStorageSync('session'),
phone: telNumber
};
httpUtil.postData(url, params, '', (res) => {
console.log(res);
if (res.success) {
wx.showToast({
title: '短信验证码发送成功，请注意查收',
icon: 'success',
duration: 2000
})
var total_micro_second = 60;
// 验证码倒计时
this.count_down(total_micro_second);
} else {
that.setData({
login_tip: "验证码发送失败，请稍候重试"
});
}
});
}
});
}
}
},
// 倒计时 验证码
count_down: function(total_micro_second) { //发送验证码按钮
var that = this;
if (total_micro_second <= 0) {
that.setData({
login_VerifyCode: "重新发送"
});
// timeout则跳出递归
return false;
} else {
// 渲染倒计时时钟
that.setData({
login_VerifyCode: total_micro_second + "s"
});
total_micro_second--;
if (that.data.login_timer == true) {
setTimeout(function() {
that.count_down(total_micro_second);
}, 1000)
} else {
that.setData({
login_VerifyCode: "获取验证码"
});
}
}
},
// 输入框失去焦点 手机号
input_phone: function(e) {
console.log('手机号码', e);
this.setData({
telNumber: e.detail.value,
error_tip_txt: ''
})
this.color_finish();
},
// 输入框输入 验证码
input_code: function(e) {
console.log('验证码值', e);
this.setData({
phone_code: e.detail.value
})
this.color_finish();
},
// 完成 提交按钮颜色变化
color_finish: function() {
if (telNumber_status(this.data.telNumber) && code_status(this.data.phone_code)) {
this.setData({
finish_show: false
})
} else {
this.setData({
finish_show: true
})
}
},
// 判断全国号段
const regNumber = mobile => {
var move = /^((134)|(135)|(136)|(137)|(138)|(139)|(147)|(150)|(151)|(152)|(157)|(158)|(159)|(178)|(182)|(183)|(184)|(187)|(188)|(198))\d{8}$/g; //移动
var link = /^((130)|(131)|(132)|(155)|(156)|(145)|(185)|(186)|(176)|(175)|(170)|(171)|(166))\d{8}$/g; //联通
var telecom = /^((133)|(153)|(173)|(177)|(180)|(181)|(189)|(199))\d{8}$/g; //电信
if (move.test(mobile)) {
return true;
} else if (link.test(mobile)) {
return true;
} else if (telecom.test(mobile)) {
return true;
} else {
return false;
}
}以上根据思路说明，把条理梳理清晰，也就能顺利完成。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。
