【手机号验证/前端】Vue2+elementUI编写一个手机号验证码登录页面，路由式开发（附完整代码）

目录

效果图：

一、template部分

二、style样式

三、script部分

1.先对手机号的格式进行一个判断

2.接下来就是表单验证规则rules

3.最后就是methods了

（1）首先我们给获取验证码绑定一个方法

（2）然后封装一个axios接口，方便后面测试联调（这部分每个人封装的都不一样）

（3）然后是倒计时的方法

（4）最后的登录按钮

四、完整代码

---

效果图：

一、template部分

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

    
      
 手 机 验 证 登 录 

      
          
              
          
      

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

触发方式

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

四、完整代码

 若有不足或错误之处，欢迎指点