VUE实现图片验证码功能

本文实例为大家分享了VUE实现图片验证码的具体代码，供大家参考，具体内容如下

1. 概述

1.1 说明

在开发过程中，有时候需要使用图片验证码进行增加安全强度，在点击图片时更新新的图片验证码，记录此功能，以便后期使用。

2. 示例

2.1 vue示例代码

<template>
 <el-form style="width: 400px;">
 <el-form-item style="height: 40px;margin-bottom: 20px;">
  <el-input class="input" maxlength="8" placeholder="请输入验证码"></el-input>
  <div class="divIdentifyingCode" @click="getIdentifyingCode(true)">
  <img id="imgIdentifyingCode" style="height:40px; width: 100px; cursor: pointer;" alt="点击更换"
    title="点击更换" />
  </div>
 </el-form-item>
 </el-form>
</template>

<script>
export default {
 methods: {
 /**
  * 窗口代码
  * @param {Boolean} bRefresh 是否刷新
  */
 getIdentifyingCode: function (bRefresh) {
  let identifyCodeSrc = "https://www.xxx.xxx.xxx/imgCode";
  if (bRefresh) {
  identifyCodeSrc = "https://www.xxx.xxx.xxx/imgCode?" + Math.random();
  }
  let objs = document.getElementById("imgIdentifyingCode");
  objs.src = identifyCodeSrc;
 },
 }
}
</script>

<style>
 .divIdentifyingCode {
 position: absolute;
 top: 0;
 right: 0;
 z-index: 5;
 width: 102px; /*设置图片显示的宽*/
 height: 40px; /*图片显示的高*/
 background: #e2e2e2;
 margin: 0;
 }
</style>

注意：使用 Math.random() 来获取新的验证码，后台支持使用接口获取验证码。

2.2 显示

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • VUE接入腾讯验证码功能（滑块验证）备忘

    VUE接入腾讯验证码功能（滑块验证）备忘

    最近在用VUE做个简单的用户系统,登录注册需要验证码,想找个那种拖动的,找geetest居然已经不面向小客户了(或者说只有收费套餐). 腾讯防水墙的验证码免费使用,有2000/小时的免费额度,对于小网站完全足够了,阿里应该也有,我看discuz有插件直接能用,但没找到入口 腾讯的在这,和腾讯云无关:https://007.qq.com/captcha/#/  申请api很简单,QQ登录,创建应用,ID和secretkey就出来了,直接在文档里展示,赞一个. vue有人做了封装了geetest+腾

  • Vue中添加手机验证码组件功能操作方法

    什么是组件: 组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTML元素的形式,以is特性扩展. 写在前面: 今天要实现的功能是在 完善个人信息页面(vue)中添加手机验证码组件,当用户点击 手机选项时,弹出获取验证码组件,完成验证手机的功能: 这里考虑到功能的复用,我把当前弹出手机验证码的操作放在了单独的组件中: <template > <div>

  • Vue写一个简单的倒计时按钮功能

    在项目开发里,我们经常会遇到发送验证码.点击了之后有60秒倒计时的按钮,很常见却也很简单,但是在写这个按钮的时候有个别地方还要注意下,今天写出来,如有问题欢迎指正! 完成的效果如下: 为了更快显示出效果,我把时间设成了5秒.按钮在点击之后会出现倒计时,同时按钮变为不可点击状态,样式也发生变化,鼠标悬浮上的样子也会发生变化. 接下来我们用代码来实现: <button class="button" @click="countDown"> {{content}

  • vue 验证码界面实现点击后标灰并设置div按钮不可点击状态

    1.先看看效果图 未点击获取验证码的按钮状态 点击后的不可点击状态 2.代码实现 <template> <div class="my-code"> <input class="my-code-input" type="text" v-model="login_form.captcha" placeholder="Your Captcha"> <div class=&

  • vue实现登录页面的验证码以及验证过程解析(面向新手)

    vue实现登录页面的验证码以及验证过程解析(面向新手)

    做成之后就 是这个样子 接下来上代码 创建一个组件.显示验证码图片 <template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas> </div> </template> <script>

  • VUE实现图片验证码功能

    VUE实现图片验证码功能

    本文实例为大家分享了VUE实现图片验证码的具体代码,供大家参考,具体内容如下 1. 概述 1.1 说明 在开发过程中,有时候需要使用图片验证码进行增加安全强度,在点击图片时更新新的图片验证码,记录此功能,以便后期使用. 2. 示例 2.1 vue示例代码 <template> <el-form style="width: 400px;"> <el-form-item style="height: 40px;margin-bottom: 20px;

  • 基于vue实现图片验证码倒计时60s功能

    1.基于VUE实现图片验证码 html: <div class="formItem pr"> <img src="../../image/icon2.png" alt=""> <input type="text" placeholder="请输入验证码"> <img :src="IdentifyingCode" alt="图文验证码&q

  • vue+SSM实现验证码功能

    源码:https://github.com/HannahLihui/StudentManager-SSM/tree/master/SSM-git/StudentManager-SSM-master 1.前端有一个img引入,这里this.src=this.src+'?'就会调用映射到后台的checkCode <el-form-item prop="code"> <img src="checkCode" alt="" width=

  • java web中图片验证码功能的简单实现方法

    用户在注册网站信息的时候基本上都要数据验证码验证.那么图片验证码功能该如何实现呢? 大概步骤是: 1.在内存中创建缓存图片 2.设置背景色 3.画边框 4.写字母 5.绘制干扰信息 6.图片输出 废话不多说,直接上代码 package com.lsgjzhuwei.servlet.response; import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt.image.Buffer

  • 纯JS实现图片验证码功能并兼容IE6-8(推荐)

    纯JS实现图片验证码功能并兼容IE6-8(推荐)

    最近要搞一个图片验证码功能,但是又不想自己写后台代码.于是自己准备搞一个纯前端的验证码功能,于是网上搜索了一下,找到一个插件gVerify.js,简单好用,实现完美.不过后面接到说要兼容IE8,想想也是醉了.万恶的IE,不过也还好,也没有想着在去找插件,准备自己搞一搞,顺便拿来学习一下并加强自己的知识.下面看我是如何搞定它的,虽然花了一点时间,不过也值得. 使用方法 使用特别简单,定义一个DIV一验证码输入框,引入下载的js插件,创建一个GVerify对象,参数可以自定义一些或者传入DIV的ID

  • Spring Security 图片验证码功能的实例代码

    验证码逻辑 以前在项目中也做过验证码,生成验证码的代码网上有很多,也有一些第三方的jar包也可以生成漂亮的验证码.验证码逻辑很简单,就是在登录页放一个image标签,src指向一个controller,这个Controller返回把生成的图片以输出流返回给页面,生成图片的同时把图片上的文本放在session,登录的时候带过来输入的验证码,从session中取出,两者对比.这位老师讲的用Spring Security集成验证码,大体思路和我说的一样,但更加规范和通用些. spring securi

  • vue实现随机验证码功能的实例代码

    vue实现随机验证码功能的实例代码

    1.html代码 <div class="form-group" style="display: flex;"> <div> <span>验证码:</span> <input type="text" id="code" v-model="code" class="code" placeholder="请输入您的验证码&quo

  • django中的图片验证码功能

    python的验证码库(captcha) 将验证码做成这样: 是不是和各大网页的图片源地址是一样,话不多说,让我们看代码: 我是用django和python中的captcha库做成 的 创建一个captcha_image.py: from captcha.image import ImageCaptcha import random class Captcha_Get(): def __init__(self, CHAR_SET = ['0', '1', '2', '3', '4', '5',

  • python自动化实现登录获取图片验证码功能

    主要记录一下:图片验证码 1.获取登录界面的图片 2.获取验证码位置 3.在登录页面截取验证码保存 4.调用百度api识别(目前准确率较高的识别图片api) 本次登录的系统页面,可以看到图片验证码的位置 from selenium import webdriver import time from PIL import Image base_url = '***********' browser = webdriver.Chrome() browser.maximize_window() bro

  • vue实现随机验证码功能(完整代码)

    效果图: 1.html代码 <div class="form-group" style="display: flex;"> <div> <span>验证码:</span> <input type="text" id="code" v-model="code" class="code" placeholder="请输入您的验证

随机推荐