小程序之短信驗證

在此描述一下前端實現效果的思路：當用戶輸入完手機號，點擊發送驗證碼時候，要判斷現在能否點擊（能點擊：用戶手機號正確且不在發送驗證碼過程中；不能點擊：用戶輸入的手機號不對或者已經在發送驗證碼過程中），然后做相應的處理。

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

                }

            });
    }
})