前言

• 验证码的用途：通过要求用户输入一串难以被机器自动识别的字符或图像，有效阻止恶意用户或脚本通过暴力破解方式尝试登录账户。
• 验证码的分类：常见的验证码有短信、文本、图形等，安全度越高，依赖的插件或服务也越多。
  今天我们来做一个简单的纯前端字符验证码码组件，不需要插件，仅做为示例。
  先看一下效果：

分析

一个简单的字符验证码，只需求定义一个字符集，一个随机生成函数就可以了。如果要再进一步增加一些效果，如干扰线，干扰点，则需要借助Canvas来进行绘制，以增强可视化效果。

基础代码示例

以下代码就完成了简单验证码的核心工作，生成指定位数的随机验证码。

// 生成校验码
const makeCode = (len = 4) => {
    
    
  let code = "";
  const codeLength = len; //验证码的长度
  // 定义生成验证码的字符集,去除易混淆的字符集1il0oO
  const identifyCodes = "123456789abcdefjhijkinpqrsduvwxyzABCDEFGHJKLMNPQRSTUVWXYZ";
  for (let i = 0; i < codeLength; i++) {
    
    
    // 获取随机字符
    code += identifyCodes[randomNum(0, identifyCodes.length)];
  }
  return code; //把code值赋给验证码
};
//随机数生成：根据角标拿字符串的值
const randomNum = (min = 0, max: number) => Math.floor(Math.random() * (max - min)) + min;

组件化及可视化增强

下面我们来做一个完整的vue验证码组件，并借助Canvas添加干扰线和干扰点的效果。
既然是组件，就需要几个参数供调用者调整，常规的就是组件的宽、高、字号以及是否需要干扰线或干扰点，所以这里只定义了这几个参数。
多余的就不说了，直接上代码。

1、vue验证码组件代码：

<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类型
interface CodeProps {
    
    
  /** 默认验证码 */
  defaultCode?: string;
  /** 容器宽度 */
  contentWidth?: number;
  /** 容器高度 */
  contentHeight?: number;
  /** 最大干扰线，0时无干扰线 */
  maxLine?: number;
  /** 最大干扰点，0时无干扰点 */
  maxDot?: number;
  /** 字体最小值 */
  fontSizeMin?: number;
  /** 字体最大值 */
  fontSizeMax?: number;
}
// props默认值
const props = withDefaults(defineProps<CodeProps>(), {
    
    
  contentWidth: 90,
  contentHeight: 30,
  fontSizeMin: 25,
  fontSizeMax: 30,
  maxLine: 4,
  maxDot: 10,
});

const emit = defineEmits(["update:verifyCode"]);
//验证码
const verifyCode = ref("");

onMounted(() => {
    
    
  verifyCode.value = props.defaultCode || makeCode();
  emit("update:verifyCode", verifyCode.value);
  drawPic(verifyCode.value);
});
// 生成校验码
const makeCode = (len = 4) => {
    
    
  let code = "";
  const codeLength = len; //验证码的长度
  // 定义生成验证码的字符集,去除易混淆的字符集1il0oO
  const identifyCodes = "123456789abcdefjhijkinpqrsduvwxyzABCDEFGHJKLMNPQRSTUVWXYZ";
  for (let i = 0; i < codeLength; i++) {
    
    
    // 获取随机字符
    code += identifyCodes[randomNum(0, identifyCodes.length)];
  }
  return code; //把code值赋给验证码
};

// 重置验证码
const refreshCode = () => {
    
    
  verifyCode.value = makeCode();
  emit("update:verifyCode", verifyCode.value);
  drawPic(verifyCode.value);
};
// 定义暴露接口
// defineExpose({ refreshCode });

//随机数生成：根据角标拿字符串的值
const randomNum = (min = 0, max: number) => Math.floor(Math.random() * (max - min)) + min;

// 生成一个随机的颜色
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;
  }
  //创建一个2D对象作为上下文。
  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);
}

/**在画布上显示数据
 * @param ctx CanvasRenderingContext2D
 * @param verifyCode 要显示的文字
 * @param index 字符索引
 */
function drawText(ctx: CanvasRenderingContext2D, verifyCode: string, index: number) {
    
    
  ctx.fillStyle = randomColor(50, 160); // 随机生成字体颜色
  ctx.font = randomNum(props.fontSizeMin, props.fontSizeMax) + "px SimHei"; // 随机生成字体大小
  let x = (index + 1) * (props.contentWidth / (verifyCode.length + 1));
  let y = randomNum(props.fontSizeMax, props.contentHeight - 5);
  var deg = randomNum(-10, 15);
  // 修改坐标原点和旋转角度
  ctx.translate(x, y);
  ctx.rotate((deg * Math.PI) / 180);
  ctx.fillText(verifyCode[index], 0, 0);
  // 恢复坐标原点和旋转角度
  ctx.rotate((-deg * Math.PI) / 180);
  ctx.translate(-x, -y);
}
/** 绘制干扰线
 * @param ctx CanvasRenderingContext2D
 * @param max 最大干扰线个数
 */
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();
  }
}
/** 绘制干扰点
 * @param ctx CanvasRenderingContext2D
 * @param max 最大干扰点个数
 */
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、使用验证码组件

代码可直接复制进行验证，ui使用了ant-design-vue，如果用的不是ant，则直接替换组件即可。

<template>
  <div class="main">
    <div class="container">
      <div>
        <a-input placeholder="请输入验证码" v-model:value="code"></a-input>
      </div>
      <div>
        <!--验证码组件-->
        <VerifyCode v-model:verifyCode="identifyCode"></VerifyCode>
      </div>
    </div>

    <div>
      <p>当前验证码: {
    
    {
    
     identifyCode }}，手动输入验证码: {
    
    {
    
     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";
// 验证码输入框内容
let code = ref("");
// 验证码图片内容
let identifyCode = ref("");
function submit() {
    
    
  if (code.value == "") {
    
    
    message.error("请先输入验证码");
    return;
  }
  if (identifyCode.value == code.value) {
    
    
    message.success("验证码正确✓");
  } else {
    
    
    message.error("验证码错误,请重新输入！");
  }
}
</script>
<style lang="less" scoped>
.main {
    
    
  padding: 20px;
}
.container {
    
    
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
}
</style>

注意事项：

• 通过update:verifyCode:来实现验证码的自动回填，减少了业务使用方的数据交互处理。

最终效果