在我目前做过的大部分项目中，都有获取验证码、提交表单这样的需求，像下面这样。
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>
网友评论