目录
效果图：
一、template部分
二、style样式
三、script部分
1.先对手机号的格式进行一个判断
2.接下来就是表单验证规则rules
3.最后就是methods了
（1）首先我们给获取验证码绑定一个方法
（2）然后封装一个axios接口，方便后面测试联调（这部分每个人封装的都不一样）
（3）然后是倒计时的方法
（4）最后的登录按钮
四、完整代码
效果图：
一、template部分
这里不是重点，自行对照，并不需要与之完全相同
手 机 验 证 登 录
{{btnTxt}} 登 录 二、style样式
样式我是用less写的，编写之前需要安装less和less-loader
npm i lessnpm i less-loader值得注意的是，要注意版本，太新或者太久都可能导致无法运行
剩下的就是样式了：
.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;}}样式里有的一行代码能写完的东西用了多行，可自行修改（别问我为什么不改）
三、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)}})}四、完整代码
手 机 验 证 登 录
{{btnTxt}} 登 录 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)}})}}}.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;}}