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


Posted in Javascript onDecember 10, 2019

效果图:

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

1.html代码

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

<div class="form-group" style="display: flex;">
   <div>
   <span>验证码:</span>
   <input type="text" id="code" v-model="code" class="code" placeholder="请输入您的验证码" />
   </div>
   <div class="login-code" @click="refreshCode">
  <!--验证码组件-->
  <s-identify :identifyCode="identifyCode"></s-identify>
  </div>
  </div>

2.css样式

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

/*验证码样式*/
.code{
 width:124px;
 height:31px;
 border:1px solid rgba(186,186,186,1);
}
.login-code{
 cursor: pointer;
}

CSS 代码

3.js引入验证码组件,并且定义三个变量。

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

import SIdentify from '../components/sidentify'

components: { SIdentify },
data () {
 return {
 identifyCodes: "1234567890",
 identifyCode: "",
 code:"",//text框输入的验证码
 }
},

引入验证码组件,以及需要定义的变量

4.mounted里的代码

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

mounted(){
 this.identifyCode = "";
 this.makeCode(this.identifyCodes, 4);
},

mounted代码

5.在created里初始化验证码

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

6.methods里添加以下方法。

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

//验证码
randomNum(min, max) {
 return Math.floor(Math.random() * (max - min) + min);
},
 
refreshCode() {
 this.identifyCode = "";
 this.makeCode(this.identifyCodes, 4);
},
makeCode(o, l) {
 for (let i = 0; i < l; i++) {
 this.identifyCode += this.identifyCodes[
  this.randomNum(0, this.identifyCodes.length)
 ];
 }
 console.log(this.identifyCode);
},

需要用到的方法

在提交表单的时候对验证码进行判断。

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

sidentify.vue组件代码:

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

代码:

<template>
 <div class="s-canvas">
 <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas>
 </div>
</template>
<script>
export default {
 name: 'SIdentify',
 props: {
 identifyCode: {
  type: String,
  default: '1234'
 },
 fontSizeMin: {
  type: Number,
  default: 25
 },
 fontSizeMax: {
  type: Number,
  default: 30
 },
 backgroundColorMin: {
  type: Number,
  default: 255
 },
 backgroundColorMax: {
  type: Number,
  default: 255
 },
 colorMin: {
  type: Number,
  default: 0
 },
 colorMax: {
  type: Number,
  default: 160
 },
 lineColorMin: {
  type: Number,
  default: 100
 },
 lineColorMax: {
  type: Number,
  default: 255
 },
 dotColorMin: {
  type: Number,
  default: 0
 },
 dotColorMax: {
  type: Number,
  default: 255
 },
 contentWidth: {
  type: Number,
  default: 112
 },
 contentHeight: {
  type: Number,
  default: 31
 }
 },
 methods: {
 // 生成一个随机数
 randomNum(min, max) {
  return Math.floor(Math.random() * (max - min) + min)
 },
 // 生成一个随机的颜色
 randomColor(min, max) {
  let r = this.randomNum(min, max)
  let g = this.randomNum(min, max)
  let b = this.randomNum(min, max)
  return 'rgb(' + r + ',' + g + ',' + b + ')'
 },
 drawPic() {
  let canvas = document.getElementById('s-canvas')
  let 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'
  let x = (i + 1) * (this.contentWidth / (this.identifyCode.length + 1))
  let 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 < 5; 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 < 80; 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()
  }
 }
 },
 watch: {
 identifyCode() {
  this.drawPic()
 }
 },
 mounted() {
 this.drawPic()
 }
}
</script>
<style scoped>
.s-canvas {
 height: 38px;
 
}
.s-canvas canvas{
 margin-top: 1px;
 margin-left: 8px;
}
</style>

这篇文章是我参考别人写的,很感谢那个博主。

总结

以上所述是小编给大家介绍的vue实现随机验证码功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
用js生产批量批处理执行命令
Jul 28 Javascript
javascript运行机制之this详细介绍
Feb 07 Javascript
js单词形式的运算符
May 06 Javascript
js通过iframe加载外部网页的实现代码
Apr 05 Javascript
javascript实现自动填写表单实例简析
Dec 02 Javascript
jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象
Jun 20 Javascript
js事件冒泡、事件捕获和阻止默认事件详解
Aug 04 Javascript
Canvas放置反弹效果随机图形(实例)
Aug 17 Javascript
Django与Vue语法的冲突问题完美解决方法
Dec 14 Javascript
react router4+redux实现路由权限控制的方法
May 03 Javascript
详解适配器在JavaScript中的体现
Sep 28 Javascript
node.js中ws模块创建服务端和客户端,网页WebSocket客户端
Mar 06 Javascript
vue实现短信验证码登录功能(流程详解)
Dec 10 #Javascript
基于vue实现图片验证码倒计时60s功能
Dec 10 #Javascript
使用Bootstrap做一个朝代历史表
Dec 10 #Javascript
JS实现拼图游戏
Jan 29 #Javascript
Vue的transition-group与Virtual Dom Diff算法的使用
Dec 09 #Javascript
Vue实现渲染数据后控制滚动条位置(推荐)
Dec 09 #Javascript
element-ui如何防止重复提交的方法步骤
Dec 09 #Javascript
You might like
一个显示某段时间内每个月的方法 返回由这些月份组成的数组
2012/05/16 PHP
php中使用preg_replace函数匹配图片并加上链接的方法
2013/02/06 PHP
基于php实现的验证码小程序
2016/12/13 PHP
js资料toString 方法
2007/03/13 Javascript
JQuery从头学起第二讲
2010/07/04 Javascript
没有document.getElementByName方法
2013/08/19 Javascript
JavaScript获取伪元素(Pseudo-Element)属性的方法技巧
2015/03/13 Javascript
jQuery使用drag效果实现自由拖拽div
2015/06/11 Javascript
javascript常用的方法整理
2015/08/20 Javascript
Bootstrap每天必学之进度条
2015/11/30 Javascript
Jquery和angularjs获取check框选中的值的方法汇总
2016/01/17 Javascript
BootStrap下拉框在firefox浏览器界面不友好的解决方案
2016/08/18 Javascript
nodejs动态创建二维码的方法
2017/08/12 NodeJs
vue-router之nuxt动态路由设置的两种方法小结
2018/09/26 Javascript
微信小程序时间轴实现方法示例
2019/01/14 Javascript
vue表单验证你真的会了吗?vue表单验证(form)validate
2019/04/07 Javascript
JavaScript字符串处理常见操作方法小结
2019/11/15 Javascript
详解Typescript 内置的模块导入兼容方式
2020/05/31 Javascript
JavaScript 如何在浏览器中使用摄像头
2020/12/02 Javascript
Python正则捕获操作示例
2017/08/19 Python
python 给DataFrame增加index行名和columns列名的实现方法
2018/06/08 Python
python实现机器学习之元线性回归
2018/09/06 Python
Python中作用域的深入讲解
2018/12/10 Python
python实现对输入的密文加密
2019/03/20 Python
Python数据可视化 pyecharts实现各种统计图表过程详解
2019/08/15 Python
在Django下创建项目以及设置settings.py教程
2019/12/03 Python
使用python图形模块turtle库绘制樱花、玫瑰、圣诞树代码实例
2020/03/16 Python
Python判断字符串是否为空和null方法实例
2020/04/26 Python
html5 worker 实例(二) 图片变换效果
2013/06/24 HTML / CSS
用canvas画心电图的示例代码
2018/09/10 HTML / CSS
请描述一下”is a”关系和”has a”关系
2015/02/03 面试题
和平主题的演讲稿
2014/01/12 职场文书
四风问题个人自查剖析材料思想汇报
2014/09/21 职场文书
法英专业大学生职业生涯规划范文:衡外情,量己力!
2014/09/23 职场文书
万能密码的SQL注入漏洞其PHP环境搭建及防御手段
2021/09/04 SQL Server
Redis中key的过期删除策略和内存淘汰机制
2022/04/12 Redis