当前位置：首页 > VUE

vue怎么实现手机验证

2026-02-22 16:19:32VUE

实现手机验证的步骤

在Vue中实现手机验证通常需要结合前端验证逻辑和后端短信服务。以下是常见的实现方法：

前端验证逻辑

创建表单输入框和验证码按钮组件：

vue怎么实现手机验证

<template>
  <div>
    <input v-model="phone" placeholder="请输入手机号" />
    <input v-model="code" placeholder="请输入验证码" />
    <button @click="sendCode" :disabled="isCounting">
      {{ buttonText }}
    </button>
  </div>
</template>

实现倒计时功能：

data() {
  return {
    phone: '',
    code: '',
    countdown: 60,
    isCounting: false
  }
},
computed: {
  buttonText() {
    return this.isCounting ? `${this.countdown}秒后重试` : '获取验证码'
  }
},
methods: {
  sendCode() {
    if (!this.validatePhone()) return

    this.isCounting = true
    const timer = setInterval(() => {
      this.countdown--
      if (this.countdown <= 0) {
        clearInterval(timer)
        this.isCounting = false
        this.countdown = 60
      }
    }, 1000)

    // 调用API发送验证码
    this.sendVerificationCode()
  },
  validatePhone() {
    const reg = /^1[3-9]\d{9}$/
    return reg.test(this.phone)
  }
}

后端API集成

调用短信服务API发送验证码：

vue怎么实现手机验证

methods: {
  async sendVerificationCode() {
    try {
      const response = await axios.post('/api/send-code', {
        phone: this.phone
      })
      console.log('验证码发送成功')
    } catch (error) {
      console.error('发送失败', error)
    }
  }
}

验证码验证

提交时验证验证码：

methods: {
  async verifyCode() {
    try {
      const response = await axios.post('/api/verify-code', {
        phone: this.phone,
        code: this.code
      })
      alert('验证成功')
    } catch (error) {
      alert('验证码错误')
    }
  }
}