VUE-手机号验证码登录功能

开发思路

1.输入手机号，判断手机号格式；
2.点击获取验证码，发送请求，切换倒计时提醒，后台控制发送短信；
3.点击登录/注册，判断验证码是否输入，是否勾选接受协议，发送请求，（安全起见）手机号验证码传给后台判断；

js代码部分

// 获取验证码，先校验手机号
    GetVerifyCode() {
      if (this.loginForm.phoneNumber == '') {
        this.$message.error('手机号不能为空')
        return false
      } else if (!(/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(this.loginForm.phoneNumber))) {
        this.$message.error('手机号不正确')
        return false
      } else if (this.loginForm.phoneNumber.length != 11) {
        this.$message.error('手机号不正确')
        return false
      } else {
        //向后台发送请求
        var formData = {
          phone: this.loginForm.phoneNumber
        }
        sendBySms(formData).then(res => {
          this.isGetCode = false
          this.timer()
        }).catch(() => {
          this.$message.error('验证码获取失败')
        })
      }
    },
    // 登录注册方法，先判断填写情况
    loginBySms() {
      if (this.loginForm.textCode == '') {
        this.$message.error('请填写验证码')
        return false
      } else if (this.loginForm.textCode == '' || this.loginForm.textCode.length < 6) {
        this.$message.error('验证码不能为空并且不能小于6位')
        return false
      } else if (!this.checked) {
        this.$message.error('请阅读并勾选同意版权声明和隐私协议')
        return false
      } else {
        // 向后台发送请求
        ...
      }
    },
    // 倒计时方法
    timer() {
      var timecount = setInterval(() => {
        this.time--
        if (this.time < 1) {
          clearInterval(timecount)
          this.timeShow = false
          this.isGetCode = true
        }
      }, 1000)
    },