目录
效果图：
一、template部分
二、style样式
三、script部分
1.先对手机号的格式进行一个判断
2.接下来就是表单验证规则rules
3.最后就是methods了
（1）首先我们给获取验证码绑定一个方法
（2）然后封装一个axios接口，方便后面测试联调（这部分每个人封装的都不一样）
（3）然后是倒计时的方法
（4）最后的登录按钮
四、完整代码
效果图：
一、template部分
这里不是重点，自行对照，并不需要与之完全相同
<div>
<el-form
ref="form"
label-width="70px"
:inline="true"
class="login-container"
:model="form"
:rules="rules"
>
<h3 class="login_title"> 手 机 验 证 登 录 </h3>
<el-form-item
label="手机号"
prop="CellPhone"
ref="phone"
>
<el-input v-model="form.CellPhone" placeholder="请输入手机号">
<el-select placeholder="+86"></el-select>
</el-input>
</el-form-item>
<el-form-item
label="验证码"
prop="VerificationCode"
>
<el-input v-model="form.VerificationCode" placeholder="请输入验证码">
<el-button slot="suffix" :disabled="disabled" @click="getCode">
<span class="Time">{{btnTxt}}</span>
</el-button>
</el-input>
</el-form-item>
<el-form-item>
<el-button @click="submit" class="login_button" type="primary"> 登 录 </el-button>
</el-form-item>
</el-form>
</div>二、style样式
样式我是用less写的，编写之前需要安装less和less-loader
npm i less
npm i less-loader
值得注意的是，要注意版本，太新或者太久都可能导致无法运行
剩下的就是样式了：文章来源：https://www.toymoban.com/news/detail-584074.html
<style lang="less" scoped>
.login-container {
width: 450px;
border:1px solid #eaeaea;
margin: 180px auto;
padding: 35px 35px 15px 35px;
border-radius: 15px;
box-shadow: 0 0 25px #cac6c6;
background-color: #ffffff;
box-sizing: border-box;
//修改element的样式的方法有多种，/deep/只是其中一种
/deep/ .el-input__inner {
width: 120%;
border: 0px;
border-bottom: 1px solid;
}
.el-button {
border: 0px;
margin: -80px;
.span {
margin-left: 50px;
}
}
.login_title {
text-align: center;
margin-bottom: 40px;
color: #505458;
}
.el-input {
width: 198px;
}
.login_button {
margin-left: 105px;
margin-top: 10px;
}
.time {
width: 50px;
}
}
</style>样式里有的一行代码能写完的东西用了多行，可自行修改（别问我为什么不改）文章来源地址https://www.toymoban.com/news/detail-584074.html
三、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 | 触发方式 | String | click/focus/hover/manual | click |
| blur | 在 Input 失去焦点时触发 | (event: Event) |
| validate | 对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise | Function(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)
}
})
}四、完整代码
<template>
<div>
<el-form
ref="form"
label-width="70px"
:inline="true"
class="login-container"
:model="form"
:rules="rules"
>
<h3 class="login_title"> 手 机 验 证 登 录 </h3>
<el-form-item
label="手机号"
prop="CellPhone"
ref="phone"
>
<el-input v-model="form.CellPhone" placeholder="请输入手机号">
<el-select placeholder="+86"></el-select>
</el-input>
</el-form-item>
<el-form-item
label="验证码"
prop="VerificationCode"
>
<el-input v-model="form.VerificationCode" placeholder="请输入验证码">
<el-button slot="suffix" :disabled="disabled" @click="getCode">
<span class="Time">{{btnTxt}}</span>
</el-button>
</el-input>
</el-form-item>
<el-form-item>
<el-button @click="submit" class="login_button" type="primary"> 登 录 </el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import {GetPhone} from "@/Api/api";
export default {
name: "AppPhone",
data() {
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()
}
return {
btnTxt: "获取验证码",
// 是否禁用 即点击之后一段时间内无法再点击
disabled: false,
time: 0,
form: {
CellPhone: '',
VerificationCode: '',
},
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: '验证码错误'}
],
}
}
},
methods: {
//获取手机验证码方法
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();
// 封装的axios接口
GetPhone({
CellPhone: this.form.CellPhone,
}) .then(({data}) => {
if (data.code === 200) {
this.$message({
message: '验证成功',
type: 'success',
})
} else {
this.$message({
message: '发送失败',
type: 'warning',
})
}
})
}
},
// 倒计时方法
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;
}
},
// 提交按钮
submit() {
this.getCode(({data}) => {
if (data.code === 200) {
this.$router.push('/')
} else {
this.$message.error(data.data.rules.message)
}
})
}
}
}
</script>
<style lang="less" scoped>
.login-container {
width: 450px;
border:1px solid #eaeaea;
margin: 180px auto;
padding: 35px 35px 15px 35px;
border-radius: 15px;
box-shadow: 0 0 25px #cac6c6;
background-color: #ffffff;
box-sizing: border-box;
/deep/ .el-input__inner {
width: 120%;
border: 0px;
border-bottom: 1px solid;
}
.el-button {
border: 0px;
margin: -80px;
.span {
margin-left: 50px;
}
}
.login_title {
text-align: center;
margin-bottom: 40px;
color: #505458;
}
.el-input {
width: 198px;
}
.login_button {
margin-left: 105px;
margin-top: 10px;
}
.time {
width: 50px;
}
}
</style>若有不足或错误之处，欢迎指点
到了这里，关于【手机号验证/前端】Vue2+elementUI编写一个手机号验证码登录页面，路由式开发（附完整代码）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
