vue3純前端實(shí)現(xiàn)驗(yàn)證碼代碼示例

更新時(shí)間：2025年01月13日 11:05:32 作者：路慶華的博客

這篇文章主要介紹了驗(yàn)證碼的用途和分類(lèi),展示了如何創(chuàng)建一個(gè)簡(jiǎn)單的純前端字符驗(yàn)證碼組件,并通過(guò)Canvas增加干擾線和干擾點(diǎn)的效果,通過(guò)Vue組件化開(kāi)發(fā),文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

驗(yàn)證碼的用途：通過(guò)要求用戶(hù)輸入一串難以被機(jī)器自動(dòng)識(shí)別的字符或圖像，有效阻止惡意用戶(hù)或腳本通過(guò)暴力方式嘗試登錄賬戶(hù)。
驗(yàn)證碼的分類(lèi)：常見(jiàn)的驗(yàn)證碼有短信、文本、圖形等，安全度越高，依賴(lài)的插件或服務(wù)也越多。
今天我們來(lái)做一個(gè)簡(jiǎn)單的純前端字符驗(yàn)證碼碼組件，不需要插件，僅做為示例。
先看一下效果：

分析

一個(gè)簡(jiǎn)單的字符驗(yàn)證碼，只需求定義一個(gè)字符集，一個(gè)隨機(jī)生成函數(shù)就可以了。如果要再進(jìn)一步增加一些效果，如干擾線，干擾點(diǎn)，則需要借助Canvas來(lái)進(jìn)行繪制，以增強(qiáng)可視化效果。

基礎(chǔ)代碼示例

以下代碼就完成了簡(jiǎn)單驗(yàn)證碼的核心工作，生成指定位數(shù)的隨機(jī)驗(yàn)證碼。

// 生成校驗(yàn)碼
const makeCode = (len = 4) => {
  let code = "";
  const codeLength = len; //驗(yàn)證碼的長(zhǎng)度
  // 定義生成驗(yàn)證碼的字符集,去除易混淆的字符集1il0oO
  const identifyCodes = "123456789abcdefjhijkinpqrsduvwxyzABCDEFGHJKLMNPQRSTUVWXYZ";
  for (let i = 0; i < codeLength; i++) {
    // 獲取隨機(jī)字符
    code += identifyCodes[randomNum(0, identifyCodes.length)];
  }
  return code; //把code值賦給驗(yàn)證碼
};
//隨機(jī)數(shù)生成：根據(jù)角標(biāo)拿字符串的值
const randomNum = (min = 0, max: number) => Math.floor(Math.random() * (max - min)) + min;

組件化及可視化增強(qiáng)

下面我們來(lái)做一個(gè)完整的vue驗(yàn)證碼組件，并借助Canvas添加干擾線和干擾點(diǎn)的效果。

既然是組件，就需要幾個(gè)參數(shù)供調(diào)用者調(diào)整，常規(guī)的就是組件的寬、高、字號(hào)以及是否需要干擾線或干擾點(diǎn)，所以這里只定義了這幾個(gè)參數(shù)。
多余的就不說(shuō)了，直接上代碼。

1、vue驗(yàn)證碼組件代碼：

<template>
  <div class="s-canvas">
    <canvas
      id="s-canvas"
      :width="contentWidth"
      :height="contentHeight"
      @click="refreshCode"
    ></canvas>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, withDefaults, defineProps } from "vue";

// 定義props類(lèi)型
interface CodeProps {
  /** 默認(rèn)驗(yàn)證碼 */
  defaultCode?: string;
  /** 容器寬度 */
  contentWidth?: number;
  /** 容器高度 */
  contentHeight?: number;
  /** 最大干擾線，0時(shí)無(wú)干擾線 */
  maxLine?: number;
  /** 最大干擾點(diǎn)，0時(shí)無(wú)干擾點(diǎn) */
  maxDot?: number;
  /** 字體最小值 */
  fontSizeMin?: number;
  /** 字體最大值 */
  fontSizeMax?: number;
}
// props默認(rèn)值
const props = withDefaults(defineProps<CodeProps>(), {
  contentWidth: 90,
  contentHeight: 30,
  fontSizeMin: 25,
  fontSizeMax: 30,
  maxLine: 4,
  maxDot: 10,
});

const emit = defineEmits(["update:verifyCode"]);
//驗(yàn)證碼
const verifyCode = ref("");

onMounted(() => {
  verifyCode.value = props.defaultCode || makeCode();
  emit("update:verifyCode", verifyCode.value);
  drawPic(verifyCode.value);
});
// 生成校驗(yàn)碼
const makeCode = (len = 4) => {
  let code = "";
  const codeLength = len; //驗(yàn)證碼的長(zhǎng)度
  // 定義生成驗(yàn)證碼的字符集,去除易混淆的字符集1il0oO
  const identifyCodes = "123456789abcdefjhijkinpqrsduvwxyzABCDEFGHJKLMNPQRSTUVWXYZ";
  for (let i = 0; i < codeLength; i++) {
    // 獲取隨機(jī)字符
    code += identifyCodes[randomNum(0, identifyCodes.length)];
  }
  return code; //把code值賦給驗(yàn)證碼
};

// 重置驗(yàn)證碼
const refreshCode = () => {
  verifyCode.value = makeCode();
  emit("update:verifyCode", verifyCode.value);
  drawPic(verifyCode.value);
};
// 定義暴露接口
// defineExpose({ refreshCode });

//隨機(jī)數(shù)生成：根據(jù)角標(biāo)拿字符串的值
const randomNum = (min = 0, max: number) => Math.floor(Math.random() * (max - min)) + min;

// 生成一個(gè)隨機(jī)的顏色
function randomColor(min: number, max: number) {
  let r = randomNum(min, max);
  let g = randomNum(min, max);
  let b = randomNum(min, max);
  return "rgb(" + r + "," + g + "," + b + ")";
}
/** 繪制文字 */
function drawPic(verifyCode: string) {
  let canvas = document.getElementById("s-canvas") as HTMLCanvasElement;
  if (!canvas) {
    console.error("找不到 canvas 元素");
    return;
  }
  //創(chuàng)建一個(gè)2D對(duì)象作為上下文。
  let ctx = canvas.getContext("2d") as CanvasRenderingContext2D;
  ctx.textBaseline = "bottom";
  // 繪制背景
  ctx.fillStyle = "#e6ecfd";
  ctx.fillRect(0, 0, props.contentWidth, props.contentHeight);
  // 繪制文字
  for (let i = 0; i < verifyCode.length; i++) {
    drawText(ctx, verifyCode, i);
  }
  drawLine(ctx, props.maxLine);
  drawDot(ctx, props.maxDot);
}

/**在畫(huà)布上顯示數(shù)據(jù)
 * @param ctx CanvasRenderingContext2D
 * @param verifyCode 要顯示的文字
 * @param index 字符索引
 */
function drawText(ctx: CanvasRenderingContext2D, verifyCode: string, index: number) {
  ctx.fillStyle = randomColor(50, 160); // 隨機(jī)生成字體顏色
  ctx.font = randomNum(props.fontSizeMin, props.fontSizeMax) + "px SimHei"; // 隨機(jī)生成字體大小
  let x = (index + 1) * (props.contentWidth / (verifyCode.length + 1));
  let y = randomNum(props.fontSizeMax, props.contentHeight - 5);
  var deg = randomNum(-10, 15);
  // 修改坐標(biāo)原點(diǎn)和旋轉(zhuǎn)角度
  ctx.translate(x, y);
  ctx.rotate((deg * Math.PI) / 180);
  ctx.fillText(verifyCode[index], 0, 0);
  // 恢復(fù)坐標(biāo)原點(diǎn)和旋轉(zhuǎn)角度
  ctx.rotate((-deg * Math.PI) / 180);
  ctx.translate(-x, -y);
}
/** 繪制干擾線
 * @param ctx CanvasRenderingContext2D
 * @param max 最大干擾線個(gè)數(shù)
 */
function drawLine(ctx: CanvasRenderingContext2D, maxLine = 4) {
  if (maxLine <= 0) {
    return;
  }
  for (let i = 0; i < maxLine; i++) {
    ctx.strokeStyle = randomColor(150, 200);
    ctx.beginPath();
    ctx.moveTo(randomNum(0, props.contentWidth), randomNum(0, props.contentHeight));
    ctx.lineTo(randomNum(0, props.contentWidth), randomNum(0, props.contentHeight));
    ctx.stroke();
  }
}
/** 繪制干擾點(diǎn)
 * @param ctx CanvasRenderingContext2D
 * @param max 最大干擾點(diǎn)個(gè)數(shù)
 */
function drawDot(ctx: CanvasRenderingContext2D, maxDot = 10) {
  if (maxDot <= 0) {
    return;
  }
  for (let i = 0; i < maxDot; i++) {
    ctx.fillStyle = randomColor(0, 255);
    ctx.beginPath();
    ctx.arc(randomNum(0, props.contentWidth), randomNum(0, props.contentHeight), 1, 0, 2 * Math.PI);
    ctx.fill();
  }
}
</script>

2、使用驗(yàn)證碼組件

代碼可直接復(fù)制進(jìn)行驗(yàn)證，ui使用了ant-design-vue，如果用的不是ant，則直接替換組件即可。

<template>
  <div class="main">
    <div class="container">
      <div>
        <a-input placeholder="請(qǐng)輸入驗(yàn)證碼" v-model:value="code"></a-input>
      </div>
      <div>
        <!--驗(yàn)證碼組件-->
        <VerifyCode v-model:verifyCode="identifyCode"></VerifyCode>
      </div>
    </div>

    <div>
      <p>當(dāng)前驗(yàn)證碼: {{ identifyCode }}，手動(dòng)輸入驗(yàn)證碼: {{ code }}</p>
      <a-button type="primary" @click="submit">提交</a-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { message } from "ant-design-vue";
import VerifyCode from "./verifyCode.vue";
// 驗(yàn)證碼輸入框內(nèi)容
let code = ref("");
// 驗(yàn)證碼圖片內(nèi)容
let identifyCode = ref("");
function submit() {
  if (code.value == "") {
    message.error("請(qǐng)先輸入驗(yàn)證碼");
    return;
  }
  if (identifyCode.value == code.value) {
    message.success("驗(yàn)證碼正確?");
  } else {
    message.error("驗(yàn)證碼錯(cuò)誤,請(qǐng)重新輸入！");
  }
}
</script>
<style lang="less" scoped>
.main {
  padding: 20px;
}
.container {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
}
</style>

注意事項(xiàng)：