极乐门资源网 Design By www.ioogu.com
微信小程序验证码获取方式,代码如下所示:
<!-- 绑定手机号 --> <view class='content'> <form bindsubmit="formSubmit"> <view class='phone-box'> <text class='phone'>手机号</text> <input name="phone" type='number' placeholder="请输入手机号" maxlength='11' name="phone" class='number' bindinput='lovePhone' /> </view> <view class='phone-box'> <text class='phone'>验证码</text> <input name="phoneCode" placeholder="请输入验证码" class='number' placeholder-style='color:#bbb' bindinput="yanLoveInput" /> <view bindtap='yanLoveBtn' class='getNum'>{{getText2}}</view> </view> <button formType="submit" class='submit'>绑定</button> </form> </view> .content { width: 100%; height: auto; padding: 0 50rpx; box-sizing: border-box; } .phone-box { width: 100%; height: 89rpx; border-bottom: 1rpx solid #efefef; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; } .phone { color: #333; margin-right: 60rpx; font-size: 28rpx; } .number { color: #333; font-size: 28rpx; width: 200rpx; } .getNum { width:210rpx; height:48rpx; background:rgba(248, 112, 57, 1); border-radius:8rpx; font-size:28rpx; font-family:PingFang-SC-Medium; color:rgba(255, 255, 255, 1); line-height:48rpx; margin-right:36rpx; text-align:center; } .submit { width: 480rpx; height: 80rpx; background: rgba(248, 112, 57, 1); border-radius: 8rpx; margin-top: 80rpx; color: #fff; font-size: 32rpx; } const app = getApp(); Page({ data: { // 验证手机号 loginPhone: false, loginPwd: false, loveChange: true, hongyzphone: '', // 验证码是否正确 zhengLove: true, huoLove: '', getText2: '获取验证码', }, // 手机验证 lovePhone: function (e) { let phone = e.detail.value; this.setData({ hongyzphone: phone }) if (!(/^1[34578]\d{9}$/.test(phone))) { this.setData({ lovePhone: false }) console.log(phone.length) if (phone.length >= 11) { wx.showToast({ title: '手机号有误', icon: 'none', duration: 1000 }) } } else { this.setData({ lovePhone: true }) } }, // 验证码输入 yanLoveInput: function (e) { let that = this; let yanLove = e.detail.value; let huoLove = this.data.huoLove; that.setData({ yanLove: yanLove, zhengLove: false, }) if (yanLove.length >= 4) { if (yanLove == huoLove) { that.setData({ zhengLove: true, }) } else { that.setData({ zhengLove: false, }) wx.showModal({ content: '输入验证码有误', showCancel: false, success: function (res) { } }) } } }, // 验证码按钮 yanLoveBtn: function () { let loveChange = this.data.loveChange; console.log(loveChange) let lovePhone = this.data.lovePhone; console.log(lovePhone) let phone = this.data.hongyzphone; console.log(phone) let n = 59; let that = this; if (!lovePhone) { wx.showToast({ title: '手机号有误', icon: 'success', duration: 1000 }) } else { if (loveChange) { this.setData({ loveChange: false }) let lovetime = setInterval(function () { let str = '(' + n + ')' + '重新获取' that.setData({ getText2: str }) if (n <= 0) { that.setData({ loveChange: true, getText2: '重新获取' }) clearInterval(lovetime); } n--; }, 1000); //获取验证码接口写在这里 //例子 并非真实接口 app.agriknow.sendMsg(phone).then(res => { console.log('请求获取验证码.res =>', res) }).catch(err => { console.log(err) }) } } }, //form表单提交 formSubmit(e){ let val = e.detail.value console.log('val', val) var phone = val.phone //电话 var phoneCode = val.phoneCode //验证码 }, })
总结
以上所述是小编给大家介绍的微信小程序绑定手机号获取验证码功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
极乐门资源网 Design By www.ioogu.com
极乐门资源网
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
极乐门资源网 Design By www.ioogu.com
暂无微信小程序绑定手机号获取验证码功能的评论...
更新日志
2024年12月25日
2024年12月25日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]