目录
效果图：
一、template部分
二、style样式
三、script部分
1.先对手机号的格式进行一个判断
2.接下来就是表单验证规则rules
3.最后就是methods了
（1）首先我们给获取验证码绑定一个方法
（2）然后封装一个axios接口，方便后面测试联调（这部分每个人封装的都不一样）
（3）然后是倒计时的方法
（4）最后的登录按钮
四、完整代码
效果图：
一、template部分
这里不是重点，自行对照，并不需要与之完全相同
ref="form" label-width="70px" :inline="true" class="login-container" :model="form" :rules="rules" > 手 机 验 证 登 录
label="手机号" prop="CellPhone" ref="phone" > label="验证码" prop="VerificationCode" > {{btnTxt}}
二、style样式
样式我是用less写的，编写之前需要安装less和less-loader
npm i less
npm i less-loader
值得注意的是，要注意版本，太新或者太久都可能导致无法运行
剩下的就是样式了：
样式里有的一行代码能写完的东西用了多行，可自行修改（别问我为什么不改）
三、script部分
1.先对手机号的格式进行一个判断
const validatePhone = (rule, value, callback) => {
// console.log(rule)
// console.log(value)
// console.log(callback)
// 判断输入框中是否输入手机号
if (!value) {
callback(new Error('手机号不能为空'))
}
//正则表达式进行验证手机号，从1开始，第二位是35789中的任意一位，以9数字结尾
if (!/^1[35789]\d{9}$/.test(value)) {
callback(new Error('手机号格式不正确'))
}
callback()
}
2.接下来就是表单验证规则rules
rules: {
CellPhone: [
{ required: true, trigger: 'blur', message: '请输入11位手机号'},
{ required: true, trigger: 'blur', min: 11, max: 11, message: '长度不符合'},
{ required: true, trigger: 'blur', validator: validatePhone}
],
VerificationCode: [
{ required: true, trigger: 'blur', message: '请输入4位验证码'},
{ required: true, trigger: 'blur', min: 6, max: 6,message: '验证码错误'}
],
}
required是否必填，如不设置，则会根据校验规则自动生成boolean—false
trigger触发方式Stringclick/focus/hover/manualclick
blur在 Input 失去焦点时触发(event: Event)
validate对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promiseFunction(callback: Function(boolean, object))
3.最后就是methods了
（1）首先我们给获取验证码绑定一个方法
//获取手机验证码方法
getCode() {
// 校验手机号码
if (!this.form.CellPhone) {
//号码校验不通过
this.$message({
message: '请输入手机号',
type:'warning',
});
//正则判断 从1开始，第二位是35789中的任意一位，以9数字结尾
} else if (!/1[35789]\d{9}/.test(this.form.CellPhone)) {
// 失去焦点后自动触发校验手机号规则
} else {
this.time = 60;
this.disabled = true;
//调用倒计时方法
this.timer();
}
}
（2）然后封装一个axios接口，方便后面测试联调（这部分每个人封装的都不一样）
GetPhone({
CellPhone: this.form.CellPhone,
}) .then(({data}) => {
if (data.code === 200) {
this.$message({
message: '验证成功',
type: 'success',
})
} else {
this.$message({
message: '发送失败',
type: 'warning',
})
}
})
（3）然后是倒计时的方法
timer() {
if (this.time > 0) {
this.time--;
// console.log(this.time);
this.btnTxt = this.time + "s后重新获取验证码";
setTimeout(this.timer, 1000);
} else {
this.time = 0;
this.btnTxt = "获取验证码";
this.disabled = false;
}
},
（4）最后的登录按钮
submit() {
this.getCode(({data}) => {
if (data.code === 200) {
this.$router.push('/')
} else {
this.$message.error(data.data.rules.message)
}
})
}
四、完整代码
ref="form" label-width="70px" :inline="true" class="login-container" :model="form" :rules="rules" > 手 机 验 证 登 录
label="手机号" prop="CellPhone" ref="phone" > label="验证码" prop="VerificationCode" > {{btnTxt}}
若有不足或错误之处，欢迎指点
推荐阅读
您阅读本篇文章共花了：
发表评论