• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

小程序之短信验证

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

在此描述一下前端实现效果的思路:当用户输入完手机号,点击发送验证码时候,要判断现在能否点击(能点击:用户手机号正确且不在发送验证码过程中;不能点击:用户输入的手机号不对或者已经在发送验证码过程中),然后做相应的处理。

wxml代码:
<form bindsubmit=\'formsubmit\'> <view class=\'people_info_box\'> <view class=\'people_info_item\'> <view class=\'people_info_box_name\'> <view>姓名</view> </view> <view class=\'people_info_box_cont\'> <input type=\'text\' value=\'哈喽\'></input> </view> </view> <view class=\'people_info_item\'> <view class=\'people_info_box_name\'> <view>手机号</view> </view> <view class=\'people_info_box_cont\'> <input type=\'number\' placeholder=\'输入手机号\' maxlength=\'11\' bindinput=\'input_val\'></input> </view> </view> <view class=\'people_info_item\'> <view class=\'people_info_box_name\'> <view>验证码</view> </view> <view class=\'people_info_box_contsinge\'> <input type=\'text\' value=\'\' placeholder=\'输入验证码\' class=\'single\'></input> </view> <view class=\'people_info_box_code\'> <text bindtap=\'check\'>{{show_get_code}}</text> </view> </view> </view> <button class=\'wc_btn\' name="wc_btn" form-type=\'submit\'>提交</button> </form>
Page({
    data: {
        login_member: \'\',         //输入的手机号
        login_code: null,         //传过来的验证码
        input_login_code: \'\',     //用户输入的验证码
        get_code_status: true,    //是否能点击获取验证码的状态判断
        show_get_code: \'获取验证码\',
        get_code_time: 60
    },
    onLoad: function (options) {

    },
    input_val:function(e){
        var userphone = e.detail.value;
        this.setData({
            login_member: userphone
        })
    },
    check: function () {
        if (!this.data.get_code_status) {
            wx.showToast({
                title: \'正在获取\',
                icon: \'loading\',
                duration: 1000
            })
            return;
        } else {
            if (this.data.login_member.length == 11) {
                var myreg = /^1\d{10}$/;
                if (!myreg.test(this.data.login_member)) {
                    wx.showToast({
                        title: \'请输入正确的手机号\',
                        icon: \'loading\',
                        duration: 1000
                    });
                    return;
                } else {
                    this.get_code();
                }
            } else {
                wx.showToast({
                    title: \'请输入完整手机号\',
                    icon: \'loading\',
                    duration: 1000
                })
                return;
            }
        }
    },
    get_code: function () {
        var that = this;
        wx.request({
                url:\'\',
                data: {

                    mobile: that.data.login_member

                },
                success: function (res) {

                    if (res.data.status == 1) {


                        var timer = setInterval(function () {

                            if (that.data.get_code_time > 0) {


                                // console.log(that.data.get_code_time);

                                that.setData({

                                    get_code_time: that.data.get_code_time - 1,
                                    show_get_code: \'剩余\' + (that.data.get_code_time - 1) + \'秒\',
                                    get_code_status: false

                                });

                            } else {

                                clearInterval(timer);

                                that.setData({

                                    get_code_time: 60,
                                    show_get_code: \'获取验证码\',
                                    get_code_status: true

                                });

                            }

                        }, 1000);


                        that.setData({

                            login_code: res.data.data.code       //后台返回的验证码,可以做判断用
                        });


                    } else {

                        wx.showToast({
                            title: res.data.message,
                            icon: \'loading\',
                            duration: 1000
                        });
                    }
                },
                fail: function (res) {

                    wx.showToast({
                        title: \'请求失败\',
                        icon: \'loading\',
                        duration: 1000
                    });

                }

            });
    }
})

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
超六成微信小程序用户选择回归APP发布时间:2022-07-18
下一篇:
小程序短信验证码登录的实现与优化发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap