把图形化验证码引入到vue3项目里面

最新推荐文章于 2024-02-03 15:45:28 发布
最新推荐文章于 2024-02-03 15:45:28 发布
阅读量205 收藏
点赞数
分类专栏： vue 文章标签： javascript 前端 jquery vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_70947033/article/details/129222135
版权

图形化验证码引入到vue3项目里面

如图:
在这里插入图片描述

下面是图形化验证码代码. canvas.html

这个引入了jQuery.js

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>发送验证码</title>
    <style>
        .contain {
            width: 400px;
            height: 200px;
            margin: 100px auto;
        }

        .input-val {
            width: 120px;
            height: 32px;
            border: 1px solid #ddd;
            box-sizing: border-box;
        }

        #canvas {
            vertical-align: middle;
            box-sizing: border-box;
            border: 1px solid #ddd;
            cursor: pointer;
        }

        .btn {
            display: block;
            margin-top: 20px;
            height: 32px;
            width: 100px;
            font-size: 16px;
            color: #fff;
            background-color: #457adb;
            border: none;
            border-radius: 50px;
        }
    </style>
</head>

<body>
    <div class="contain">
        <div class="code">
            <input type="text" value="" placeholder="请输入验证码" class="input-val">
            <canvas id="canvas" width="100" height="30"></canvas>
            <button class="btn">提交</button>
        </div>
    </div>
    <script src="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"></script>
    <script>
 $(function(){
  var show_num = [];
  draw(show_num);
  $("#canvas").on('click',function(){
   draw(show_num);
  })
  $(".btn").on('click',function(){
   var val = $(".input-val").val().toLowerCase();
   var num = show_num.join("");   //用于把数组中的所有元素放入一个字符串。
   if(val==''){
    console.log(val,num);
    // alert('请输入验证码！');
   }else if(val == num){
    console.log(val,num);
    // alert('提交成功！');
    $(".input-val").val('');
    // draw(show_num);
   }else{
    // alert('验证码错误！请重新输入！');
    $(".input-val").val('');
    console.log(val,num);
    // draw(show_num);
   }
  })
 })
 //生成并渲染出验证码图形
 function draw(show_num) {
  var canvas_width=$('#canvas').width();
  var canvas_height=$('#canvas').height();
  var canvas = document.getElementById("canvas");//获取到canvas的对象
  var context = canvas.getContext("2d");//获取到canvas画图的环境
  canvas.width = canvas_width;
  canvas.height = canvas_height;
  var sCode = "a,b,c,d,e,f,g,h,i,j,k,m,n,p,q,r,s,t,u,v,w,x,y,z,A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
  var aCode = sCode.split(",");  //把字符串分割成字符串数组。
  var aLength = aCode.length;//获取到数组的长度
  for (var i = 0; i < 4; i++) { //这里的for循环可以控制验证码位数（如果想显示6位数，4改成6即可）
   var j = Math.floor(Math.random() * aLength);//获取到随机的索引值,random() 方法可返回介于 0（包含） ~ 1（不包含） 之间的一个随机数。
   // var deg = Math.random() * 30 * Math.PI / 180;//产生0~30之间的随机弧度
   var deg = Math.random() - 0.5; //产生一个随机弧度
   var txt = aCode[j];//得到随机的一个内容
   show_num[i] = txt.toLowerCase();
   var x = 10 + i * 20;//文字在canvas上的x坐标
   var y = 20 + Math.random() * 8;//文字在canvas上的y坐标
   context.font = "bold 23px 微软雅黑";
   context.translate(x, y);
   context.rotate(deg);
   context.fillStyle = randomColor();
   context.fillText(txt, 0, 0);
   context.rotate(-deg);
   context.translate(-x, -y);
  }
  for (var i = 0; i <= 5; i++) { //验证码上显示线条
   context.strokeStyle = randomColor();
   context.beginPath();
   context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
   context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
   context.stroke();
  }
  for (var i = 0; i <= 30; i++) { //验证码上显示小点
   context.strokeStyle = randomColor();
   context.beginPath();
   var x = Math.random() * canvas_width;
   var y = Math.random() * canvas_height;
   context.moveTo(x, y);
   context.lineTo(x + 1, y + 1);
   context.stroke();
  }
 }
 //得到随机的颜色值
 function randomColor() {
  var r = Math.floor(Math.random() * 256);
  var g = Math.floor(Math.random() * 256);
  var b = Math.floor(Math.random() * 256);
  return "rgb(" + r + "," + g + "," + b + ")";
 }
    </script>
</body>

</html>

把canvas.html转为一个canvas.vue文件,进行子传父通信

可以在vue项目中安装jQuery

<template>
    <div class="contain">
          <div class="code">
              <input type="text" value="" placeholder="请输入图形验证码" class="input-val">
              <canvas id="canvas" width="120" height="50" @click="imgcode"></canvas>
          </div>
      </div>
</template>

<script >
//引入jQuery
import $ from 'jquery'
import { defineComponent, ref } from 'vue'
 $(function(){ 
  var show_num = [];
  draw(show_num);
 })
 //生成并渲染出验证码图形
 function draw(show_num) {
  var canvas_width=$('#canvas').width();
  var canvas_height=$('#canvas').height();
  var canvas = document.getElementById("canvas");//获取到canvas的对象
  var context = canvas.getContext("2d");//获取到canvas画图的环境
  canvas.width = canvas_width;
  canvas.height = canvas_height;
  var sCode = "a,b,c,d,e,f,g,h,i,j,k,m,n,p,q,r,s,t,u,v,w,x,y,z,A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
  var aCode = sCode.split(",");  //把字符串分割成字符串数组。
  var aLength = aCode.length;//获取到数组的长度
  for (var i = 0; i < 4; i++) { //这里的for循环可以控制验证码位数（如果想显示6位数，4改成6即可）
   var j = Math.floor(Math.random() * aLength);//获取到随机的索引值,random() 方法可返回介于 0（包含） ~ 1（不包含） 之间的一个随机数。
   // var deg = Math.random() * 30 * Math.PI / 180;//产生0~30之间的随机弧度
   var deg = Math.random() - 0.5; //产生一个随机弧度
   var txt = aCode[j];//得到随机的一个内容
   show_num[i] = txt.toLowerCase();
   var x = 10 + i * 20;//文字在canvas上的x坐标
   var y = 20 + Math.random() * 8;//文字在canvas上的y坐标
   context.font = "bold 23px 微软雅黑";
   context.translate(x, y);
   context.rotate(deg);
   context.fillStyle = randomColor();
   context.fillText(txt, 0, 0);
   context.rotate(-deg);
   context.translate(-x, -y);
  }
  for (var i = 0; i <= 5; i++) { //验证码上显示线条
   context.strokeStyle = randomColor();
   context.beginPath();
   context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
   context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
   context.stroke();
  }
  for (var i = 0; i <= 30; i++) { //验证码上显示小点
   context.strokeStyle = randomColor();
   context.beginPath();
   var x = Math.random() * canvas_width;
   var y = Math.random() * canvas_height;
   context.moveTo(x, y);
   context.lineTo(x + 1, y + 1);
   context.stroke();
  }
 }
 //得到随机的颜色值
 function randomColor() {
  var r = Math.floor(Math.random() * 256);
  var g = Math.floor(Math.random() * 256);
  var b = Math.floor(Math.random() * 256);
  return "rgb(" + r + "," + g + "," + b + ")";
 }

export default  defineComponent({
 setup (props, context) {
  const imgcode=()=>{
  var show_num = [];
  draw(show_num);
    var val = $(".input-val").val().toLowerCase();
   var num = show_num.join("");   //用于把数组中的所有元素放入一个字符串。
  console.log(val,num);
  context.emit('code',[val,num]) //向父组件传值
  }
  return{
    imgcode
  }
 }
})
  </script>

<style scoped>
.contain {
  width: 25rem;
    height: 4rem;
}

.input-val {
  display: none;
  width:10.3125rem;
  height: 4rem;
  /* border: 1px solid #ddd; */
  border: none;
  border-bottom: 1px solid #F0F0F0;
  box-sizing: border-box;
  margin-left: -72px;
  outline: none;
}
.input-val:focus{
  border: 1px solid #d1e9ff;
}
.input-val:hover{
  border-bottom: 1px solid #008036;
}
#canvas {
  vertical-align: middle;
  box-sizing: border-box;
  /* border: 1px solid #ddd; */
  cursor: pointer;
  background-color: #fff;
}

.btn {
  display: block;
  margin-top: 20px;
  height: 32px;
  width: 100px;
  font-size: 16px;
  color: #fff;
  background-color: #457adb;
  border: none;
  border-radius: 50px;
}
</style>

父组件接收子组件传过来的验证码

我使用的是ant design vue 组件,可以先安装一下

<template>
<div class="login">
	<a-form :model="formState" name="normal_login" :label-col="labelCol" :wrapper-col="wrapperCol"  @finish="onFinish" @finishFailed="onFinishFailed">
          <a-form-item class="login-title">
            登录/LOGIN
          </a-form-item> 
          <a-form-item class="login-item" name="imag" :rules="[{ required: true, message: '请输入图形验证码!' }]">
              <a-input   v-model:value="formState.imag" placeholder="请输入图形验证码" :bordered="false" allow-clear>
              <template #suffix class="code-img">
              //图形化验证码组件
                <canvases @code="code"></canvases>
              </template>
          </a-input>
          <a-button type="primary" html-type="submit" class="login-form-button" @click="login">
            登录
          </a-button>
          &nbsp;
        </a-form>
</div>
</template>
<script>
import { message } from 'ant-design-vue';
import { defineComponent, reactive, } from 'vue';
import canvases from '../components/canvs'
export default defineComponent({
  components: {
    canvases
  },
  setup() {
    const formState = reactive({
      imag: '',//图形验证码
      num:'',//随机图形验证码     
    });
    const code=(value)=>{//父接收子组件的值
  formState.imag=value[0]
  formState.num=value[1]
  console.log(value);
  // console.log(formState.imag,formState.num);
}
   const login=()=>{//点击登录
      // router.replace('/register')
       if (formState.imag =='') {
        message.info('请输入验证码！');
      }else if(formState.imag==formState.num){
        message.info('提交成功！');
      }else {
        message.info('验证码错误！请重新输入！');
      }
    }
   
    return {
      labelCol: { style: { width: '4.0625rem' } },
      wrapperCol: { style: { width: '20.1875rem', } },
      formState,
      code,
      login
    };
  },
});
</script>

好啦,就这样就成功啦!

常乐-
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用Vue封装canvas图形验证码
fanfan176的博客
07-12 97
【代码】【无标题】
vue3-captcha（vue3行为验证码）
06-20
vue3-captcha（vue3行为验证码）
vue3前端实现图形验证码
spuerSun的博客
05-26 3504
vue3 identify插件使用
java+vue3实现生成、验证图形验证码，和手机短信验证码
Johnson_7的博客
09-15 4564
java+vue3实现生成、验证图形验证码，和手机短信验证码
vue3 图形验证码组件
最新发布
wsdshdhdhd的博客
02-03 669
这是已经封装好的，用到直接复制改改数据就可以。验证的时候可以不区分大小写。
vue3 canvas验证码和滑块拼图验证
Raccon_的博客
10-24 930
在一些资源下载、读取等场景添加人机认证可以防止一些简单的网络攻击。仅介绍两种原生实现。
vue wps插件引入到前端项目js
06-30
wps插件文件 放在src目录下，
vue学习笔记五：在vue项目里面使用引入公共方法详解
10-17
主要介绍了在vue项目里面使用引入公共方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
在Vue项目中引入腾讯验证码服务的教程
08-27
主要介绍了在Vue项目中引入腾讯验证码服务的教程,需要的朋友可以参考下
vue3 纯前端 验证码功能
11-14
vue3 纯前端 验证码功能
vue插件——使用canvas生成图形验证码
08-12
This is a digital graphic verification code written in canvas(这是一个vue的插件，使用canvas来生成图形验证码)
20_ant_完整操作一个用户管理的小例子_实现了验证码
10-26
20_ant_完整操作一个用户管理的小例子_实现了验证码20_ant_完整操作一个用户管理的小例子_实现了验证码
vue3+canvas实现数字验证码
Dj_Fairy的博客
02-24 255
【代码】vue3+canvas实现数字验证码。
vue3 实现登录验证码
weixin_71403100的博客
08-22 8624
vue3项目----实现登录验证码vue3项目前提条件：已安装引入【element-plus】，【vue-router@4】，【sass】等。
vue项目 - 基于canvas的图形验证码
weixin_42566558的博客
07-24 905
vue项目 - 基于canvas的图形验证码------收藏篇 <template> <el-form class="login-form" status-icon :rules="loginRules" ref="loginForm" :model="loginForm" label-width="80px"> <el-form-item p...
vue3+elementplus前端生成图片验证码
yuanye01的博客
08-21 2377
使用npm i identify --save 或者 yarn add identify --save。3、一般是登录页面用到这个，在你的登录页面的from表单的相应位置加上填写验证码的html。2、新建vue组件components/identify/identify.vue。4、在script下引入组件，并编写方法。
vue3 随机生成验证码
zlc516的博客
09-11 1729
直接上代码 <template> <div class="img-verify"> <canvas ref="verify" :width="width" :height="height" @click="handleDraw"></canvas> </div> </template> js setup() { const verify = ref(null) const state = rea
Vue3问题：如何实现拼图验证+邮箱登录功能？前后端！
m0_74802419的博客
11-15 755
在登录页面，输入邮箱，点击发送验证码，此时会弹出拼图验证。 用户向右滑动滑块，到达指定缺口位置，就会验证成功。若验证失败，则会刷新拼图，需要重新滑动。 当拼图验证成功后，发送验证码按钮就会显示数字倒计时效果，然后此时会在对应邮箱收到验证码。
vue3 点击更换验证码图片以及登录不成功后更换验证码
Bannerparter的博客
08-15 1638
PS:必须加时间戳或者后面随机拼接随机数或者字符串）然后是点击验证码更换，dom元素上的写法。先将验证码地址给存起来，方便后续操作。这是基于后端已经生成验证码的情况。当登录失败自动时更换验证码。...
vue实现图形验证码登录
07-25
Vue可以通过使用第三方库来实现图形验证码登录。下面我会给你一个基本的实现步骤： 1. 首先，需要安装一个适用于Vue的图形验证码库，比如`vue-verify-code`。通过运行以下命令进行安装： ``` npm install vue-verify-code ``` 2. 在你的Vue组件中，导入所需的库，并使用它来生成图形验证码。在模板中添加一个`<verify-code>`标签来展示图形验证码，如下所示： ```vue <template> <div> <verify-code ref="verifyCode"></verify-code> <button @click="refreshCode">刷新验证码</button> <input type="text" v-model="inputCode" placeholder="请输入验证码"> <button @click="verifyCode">验证</button> </div> </template> <script> import VerifyCode from 'vue-verify-code'; export default { components: { VerifyCode }, data() { return { inputCode: '' }; }, methods: { refreshCode() { this.$refs.verifyCode.refresh(); }, verifyCode() { const result = this.$refs.verifyCode.verify(this.inputCode); if (result) { // 验证通过，执行登录操作 // ... } else { // 验证失败，提示用户重新输入 // ... } } } } </script> ``` 3. 上述代码中，通过`this.$refs.verifyCode.refresh()`方法可以刷新验证码，而`this.$refs.verifyCode.verify(this.inputCode)`方法可以用于验证用户输入的验证码是否正确。根据验证结果，你可以执行相应的操作。 请注意，上述代码只是一个简单的示例，你需要根据具体的需求进行适当的修改和扩展。另外，确保你已经在项目中导入了相关的CSS文件，以使图形验证码正常显示。 希望以上内容对你有所帮助！如有其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值