首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue3纯前端验证码

vue3纯前端实现验证码代码示例

2025-01-13 11:05:12 作者：路庆华的博客

这篇文章主要介绍了验证码的用途和分类,展示了如何创建一个简单的纯前端字符验证码组件,并通过Canvas增加干扰线和干扰点的效果,通过Vue组件化开发,文中通过代码介绍的非常详细,需要的朋友可以参考下

前言

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

分析

一个简单的字符验证码，只需求定义一个字符集，一个随机生成函数就可以了。如果要再进一步增加一些效果，如干扰线，干扰点，则需要借助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:来实现验证码的自动回填，减少了业务使用方的数据交互处理。

最终效果

总结

到此这篇关于vue3纯前端实现验证码的文章就介绍到这了,更多相关vue3纯前端验证码内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！