vue3实现验证码校验的功能

简介: 最近想实现使用vue3实现一个简易的前端验证码校验的功能,就花了点时间实现了,这只是一个简易版的,但是用在项目中是没有啥问题的,废话不多说,先来看下最终实现的效果。写着玩的 哈哈

📓最近想实现使用vue3实现一个简易的前端验证码校验的功能,就花了点时间实现了,这只是一个简易版的,但是用在项目中是没有啥问题的,废话不多说,先来看下最终实现的效果。

image.gif

📓现在让我们来一步一步的实现就行,先把代码贴出来

<template>
    <div>
        <div class="box">
            <div>
                <span>输入验证码:</span><el-input class="input" v-model="numberinput"></el-input>
            </div>
            <div class="rendombox">
                <div class="rendom" ref="rendom">{{ numberrandom }}</div>
                <div class="rendomimg rendom">
                    <img :src="imageData">
                </div>
            </div>
            <el-button style="height: 40px;" @click="refresh">刷新</el-button>
            <el-button style="height: 40px;" @click="login">登录</el-button>
        </div>
    </div>
</template>
<script lang="ts">
import { nextTick, onMounted, ref, watch } from 'vue'
import html2canvas from 'html2canvas'
export default ({
    setup() {
        let numberrandom = ref()
        let numberinput = ref()
        let imageData = ref()
        const rendom: any = ref()
        const canvas = (data: any) => {
            nextTick(() => {
                html2canvas(data).then(canvas => {
                    imageData.value = canvas.toDataURL('image/png');
                });
            })
        }
        const random = () => {
            numberrandom.value = Math.floor(Math.random() * 10000) % 10000
        }
        random()
        const refresh = async () => {
            random()
            canvas(rendom.value)
            console.log(rendom.value, 1)
        }
        const login = () => {
            if (numberinput.value == numberrandom.value) {
                alert("验证通过,在这里写登录成功的代码")
            } else {
                alert("登录失败,在这里写登录失败后的代码")
            }
        }
        onMounted(() => {
            canvas(rendom.value)
        })
        return {
            numberrandom, random, numberinput, login, rendom, imageData, refresh
        }
    },
})
</script>
<style>
@font-face {
    font-family: "christmas";
    src: url("../ttf/Christmas_Wonderful.ttf");
}
.box {
    display: flex;
    flex-direction: row
}
.input {
    width: 120px;
    height: 40px;
    margin-right: 20px;
}
.rendom {
    font-family: "christmas", sans-serif;
    border: 0.5px solid #ccc;
    line-height: 50px;
    width: 100px;
    text-align: center;
    height: 38px;
    font-size: 50px;
    margin-right: 20px;
    background-color: #F1F1F5;
    /*背景色*/
    background-image: linear-gradient(90deg, rgba(200, 0, 0, 0.15) 10%, rgba(0, 0, 0, 0) 10%), linear-gradient(0deg, rgba(200, 0, 0, 0.15) 10%, rgba(0, 0, 0, 0) 10%);
    /*rgba(0, 0, 0, 0),transparent全透明黑*/
    background-size: 40px 10px;
    /*调节格子宽 高*/
}
.rendombox {
    position:relative;
}
.rendomimg {
    position:absolute;
    top: 0;
    left: 0;
}
.rendomimg>img{
    width:100px;
    height:38px;
}
</style>

image.gif

📓按照下方的步骤来

1,基本的页面样式

       📓基本的样式我这里就不多说了,就正常的样式即可,主要的还是验证码方面。

2,生成随机数

       2.1 验证码都是随机数,我们这里需要前端生成随机数,然后将随机数放在页面上,这里我使用了一个div来放置随机数。代码如下

let numberrandom = ref()
        const random = () => {
            numberrandom.value = Math.floor(Math.random() * 10000) % 10000
        }

image.gif

       2.2  同时还需要将生成随机数函数放在钩子函数onmounted里执行,保证每次进入到这个页面时都能生成这个函数

onMounted(() => {
            random()
        })

image.gif

       2.3 将随机数渲染到页面上去

<div class="rendom"><span>{{ numberrandom }}</span></div>

image.gif

3.字体处理

       📓我们看到的验证码都是一些艺术字,所以这里我们也需要对验证码多艺术字处理,我们首先找到字体文件,这个一般在一些字体下载网上能找到,ttf格式的文件,我们在src下新建一个文件夹,文件夹里放置我们的ttf的文件,如下图:

image.gif

📓然后我们在我们放验证码内容的外层加上一层div,给这个div设置一个class名

image.gif

📓然后我们在style标签里写css样式,并引入我们的字体文件,如下图

image.gif

📓当我们设置完成后,我们的验证码的文字就变成艺术字啦

4.背景处理

         📓除了字体需要做的不容易识别的话,其实我们还需要对验证码的背景进行处理,让他变得更花。

📓这里我直接用了给验证码加了一套格子背景

background-image: linear-gradient(90deg, rgba(200, 0, 0, 0.15) 10%, rgba(0, 0, 0, 0) 10%), linear-gradient(0deg, rgba(200, 0, 0, 0.15) 10%, rgba(0, 0, 0, 0) 10%);

image.gif

5.将我们的验证码变成图片

       📓这时候我们的验证码已经基本上做好了 这时候我们就需要在做一件事情,将验证码的div块变成图片,这里我使用html2canvas来进行转换

       下载html2canvas

        npm install html2canvas --save

       使用

import html2canvas from 'html2canvas'
 html2canvas(data).then(canvas => {
                    imageData.value = canvas.toDataURL('image/png');
                });

image.gif

       📓其中 我们给html2canvas传入的参数dta就是我们需要转换为图片的元素的元素对象,一般通过vue的ref来获取这个元素对象,然后将对象传入即可,回调函数里返回一个图片地址,将这个图片地址通过img标签渲染到页面上即可。

       📓注意,因为我们将div变成图片是要在获取到元素对象后才执行,所以,转换代码要卸载nextick的的钩子函数里:

nextTick(() => {
                html2canvas(data).then(canvas => {
                    imageData.value = canvas.toDataURL('image/png');
                });
            })

image.gif

       📓到了这一步后,我们就能发现页面上显示出了2个验证码的显示框,这时候,我们就需要,将我们的图片的验证码贴到文字验证码上方,这里我使用定位的方式来实现

.rendombox {  //外层的div
    position:relative;
}
.rendomimg { //图片
    position:absolute;
    top: 0;
    left: 0;
}

image.gif

       📓到现在这一步之后,就基本上实现的验证码的功能,有一点需要注意,我们获取ref的代码要写在nomounted的钩子函数里。

📓随手写的,作一个知识扩展吧 别当真哈

相关文章
|
15天前
|
开发工具 iOS开发 MacOS
基于Vite7.1+Vue3+Pinia3+ArcoDesign网页版webos后台模板
最新版研发vite7+vue3.5+pinia3+arco-design仿macos/windows风格网页版OS系统Vite-Vue3-WebOS。
162 11
|
5月前
|
缓存 JavaScript PHP
斩获开发者口碑!SnowAdmin:基于 Vue3 的高颜值后台管理系统,3 步极速上手!
SnowAdmin 是一款基于 Vue3/TypeScript/Arco Design 的开源后台管理框架,以“清新优雅、开箱即用”为核心设计理念。提供角色权限精细化管理、多主题与暗黑模式切换、动态路由与页面缓存等功能,支持代码规范自动化校验及丰富组件库。通过模块化设计与前沿技术栈(Vite5/Pinia),显著提升开发效率,适合团队协作与长期维护。项目地址:[GitHub](https://github.com/WANG-Fan0912/SnowAdmin)。
752 5
|
2月前
|
缓存 前端开发 大数据
虚拟列表在Vue3中的具体应用场景有哪些?
虚拟列表在 Vue3 中通过仅渲染可视区域内容,显著提升大数据列表性能,适用于 ERP 表格、聊天界面、社交媒体、阅读器、日历及树形结构等场景,结合 `vue-virtual-scroller` 等工具可实现高效滚动与交互体验。
282 1
|
2月前
|
缓存 JavaScript UED
除了循环引用,Vue3还有哪些常见的性能优化技巧?
除了循环引用,Vue3还有哪些常见的性能优化技巧?
151 0
|
3月前
|
JavaScript
vue3循环引用自已实现
当渲染大量数据列表时,使用虚拟列表只渲染可视区域的内容,显著减少 DOM 节点数量。
100 0
|
5月前
|
JavaScript API 容器
Vue 3 中的 nextTick 使用详解与实战案例
Vue 3 中的 nextTick 使用详解与实战案例 在 Vue 3 的日常开发中,我们经常需要在数据变化后等待 DOM 更新完成再执行某些操作。此时,nextTick 就成了一个不可或缺的工具。本文将介绍 nextTick 的基本用法,并通过三个实战案例,展示它在表单验证、弹窗动画、自动聚焦等场景中的实际应用。
433 17
|
5月前
|
JavaScript 前端开发 API
Vue 2 与 Vue 3 的区别:深度对比与迁移指南
Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架,在过去的几年里,Vue 2 一直是前端开发中的重要工具。而 Vue 3 作为其升级版本,带来了许多显著的改进和新特性。在本文中,我们将深入比较 Vue 2 和 Vue 3 的主要区别,帮助开发者更好地理解这两个版本之间的变化,并提供迁移建议。 1. Vue 3 的新特性概述 Vue 3 引入了许多新特性,使得开发体验更加流畅、灵活。以下是 Vue 3 的一些关键改进: 1.1 Composition API Composition API 是 Vue 3 的核心新特性之一。它改变了 Vue 组件的代码结构,使得逻辑组
1516 0
|
存储 NoSQL 数据库
认证服务---整合短信验证码,用户注册和登录 ,密码采用MD5加密存储 【二】
这篇文章讲述了在分布式微服务系统中添加用户注册和登录功能的过程,重点介绍了用户注册时通过远程服务调用第三方服务获取短信验证码、使用Redis进行验证码校验、对密码进行MD5加密后存储到数据库,以及用户登录时的远程服务调用和密码匹配校验的实现细节。
认证服务---整合短信验证码,用户注册和登录 ,密码采用MD5加密存储 【二】
|
8月前
|
缓存 Java 应用服务中间件
java语言后台管理若依框架-登录提示404-接口异常-系统接口404异常如何处理-登录验证码不显示prod-api/captchaImage 404 (Not Found) 如何处理-解决方案优雅草卓伊凡
java语言后台管理若依框架-登录提示404-接口异常-系统接口404异常如何处理-登录验证码不显示prod-api/captchaImage 404 (Not Found) 如何处理-解决方案优雅草卓伊凡
1345 5
|
12月前
|
C#
C# 图形验证码实现登录校验代码
C# 图形验证码实现登录校验代码
282 2

热门文章

最新文章