效果图：

一、template部分

这里不是重点，自行对照，并不需要与之完全相同

<div><el-formref="form"label-width="70px":inline="true"class="login-container":model="form":rules="rules"><h3 class="login_title"> 手 机 验 证 登 录 </h3><el-form-itemlabel="手机号"prop="CellPhone"ref="phone"><el-input v-model="form.CellPhone" placeholder="请输入手机号"><el-select placeholder="+86"></el-select></el-input></el-form-item><el-form-itemlabel="验证码"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

值得注意的是，要注意版本，太新或者太久都可能导致无法运行

剩下的就是样式了：

<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>

样式里有的一行代码能写完的东西用了多行，可自行修改（别问我为什么不改）

三、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-formref="form"label-width="70px":inline="true"class="login-container":model="form":rules="rules"><h3 class="login_title"> 手 机 验 证 登 录 </h3><el-form-itemlabel="手机号"prop="CellPhone"ref="phone"><el-input v-model="form.CellPhone" placeholder="请输入手机号"><el-select placeholder="+86"></el-select></el-input></el-form-item><el-form-itemlabel="验证码"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>