当前位置：首页 > VUE

vue实现手机验证码

2026-03-27 04:51:26VUE

vue实现手机验证码

实现手机验证码功能

前端实现（Vue.js）

创建验证码输入组件
在Vue中创建一个包含手机号输入框和验证码输入框的组件，添加获取验证码按钮。

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

<script>
export default {
  data() {
    return {
      phone: '',
      code: '',
      isCounting: false,
      countdown: 60,
      buttonText: '获取验证码'
    };
  },
  methods: {
    getCode() {
      if (!this.phone) {
        alert('请输入手机号');
        return;
      }
      // 调用API发送验证码
      this.isCounting = true;
      this.startCountdown();
    },
    startCountdown() {
      const timer = setInterval(() => {
        this.countdown--;
        this.buttonText = `${this.countdown}秒后重新获取`;
        if (this.countdown <= 0) {
          clearInterval(timer);
          this.isCounting = false;
          this.countdown = 60;
          this.buttonText = '获取验证码';
        }
      }, 1000);
    }
  }
};
</script>

验证码校验逻辑
在提交表单时验证验证码是否正确。

methods: {
  submitForm() {
    if (!this.code) {
      alert('请输入验证码');
      return;
    }
    // 调用API验证验证码
    // 验证成功后进行后续操作
  }
}

后端实现

生成随机验证码
生成4-6位随机数字作为验证码。

function generateCode() {
  return Math.floor(1000 + Math.random() * 9000).toString();
}

发送验证码
通过短信平台API发送验证码到用户手机。

const code = generateCode();
// 调用短信平台API发送code到用户手机
// 将手机号和验证码存入数据库或缓存，设置过期时间

验证验证码
用户提交验证码时，检查是否匹配且未过期。

function verifyCode(phone, code) {
  // 从数据库或缓存中获取该手机号的验证码
  // 检查是否匹配且未过期
  return isValid;
}

安全注意事项

限制同一手机号获取验证码的频率，防止短信轰炸
验证码设置合理的过期时间（通常5-10分钟）
前端验证不能替代后端验证，必须进行双重验证
对验证码错误次数进行限制，防止暴力破解

第三方服务集成

可以考虑使用阿里云短信、腾讯云短信等第三方服务简化开发：

// 阿里云短信示例
const client = new Core({
  accessKeyId: 'yourAccessKey',
  accessKeySecret: 'yourAccessSecret',
});

client.request('SendSms', {
  PhoneNumbers: phone,
  SignName: '签名',
  TemplateCode: '模板ID',
  TemplateParam: `{"code":"${code}"}`
});

实现手机验证码功能需要前后端配合，前端负责用户交互和界面展示，后端负责验证码生成、发送和验证。