当前位置：首页 > VUE

vue实现验证码

2026-01-06 23:06:14VUE

Vue 实现验证码的方法

使用第三方库

安装 vue-captcha 或 vue-recaptcha 等第三方库，这些库提供了现成的验证码组件，可以直接集成到 Vue 项目中。以 vue-recaptcha 为例：

npm install vue-recaptcha

在 Vue 组件中引入并使用：

<template>
  <vue-recaptcha
    sitekey="YOUR_SITE_KEY"
    @verify="onVerify"
    @expired="onExpired"
  />
</template>

<script>
import VueRecaptcha from 'vue-recaptcha';

export default {
  components: { VueRecaptcha },
  methods: {
    onVerify(response) {
      console.log('验证成功:', response);
    },
    onExpired() {
      console.log('验证码已过期');
    }
  }
};
</script>

自定义验证码组件

如果需要自定义验证码，可以创建一个简单的数字或字母验证码组件。以下是一个生成数字验证码的示例：

<template>
  <div>
    <div class="captcha">{{ captchaText }}</div>
    <button @click="generateCaptcha">刷新验证码</button>
    <input v-model="userInput" placeholder="输入验证码" />
    <button @click="validateCaptcha">验证</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      captchaText: '',
      userInput: ''
    };
  },
  mounted() {
    this.generateCaptcha();
  },
  methods: {
    generateCaptcha() {
      const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ';
      let captcha = '';
      for (let i = 0; i < 6; i++) {
        captcha += chars.charAt(Math.floor(Math.random() * chars.length));
      }
      this.captchaText = captcha;
    },
    validateCaptcha() {
      if (this.userInput === this.captchaText) {
        alert('验证成功');
      } else {
        alert('验证失败');
        this.generateCaptcha();
      }
    }
  }
};
</script>

<style>
.captcha {
  font-size: 24px;
  letter-spacing: 3px;
  color: #333;
  background: #f5f5f5;
  padding: 10px;
  margin-bottom: 10px;
}
</style>

后端验证

验证码通常需要后端验证以确保安全性。前端生成验证码后，将验证码和用户输入一起发送到后端进行比对：

methods: {
  validateCaptcha() {
    axios.post('/api/validate-captcha', {
      captcha: this.captchaText,
      userInput: this.userInput
    }).then(response => {
      if (response.data.success) {
        alert('验证成功');
      } else {
        alert('验证失败');
        this.generateCaptcha();
      }
    });
  }
}

图形验证码

如果需要更复杂的图形验证码，可以使用 Canvas 绘制：

<template>
  <canvas ref="canvas" width="150" height="50" @click="generateCaptcha"></canvas>
  <input v-model="userInput" placeholder="输入验证码" />
  <button @click="validateCaptcha">验证</button>
</template>

<script>
export default {
  data() {
    return {
      captchaText: '',
      userInput: ''
    };
  },
  mounted() {
    this.generateCaptcha();
  },
  methods: {
    generateCaptcha() {
      const canvas = this.$refs.canvas;
      const ctx = canvas.getContext('2d');
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ';
      let captcha = '';
      for (let i = 0; i < 6; i++) {
        captcha += chars.charAt(Math.floor(Math.random() * chars.length));
      }
      this.captchaText = captcha;

      ctx.font = '30px Arial';
      ctx.fillStyle = '#333';
      ctx.fillText(captcha, 10, 30);

      // 添加干扰线
      for (let i = 0; i < 5; i++) {
        ctx.strokeStyle = `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`;
        ctx.beginPath();
        ctx.moveTo(Math.random() * canvas.width, Math.random() * canvas.height);
        ctx.lineTo(Math.random() * canvas.width, Math.random() * canvas.height);
        ctx.stroke();
      }
    },
    validateCaptcha() {
      if (this.userInput === this.captchaText) {
        alert('验证成功');
      } else {
        alert('验证失败');
        this.generateCaptcha();
      }
    }
  }
};
</script>