vue3纯前端验证码示例

前言

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

分析

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

基础代码示例

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

// 生成校验码
const makeCode = (len = 4) => {let code = "";const codeLength = len; //验证码的长度// 定义生成验证码的字符集,去除易混淆的字符集1il0oOconst 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"><canvasid="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; //验证码的长度// 定义生成验证码的字符集,去除易混淆的字符集1il0oOconst 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:来实现验证码的自动回填，减少了业务使用方的数据交互处理。

最终效果