随机验证码vue实现,登录验证码随机验证码数字和字母类型的

1、组件

<!--loginCode登录验证码组件-->

<template>

  <canvas id="canvasCode" :width="contentWidth" :height="contentHeight" />

</template>

<script>

export default {

  name: 'LoginCode',

  props: {

    identifyCode: {

      type: String,

      default: '6834'

    },

    fontSizeMin: {

      type: Number,

      default: 20

    },

    fontSizeMax: {

      type: Number,

      default: 38

    },

    backgroundColorMin: {

      type: Number,

      default: 180

    },

    backgroundColorMax: {

      type: Number,

      default: 240

    },

    colorMin: {

      type: Number,

      default: 50

    },

    colorMax: {

      type: Number,

      default: 160

    },

    lineColorMin: {

      type: Number,

      default: 40

    },

    lineColorMax: {

      type: Number,

      default: 180

    },

    dotColorMin: {

      type: Number,

      default: 0

    },

    dotColorMax: {

      type: Number,

      default: 255

    },

    contentWidth: {

      type: Number,

      default: 110

    },

    contentHeight: {

      type: Number,

      default: 46

    }

  },

  watch: {

    identifyCode() {

      this.drawPic()

    }

  },

  mounted() {

    this.drawPic()

  },

  methods: {

    // 生成一个随机数

    randomNum(min, max) {

      return Math.floor(Math.random() * (max - min) + min)

    },

    // 生成一个随机的颜色

    randomColor(min, max) {

      const r = this.randomNum(min, max)

      const g = this.randomNum(min, max)

      const b = this.randomNum(min, max)

      return 'rgb(' + r + ',' + g + ',' + b + ',' + '0.7' + ')'

    },

    drawPic() {

      const canvas = document.getElementById('canvasCode')

      const ctx = canvas.getContext('2d')

      ctx.textBaseline = 'bottom'

      // 绘制背景

      ctx.fillStyle = this.randomColor(

        this.backgroundColorMin,

        this.backgroundColorMax

      )

      ctx.fillRect(0, 0, this.contentWidth, this.contentHeight)

      // 绘制文字

      for (let i = 0; i < this.identifyCode.length; i++) {

        this.drawText(ctx, this.identifyCode[i], i)

      }

      this.drawLine(ctx)

      this.drawDot(ctx)

    },

    drawText(ctx, txt, i) {

      ctx.fillStyle = this.randomColor(this.colorMin, this.colorMax)

      ctx.font =

        this.randomNum(this.fontSizeMin, this.fontSizeMax) + 'px SimHei'

      const x = (i + 1) * (this.contentWidth / (this.identifyCode.length + 1))

      const y = this.randomNum(this.fontSizeMax, this.contentHeight - 5)

      var deg = this.randomNum(-45, 45)

      // 修改坐标原点和旋转角度

      ctx.translate(x, y)

      ctx.rotate((deg * Math.PI) / 180)

      ctx.fillText(txt, 0, 0)

      // 恢复坐标原点和旋转角度

      ctx.rotate((-deg * Math.PI) / 180)

      ctx.translate(-x, -y)

    },

    drawLine(ctx) {

      // 绘制干扰线

      for (let i = 0; i < 8; i++) {

        ctx.strokeStyle = this.randomColor(

          this.lineColorMin,

          this.lineColorMax

        )

        ctx.beginPath()

        ctx.moveTo(

          this.randomNum(0, this.contentWidth),

          this.randomNum(0, this.contentHeight)

        )

        ctx.lineTo(

          this.randomNum(0, this.contentWidth),

          this.randomNum(0, this.contentHeight)

        )

        ctx.stroke()

      }

    },

    drawDot(ctx) {

      // 绘制干扰点

      for (let i = 0; i < 100; i++) {

        ctx.fillStyle = this.randomColor(0, 255)

        ctx.beginPath()

        ctx.arc(

          this.randomNum(0, this.contentWidth),

          this.randomNum(0, this.contentHeight),

          1,

          0,

          2 * Math.PI

        )

        ctx.fill()

      }

    }

  }

}

</script>


2、登录页面上使用

data里面定义值

     identifyCodeType: 'abcdefghuiokvbnm1234567890', // 定义验证类型 1.数字 2.字母

      identifyCode: '',

      inputCode: '', // text框输入的验证码

// 导入组件

import loginCode from '@/components/loginCode.vue'

 <el-form-item prop="username" style="position: relative;">

                <!-- <span class="el-icon-document" style="font-size:20px;color:#A7A7A7;z-index:1;position: absolute;top:29%;" /> -->

                <span class="svg-container">

                  <svg-icon icon-class="login-user1" class="svg-icon" />

                </span>

                <el-input

                  v-model="inputCode"

                  style="width: 305px"

                  type="text"

                  placeholder="请输入您的验证码"

                />

                <div style="position: absolute;top:2px;right:0px" @click="refreshCode()">

                  <loginCode :identify-code="identifyCode" />

                </div>

                <!-- <div style="display: flex; align-items: center; justify-content: center"> -->

                <!-- <span>验证码:</span> -->

                <!--   <el-input

                    v-model="inputCode"

                    style="width: 180px"

                    type="text"

                    placeholder="请输入您的验证码"

                  /> -->

                <!--  <div @click="refreshCode()">

                    <loginCode :identify-code="identifyCode" />

                  </div> -->

                <!-- </div> -->

              </el-form-item>

 mounted() {

    this.refreshCode()

  },

 // 验证码规则

    getSubmitData() {

      if (this.inputCode === '') {

        alert('请输入验证码')

        return

      }

      if (this.identifyCode !== this.inputCode) {

        this.inputCode = ''

        this.refreshCode()

        alert('请输入正确的验证码!')

        return

      } else {

        this.$message({

          message: '验证成功',

          type: 'success'

        })

      }

    },

    // 验证码

    randomNum(min, max) {

      return Math.floor(Math.random() * (max - min) + min)

    },

    // 初始化验证码

    refreshCode() {

      this.identifyCode = '' // 输入框置空

      this.makeCode(this.identifyCodeType, 4) // 验证码长度为4

    },

    // 随机切换验证码

    makeCode(o, l) {

      for (let i = 0; i < l; i++) {

        this.identifyCode +=

          this.identifyCodeType[

            this.randomNum(0, this.identifyCodeType.length)

          ]

      }

      console.log(this.identifyCode)

    },

验证码校验和登录合并

handleLogin() {

      // 验证码校验

      if (this.inputCode === '') {

        alert('请输入验证码')

        return

      }

      if (this.identifyCode !== this.inputCode) {

        this.inputCode = ''

        this.refreshCode()

        alert('请输入正确的验证码!')

        return

      } else {

        this.$message({

          message: '验证成功',

          type: 'success'

        })

      }

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/21632.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Elasticsearch和Kibana的安装及验证

金翅大鹏盖世英&#xff0c;展翅金鹏盖世雄。 穿云燕子锡今鸽&#xff0c;踏雪无痕花云平。 ---------------- 2023.7.31.101 ----------------- 本文密钥&#xff1a;365 Elasticsearch 是一个分布式的 RESTful 风格的搜索和数据分析引擎&#xff0c;常用来进行全文检索、…

c语言指针的运算

1、通过指针计算数组的元素&#xff08;指针相减&#xff0c;类型需要一致&#xff09;&#xff0c;比如数组元素指针相减得到的是中间相差的元素个数&#xff0c;可以用于计算数组元素的个数等 #include "stdio.h" #include <stdlib.h>int main() {int a[10]…

【树状数组】讲解

一.介绍 树状数组&#xff08;Fenwick Tree&#xff09;&#xff0c;也称为二叉索引树&#xff08;Binary Indexed Tree&#xff0c;BIT&#xff09;&#xff0c;是一种用于高效处理动态数组前缀和的数据结构。它可以在O(log n)的时间复杂度内完成单点更新和区间查询操作。 树…

前端面试的游览器部分(5)每篇10题

41.什么是浏览器的同步和异步加载脚本的区别&#xff1f;你更倾向于使用哪种方式&#xff0c;并解释原因。 浏览器的同步和异步加载脚本是两种不同的脚本加载方式&#xff0c;它们的主要区别在于加载脚本时是否阻塞页面的解析和渲染。 同步加载脚本&#xff1a; 同步加载脚本…

C# Blazor 学习笔记(3):路由管理

文章目录 前言路由管理App.razor设置登录页面设置空布局 前言 我们知道使用Blazor的官方模板&#xff0c;我们会自动得到一个拥有侧边栏的布局页面。但是我们发现我们所有新建的页面都有侧边栏。有时候我们需要跳出这个布局&#xff0c;比如我要做登录页面的时候&#xff0c;我…

【机密计算标准解读】 基于TEE的安全计算(IEEE 2952)

目录 1.概述2.定义、术语、缩略语3.技术框架3.1 架构框架3.2 分层功能4.基础组件4.1 基础层4.2 平台层4.3 应用层4.4 服务层4.5 交叉层5.安全计算参考过程6.技术和安全要求6.1 隔离要求6.2 互操作要求6.3 性能要求6.4 可用性要求6.5 数据安全要求6.6 密码学要求 1. 概述 随着…

微信小程序中的全局数据共享(状态管理)使用介绍

开发工具&#xff1a;微信开发者工具Stable 1.06 一、状态管理简介 微信小程序全局状态是指可以在不同页面之间共享的数据或状态。 它可以存储用户的登录状态、个人信息、全局配置信息等。 二、安装MobX 1、安装NPM 在资源管理器的空白地方点右键&#xff0c;选择“在外部…

基于 kRaft 搭建单机 kafka 测试环境

使用 docker-compose 在单机搭建有三个节点的 kafka 集群。 version: "3"services:kafka1:image: "bitnami/kafka:3.3.1"networks:- kafka-controllercontainer_name: kafka11user: rootports:- 9192:9092environment:### 通用配置# 允许使用kraft&#x…

css在线代码生成器

这里收集了许多有意思的css效果在线代码生成器适合每一位前端开发者 布局&#xff0c;效果类&#xff1a; 网格生成器https://cssgrid-generator.netlify.app/ CSS Grid Generator可帮助开发人员使用CSS Grid创建复杂的网格布局。网格布局是创建Web页面的灵活和响应式设计的强…

解密HTTP代理爬虫中的IP代理选择与管理策略

在当今数据驱动的世界中&#xff0c;HTTP代理爬虫作为一项重要的数据采集工具&#xff0c;其成功与否往往取决于IP代理的选择与管理策略。作为一家专业的HTTP代理产品供应商&#xff0c;我们深知IP代理在数据采集中的重要性。在本文中&#xff0c;我们将分享一些关于HTTP代理爬…

如何使用 ChatGPT 为 Midjourney 或 DALL-E 等 AI 图片生成提示词

人工智能为创意产业开辟了一个充满可能性的全新世界。人工智能最令人兴奋的应用之一是生成独特且原创的艺术品。Midjourney 和 DALL-E 是人工智能生成艺术的两个突出例子&#xff0c;吸引了艺术家和艺术爱好者的注意。在本文中&#xff0c;我们将探索如何使用 ChatGPT 生成 AI …

某科技公司提前批测试岗

文章目录 题目 今天给大家带来一家提前批测试岗的真题&#xff0c;目前已经发offer 题目 1.自我介绍 2.登录页面测试用例设计 3.如何模拟多用户登录 可以使用Jmeter,loadRunner性能测试工具来模拟大量用户登录操作去观察一些参数变化 4.有使用过Jmeter,loadRunner做过性能压…

Jmeter组件作用域及执行顺序

目录 一、Jmeter八大可执行元件 二、组件执行顺序 三、组件作用域 四、特殊说明 一、Jmeter八大可执行元件 配置元件---Config Element 用于初始化默认值和变量&#xff0c;以便后续采样器使用。配置元件大其作用域的初始阶段处理&#xff0c;配置元件仅对其所在的测试树分…

1013 Battle Over Cities (PAT甲级)

也可以在每次计算时&#xff0c;直接把visited[lost]标记为true。 #include <cstdio> #include <vector> #include <algorithm> const int maxN 1000;int N, M, K, u, v, lost, cnt; std::vector<int> adj[maxN]; bool visited[maxN];void dfs(int a…

数学知识(一)

一、数论 1.1质数 定义:在所有大于1的自然数&#xff0c;如果只包含1和本身这两个约数&#xff0c;就被称为质数(素数). 质数的判断:试除法 bool is_prime(int n) {if(n < 2) return false;for(int i 2;i < n / i;i ){if(n % i 0)return false;}return true; } 分…

【LangChain】向量存储(Vector stores)

LangChain学习文档 【LangChain】向量存储(Vector stores)【LangChain】向量存储之FAISS 概要 存储和搜索非结构化数据的最常见方法之一是嵌入它并存储生成的嵌入向量&#xff0c;然后在查询时嵌入非结构化查询并检索与嵌入查询“最相似”的嵌入向量。向量存储负责存储嵌入数…

基于MATLAB长时间序列遥感数据植被物候提取与分析

MATLAB MATLAB是美国MathWorks公司出品的商业数学软件&#xff0c;用于数据分析、无线通信、深度学习、图像处理与计算机视觉、信号处理、量化金融与风险管理、机器人&#xff0c;控制系统等领域。 [1] MATLAB是matrix&laboratory两个词的组合&#xff0c;意为矩阵工厂&a…

数据泄露的平均成本创历史新高

IBM Security 发布了年度数据泄露成本报告&#xff0c;显示数据泄露的全球平均成本在 2023 年达到 445 万美元&#xff0c;创下该报告的历史新高&#xff0c;并且比过去 3 年增加了 15%。 检测和升级成本在同一时间段内跃升了 42%&#xff0c;占违规成本的最高部分&#xff0c…

STL容器详解——map容器

一、map容器介绍 作为关联式容器的一种&#xff0c;map 容器存储的都是 pair 对象&#xff0c;也就是用 pair 类模板创建的键值对。其中&#xff0c;各个键值对的键和值可以是任意数据类型&#xff0c;包括 C 基本数据类型&#xff08;int、double 等&#xff09;、使用结构体…

无涯教程-Lua - 垃圾回收

Lua使用自动内存管理&#xff0c;该管理使用基于Lua内置的某些算法的垃圾回收。 垃圾收集器暂停 垃圾收集器暂停用于控制垃圾收集器之前需要等待多长时间&#xff1b; Lua的自动内存管理再次调用它。值小于100意味着Lua将不等待下一个周期。同样&#xff0c;此值的较高值将导…