当前位置：首页 > VUE

验证码实现vue

2026-01-06 23:23:05VUE

验证码实现（Vue）

使用组件库（如Element UI）

Element UI提供了现成的验证码组件，可直接集成到Vue项目中。

安装Element UI：

npm install element-ui

在Vue中引入并使用：

<template>
  <el-form>
    <el-form-item label="验证码">
      <el-input v-model="captcha" placeholder="请输入验证码"></el-input>
      <el-button @click="refreshCaptcha">刷新验证码</el-button>
    </el-form-item>
    <img :src="captchaImage" @click="refreshCaptcha">
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      captcha: '',
      captchaImage: ''
    };
  },
  methods: {
    refreshCaptcha() {
      this.captchaImage = `/api/captcha?t=${Date.now()}`;
    }
  },
  mounted() {
    this.refreshCaptcha();
  }
};
</script>

自定义验证码组件

如果需要完全自定义验证码，可以创建一个独立的Vue组件。

创建Captcha.vue：

验证码实现vue

<template>
  <div class="captcha-container">
    <canvas ref="canvas" width="120" height="40" @click="generateCaptcha"></canvas>
    <input v-model="inputCaptcha" placeholder="输入验证码">
  </div>
</template>

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

      this.generatedCaptcha = Math.random().toString(36).substr(2, 6).toUpperCase();

      ctx.fillStyle = '#f5f5f5';
      ctx.fillRect(0, 0, canvas.width, canvas.height);

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

      for (let i = 0; i < 5; i++) {
        ctx.strokeStyle = `#${Math.floor(Math.random() * 16777215).toString(16)}`;
        ctx.beginPath();
        ctx.moveTo(Math.random() * canvas.width, Math.random() * canvas.height);
        ctx.lineTo(Math.random() * canvas.width, Math.random() * canvas.height);
        ctx.stroke();
      }
    },
    validate() {
      return this.inputCaptcha.toUpperCase() === this.generatedCaptcha;
    }
  },
  mounted() {
    this.generateCaptcha();
  }
};
</script>

后端API集成

验证码通常需要后端支持，以下是一个简单的Node.js Express示例：

// server.js
const express = require('express');
const svgCaptcha = require('svg-captcha');
const app = express();

app.get('/api/captcha', (req, res) => {
  const captcha = svgCaptcha.create();
  req.session.captcha = captcha.text;
  res.type('svg');
  res.status(200).send(captcha.data);
});

app.listen(3000);

验证码验证逻辑

在提交表单时验证验证码：

<script>
export default {
  methods: {
    submitForm() {
      if (!this.validate()) {
        alert('验证码错误');
        return;
      }
      // 继续表单提交
    }
  }
};
</script>

安全注意事项

验证码实现应考虑以下安全因素：

验证码实现vue

验证码应在服务端生成和验证
验证码应设置有效期（通常2-5分钟）
避免使用简单的数学运算作为验证码
考虑添加点击刷新功能防止暴力破解
对验证码请求频率进行限制

第三方服务集成

也可以考虑使用第三方验证码服务，如Google reCAPTCHA：

安装vue-recaptcha：

npm install vue-recaptcha

使用示例：

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

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

export default {
  components: { VueRecaptcha },
  methods: {
    onVerify(response) {
      // 将response发送到后端验证
    }
  }
};
</script>