前端如何实现通过手机号获取验证码？

最新推荐文章于 2024-06-20 12:21:03 发布

码路老默007

最新推荐文章于 2024-06-20 12:21:03 发布

阅读量805

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/2201_75705263/article/details/132042870

版权

##题记：我们在登录时候往往需要通过手机号获取验证码，咱们下面直接上干货；

##代码：

changeCode(index) {
      console.log('12312312')
      if (index == 1) {
        if (this.loginForm.phone) {
          const phone = this.loginForm.phone
          api.phoneRepeatNew({ phone: phone })
            .then(res => {
              if (res.code == 200) {
                this.ifPhones = res.data
                if (this.ifPhones === true) {
                  const TIME_COUNT = 60
                  if ((/^1[3456789]\d{9}$/.test(this.loginForm.phone))) {
                    this.codeStyle = 'color: #DDE2EE'
                    let apiCode = ''
                    if (this.getCode === '1') {
                      apiCode = api.phoneForgetCode
                    } else {
                      apiCode = api.phoneCode
                    }
                    apiCode((this.loginForm.phone))
                      .then((res) => {
                        if (res.success) {
                          this.$notify({
                            type: 'success',
                            message: '手机验证码发送成功'
                          })
                          this.getCode === '0'
                          //使用防抖
                          if (!this.timer) {
                            this.count = TIME_COUNT
                            this.resgisterLoading = true
                            this.timer = setInterval(() => {
                              if (this.count > 0 && this.count <= TIME_COUNT) {
                                this.count--
                                this.codeText = this.count + 's 后重新发送'
                              } else {
                                this.clearPhone()
                                // this.resgisterLoading = false
                                // clearInterval(this.timer)
                                // this.timer = null
                                // // this.mobileCode = res.data
                                // this.codeStyle = 'color: #3874F6'
                                // this.codeText = '获取验证码'
                              }
                            }, 1000)
                          }
                        } else {
                          this.codeStyle = 'color: #3874F6'
                        }
                      })
                  } else {
                    this.$message.error('请输入正确的手机号码')
                    this.isDisabled = false
                  }
                } else {
                  this.$message.error('该手机号未注册')
                  this.isDisabled = false
                }
              }
            })
        } else {
          this.$message.error('请输入手机号码')
          this.isDisabled = false
        }
      } else {

      }
    },

这可是直接干活了，自己工作中直接把相应的接口对象成自己工作的接口就可以了，另外一定要点个赞！！！