在我目前做过的大部分项目中，都有获取验证码、提交表单这样的需求，像下面这样。

WechatIMG10.jpeg

我把这个页面中的需求拆成两个部分来做，一个是获取验证码，另一个就是最后“确认”按钮的提交。

获取验证码可以简单的分成以下几步：
1，获取手机号
2，验证手机号
3，发送请求
4，请求成功后，倒计时60秒，按钮不可按，发送失败则提示
5，倒计时60秒结束，点击获取验证码按钮，重新获取

表单提交可以简单的分成以下几步：
1，获取每个输入框中的内容
2，验证每个输入框中数据的格式
3，发送请求
4，发送成功后，做相应的操作，发送失败则提示

下面的代码每个步骤都有注释，可以直接通过注释来清楚每一行代码的作用。

<template>
    <div class="create-wrap">
        <form action="">
            <ul>
                <li>
                    <label for="className" class="w20 triangle2">班级：</label>
                    <select name="className" required class="def-input class-select w71"
                            v-model="class_id">
                        <option v-for="option in classInfo"
                                :value="option.class_id"
                        >{{ option.className }}
                        </option>
                    </select>
                </li>
                <li>
                    <label for="sportName" class="w20 triangle2">运动项目：</label>
                    <select name="sportName" class="def-input class-select w71"
                            v-model="event_id">
                        <option v-for="sport in sports"
                                :value="sport.event_id">{{ sport.sportName }}
                        </option>
                    </select>
                </li>
                <li>
                    <label for="memberName" class="w20">姓名：</label>
                    <input type="text" name="memberName" v-validate="'required|min:2|max:4'" :class="{'input': true, 'is-danger': errors.has('memberName') }" class="def-input w71" v-model="memberName"
                           placeholder="请填写您的姓名">
                    <p class="w71 text-right">
                        <i v-show="errors.has('memberName')" class="fa fa-warning"></i>
                        <span v-show="errors.has('memberName')" class="help is-danger">请填写您真实的姓名，在两到四个字符之间</span>
                    </p>
                </li>
                <li>
                    <label for="mobile" class="w20">手机号：</label>
                    <input type="text" name="mobile" v-validate="'required|numeric|min:11|max:11'" :class="{'input': true, 'is-danger': errors.has('mobile') }" class="def-input w71" v-model="mobile"
                           placeholder="请填写您的手机号码">
                    <p class="w71 text-right">
                        <i v-show="errors.has('mobile')" class="fa fa-warning"></i>
                        <span v-show="errors.has('mobile')" class="help is-danger">请填写您的手机号码</span>
                    </p>
                </li>
                <li class="get-code">
                    <label for="smsCode" class="w20">验证码：</label>
                    <input type="text" name="smsCode" v-validate="'required|numeric|min:4|max:4'" :class="{'input': true, 'is-danger': errors.has('smsCode') }"  class="def-input w44" v-model="smsCode"
                           placeholder="请输入验证码">
                    <button type="button" class="code-btn w25 bg-gold white"
                            v-bind:class="{'gray-btn':!isAllowSendSms}"
                            :disabled="!isAllowSendSms"
                            @click="sendSmsCode">{{ sendSmsBtnText }}
                    </button>
                    <p class="w71 text-right">
                        <i v-show="errors.has('smsCode')" class="fa fa-warning"></i>
                        <span v-show="errors.has('smsCode')" class="help is-danger">请输入4位数的验证码</span>
                    </p>
                </li>
            </ul>
            <button type="button" class="mt-90 mb-130 bg-gold white detail-btn"
                    v-bind:class="{'gray-btn':!isSubmitData}"
                    :disabled="!isSubmitData"
                    @click="submitData">确认
            </button>
        </form>
    </div>
</template>
<script>
    import {MessageBox} from 'mint-ui';
    export default{
        name: 'join',
        data(){
            return {
                memberName: '', // 姓名
                mobile: '',
                smsCode: '',
                class_id: -1,  // 选择的班级
                event_id: -1,  // 选择的运动项目
                isAllowSendSms: true,
                isSubmitData: true,
                sendSmsBtnText: '获取验证码',
                classInfo: [
                    {class_id: -1, className: '选择班级'},
                    {class_id: 0, className: '黑马营一期'},
                    {class_id: 1, className: '黑马营二期'},
                    {class_id: 2, className: '黑马营三期'},
                    {class_id: 3, className: '黑马营四期'},
                    {class_id: 4, className: '黑马营五期'},
                    {class_id: 5, className: '黑马营六期'},
                    {class_id: 6, className: '黑马营七期'},
                    {class_id: 7, className: '黑马营八期'},
                    {class_id: 8, className: '黑马营九期一班'},
                    {class_id: 9, className: '黑马营九期二班'},
                    {class_id: 10, className: '黑马营十期一班'},
                    {class_id: 11, className: '黑马营十期二班'},
                    {class_id: 12, className: '黑马营十一期一班'},
                    {class_id: 13, className: '黑马营十一期二班'},
                    {class_id: 14, className: '黑马营十二期一班'},
                    {class_id: 15, className: '黑马营十二期二班'},
                    {class_id: 16, className: '黑马营十二期三班'},
                    {class_id: 17, className: '黑马营十三期一班'},
                    {class_id: 18, className: '黑马营十三期二班'},
                    {class_id: 19, className: '黑马营十四期一班'},
                    {class_id: 20, className: '黑马营十四期二班'},
                    {class_id: 21, className: '黑马连营一期一班'},
                    {class_id: 22, className: '黑马连营一期二班'},
                    {class_id: 23, className: '黑马连营二期'},
                    {class_id: 24, className: '黑马连营三期'},
                    {class_id: 25, className: '黑马连营四期'},
                    {class_id: 26, className: '国际游学'},
                    {class_id: 27, className: '黑马投资学院'},
                    {class_id: 28, className: '创业实验室'}

                ],
                sports: [
                    {event_id: -1, sportName: '请选择运动项目'},
                    {event_id: 0, sportName: '马拉松'},
                    {event_id: 1, sportName: '4*100米'},
                    {event_id: 2, sportName: '平板支撑'}
                ]
            }
        },
        methods: {
            // 发送验证码请求
            sendSmsCode(){
                var vm = this;
                // 获取手机号码
                let data = {
                    mobile: this.mobile
                };

                // 判断手机号或验证码是否为空
                const reMobile = /\d{11}/;
                const empty = /\s+/g;
                function trim(str) {
                    return str.replace(empty, "");
                }
                if (trim(data.mobile) === "" || !reMobile.test(data.mobile)) {
                    MessageBox('提示', '请输入正确的手机号码!');
                    return false;
                }
                
                // 拼接请求验证码的地址，根据当前的环境来拼接开发或正式环境的请求地址
                let hostName = 'https://wx.chuangyejia.com/',
                    pathName = 'newapi/sms/send-vcode?mobile=' + this.mobile + '&app=sport&business_type=report',
                    sendCodeUrl = process.env.NODE_ENV === 'development' ? hostName + 'dev/' + pathName : hostName + pathName;

                // 发送get请求，获取验证码
                this.$http.get(sendCodeUrl)
                    .then(({data:{code, content, jssdk, msg}}) => {
                        if (code === 0) {
                            // 发送成功后，倒计时60秒
                            let seconds = 60,
                                unit = '秒';
                            this.sendSmsBtnText = seconds + unit;
                            // 发送成功后，获取验证码按钮不可点击
                            this.isAllowSendSms = false;
                            // 在倒计时之前请清除定时器
                            clearInterval(si);
                            // 循环设置倒计时时间，每隔1秒钟数字减1。
                            var si = setInterval(function () {
                                let msg = '';
                                seconds--;

                                if (seconds) {
                                    // 如果秒数大于0，将获取验证码按钮的文字变成当前的秒数
                                    msg = seconds + unit;
                                } else {
                                    // 当秒数减到等于0，将获取验证码按钮的文字变成重新发送
                                    msg = '重新发送';
                                    vm.isAllowSendSms = true;
                                    clearInterval(si);
                                }
                                // 修改显示倒计时的秒数
                                vm.sendSmsBtnText = msg;
                            }, 1000);
                        } else {
                            MessageBox('提示', msg);
                        }
                    }, ({data:{msg}}) => {
                        MessageBox('提示', msg);
                    });
            },

            //  获取到了验证码，开始提交报名结果
            submitData: function (event) {
                // 通过this.$route.params获取参数。
                let group_id = this.$route.params.id;
                // 准备用户填定的内容
                let data = {
                    group_id: group_id,
                    mobile: this.mobile,
                    code: this.smsCode,
                    class_id: this.class_id,
                    name: this.memberName,
                    event_id: this.event_id
                };
                const checkUrl = 'member/sign';
                const reMobile = /\d{11}/;
                const reCode = /\d{4}/;
                const reMemberName = /^.{2,4}$/;
                const empty = /\s+/g;
                let queryData = {};

                // 判断手机号或验证码是否为空
                function trim(str) {
                    return str.replace(empty, "");
                }
                // 验证数据
                if (data.event_id === -1 || data.class_id === -1) {
                    MessageBox('提示', '请选择班级或运动项目');
                    return false;
                }
                // 验证数据
                if (trim(data.name) == "" || !reMemberName.test(data.name)) {
                    MessageBox('姓名', '请输入您的真实姓名!');
                    return false;
                }
                // 验证数据
                if (trim(data.mobile) == "" || !reMobile.test(data.mobile)) {
                    MessageBox('手机号', '请输入正确的手机号码！');
                    return false;
                }
                // 验证数据
                if (trim(data.code) == "" || !reCode.test(data.code)) {
                    MessageBox('验证码', '请输入您获取到的验证码！');
                    return false;
                }
                // 发送请求
                this.$http.post(checkUrl, data)
                    .then(({data:{code, content, jssdk, msg}}) => {
                        if (code === 0) {
                            // 发送成功
                            queryData.status = "success";
                            // 跳转页面
                            this.$router.push({path: '/detail/' + group_id, query: queryData});
                        } else {
                            MessageBox('提示', msg);
                        }
                    }, ({data:{msg}}) => {
                        MessageBox('提示', msg);
                    });
            }
        }
    }
</script>