vue添加图形验证码功能

上图看功能，每点击一次切换验证码！前端判断验证码是否输入，后端判断验证码是否正确！

html

<el-form-item label="验证码" prop="code" style="width: 570px"><el-input v-model="ruleForm.code" placeholder="请输入验证码" size="small" style="width: 187px;float: left;"></el-input><div class="Verification" @click="clickVerification"><img :src="VerificationImg"/></div></el-form-item>

data() {return {VerificationImg:"",//图形验证码链接}},
methods: {//获取验证码clickVerification(){var num = Math.random();this.imgUrls(num)},imgUrls(num){this.VerificationImg="http://farming.wowocode.com:8081/captcha/new?height=40&width=160&font_size=20?"+num}
},
mounted() {this.imgUrls(0.1)
}<style>
.Verification{width: 160px;height: 40px;background: #ccc;float: left;margin-left: 20px;}
<style>

思路：

为什么要加一个Math.random()——如果新的图片跟旧的图片地址不一样，效果是会出来的。即：图片有发生改变。但像”验证码“这种功能。新旧图片的地址是一样的。鉴于上述情况，怀疑有可能是因为图片地址是一样的，而导致浏览器自动读缓存。所以加一个随机的数字，每次都在变就正常刷新地址了！

更多技巧请查看vue专栏 https://blog.csdn.net/qq_42221334/column/info/27230/1

vue添加图形验证码功能相关推荐

SpringSecurity添加图形验证码认证功能
SpringSecurity添加图形验证码认证功能第一步:图形验证码接口 1.使用第三方的验证码生成工具Kaptcha https://github.com/penggle/kaptcha @Con ...
springboot+vue实现手机验证码功能
springboot+vue实现手机验证码功能榛子云短信平台用户中心注册登录(有免费的一条消息,剩下的需要买)(阿里云个人得备案) 在springboot中加入依赖,用到了redis,阿里的fast ...
手机直播系统开发中关于iOS获取图形验证码功能
在手机直播系统开发中关于iOS获取图形验证码功能介绍,首先进入注册页面后请求图形验证码接口获取图形验证码的数字组合,然后加载到相应的页面上,在图形验证码页面我们定义了几个属性,字符串的数量.显示的线条 ...
VUE简易图形验证码
VUE简易图形验证码直接进入正题一.安装indetify npm install identify 二.创建一个组件对是一个组件将下面代码直接复制进组件即可 <template>& ...
php图形验证码颜色,PHP实现生成带背景的图形验证码功能
本文实例讲述了PHP实现生成带背景的图形验证码功能.分享给大家供大家参考,具体如下: 以前我们利用php生成的都是无背景或同一色彩背景的验证码了,但这种验证容易给机器识别了,这里就来介绍一些生成带背景 ...
Spring Security添加图形验证码
Spring Security添加图形验证码大致思路: 1.根据随机数生成验证码图片 2.将验证码图片显示到登录页面 3.认证流程中加入验证码校验依赖 <dependency>< ...
在vue项目或者react项目中实现图形验证码功能
效果演示使用说明我对这个图形验证码做了一个组件的封装,如果你的项目是vue项目就粘贴vue章节的组件代码,是react项目就粘贴react章节的组件代码.组件的使用很简单,只需要传递一个prop, ...
4.Spring Security 添加图形验证码
添加验证码大致可以分为三个步骤:根据随机数生成验证码图片:将验证码图片显示到登录页面:认证流程中加入验证码校验.Spring Security的认证校验是由UsernamePasswordAuthen ...
图形验证码功能php,图形验证码的实现
登录时,没有图形验证码的话,很容被机器人进行模拟登录,对网站安全有很大的威胁.因此,验证码是登录功能所必须的.下面,我们就给我们的登录功能,加上验证码. ## 下面功能相关的目录 ![](https: ...

vue添加图形验证码功能

思路：

vue添加图形验证码功能相关推荐

最新文章

热门文章