小程序之短信验证

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

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 = /^1d{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
                    });

                }

            });
    }
})