小程序之短信验证

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

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
                    });

                }

            });
    }
})