当前位置：首页 > VUE

vue实现手机注册

2026-02-11 03:35:00VUE

实现手机注册功能

在Vue中实现手机注册功能需要结合前端表单验证、后端API交互以及短信验证码服务。以下是关键步骤和代码示例：

前端表单设计

创建注册表单组件，包含手机号、验证码和密码输入框：

<template>
  <form @submit.prevent="handleRegister">
    <input v-model="form.mobile" placeholder="请输入手机号" type="tel">
    <div>
      <input v-model="form.code" placeholder="验证码">
      <button @click="sendCode" :disabled="isCounting">{{ countdown > 0 ? `${countdown}s` : '获取验证码' }}</button>
    </div>
    <input v-model="form.password" placeholder="设置密码" type="password">
    <button type="submit">注册</button>
  </form>
</template>

表单数据与验证

设置表单数据模型和基础验证规则：

data() {
  return {
    form: {
      mobile: '',
      code: '',
      password: ''
    },
    countdown: 0,
    isCounting: false
  }
},
methods: {
  validateMobile() {
    const reg = /^1[3-9]\d{9}$/
    return reg.test(this.form.mobile)
  }
}

发送验证码

实现获取短信验证码功能，包含倒计时逻辑：

async sendCode() {
  if (!this.validateMobile()) {
    alert('手机号格式错误')
    return
  }

  try {
    await api.sendSmsCode({ mobile: this.form.mobile })
    this.startCountdown()
  } catch (error) {
    console.error('发送验证码失败', error)
  }
},
startCountdown() {
  this.countdown = 60
  this.isCounting = true
  const timer = setInterval(() => {
    this.countdown--
    if (this.countdown <= 0) {
      clearInterval(timer)
      this.isCounting = false
    }
  }, 1000)
}

注册提交处理

实现注册表单提交逻辑：

async handleRegister() {
  if (!this.validateMobile()) {
    alert('请输入正确的手机号')
    return
  }
  if (!this.form.code) {
    alert('请输入验证码')
    return
  }
  if (this.form.password.length < 6) {
    alert('密码长度不能小于6位')
    return
  }

  try {
    const res = await api.register(this.form)
    if (res.success) {
      // 注册成功后的处理，如跳转登录页
      this.$router.push('/login')
    }
  } catch (error) {
    console.error('注册失败', error)
  }
}

API接口封装

创建独立的API服务模块：

// api.js
import axios from 'axios'

export default {
  sendSmsCode(data) {
    return axios.post('/api/sms/send', data)
  },
  register(data) {
    return axios.post('/api/user/register', data)
  }
}