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 相关文章推荐
JavaScript中的集合及效率
Jan 08 Javascript
extjs 04_grid 单击事件新发现
Nov 27 Javascript
js实现select下拉框菜单
Dec 08 Javascript
javascript中this指向详解
Apr 23 Javascript
浅谈js for循环输出i为同一值的问题
Mar 01 Javascript
Vue 父子组件的数据传递、修改和更新方法
Mar 01 Javascript
Vue自定义过滤器格式化数字三位加一逗号实现代码
Mar 23 Javascript
layer.open关闭父窗口 以及调用父页面的方法
Aug 17 Javascript
JavaScript实现获取两个排序数组的中位数算法示例
Feb 26 Javascript
通过JS运行机制的角度说说作用域
Mar 12 Javascript
vue移动端屏幕适配详解
Apr 30 Javascript
JS浏览器BOM常见操作实例详解
Apr 27 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
2019年漫画销量排行榜:鬼灭登顶 海贼单卷制霸 尾田盛赞鬼灭
2020/03/08 日漫
资料注册后发信小技巧
2006/10/09 PHP
php中定义网站根目录的常用方法
2010/08/08 PHP
php学习笔记之 函数声明(二)
2011/06/09 PHP
php类中的$this,static,final,const,self这几个关键字使用方法
2015/12/14 PHP
php微信开发之图片回复功能
2018/06/14 PHP
jscript之List Excel Color Values
2007/06/13 Javascript
jquery 学习之二 属性相关
2010/11/23 Javascript
jquery获取radio值实例
2014/10/16 Javascript
JavaScript原生对象之String对象的属性和方法详解
2015/03/13 Javascript
深入学习Bootstrap表单
2016/12/13 Javascript
js以及jquery实现手风琴效果
2020/04/17 Javascript
BootStrap daterangepicker 双日历控件
2017/06/02 Javascript
react native实现往服务器上传网络图片的实例
2017/08/07 Javascript
javascript设计模式 ? 状态模式原理与用法实例分析
2020/04/22 Javascript
JavaScript JSON使用原理及注意事项
2020/07/30 Javascript
解决antd datepicker 获取时间默认少8个小时的问题
2020/10/29 Javascript
微信小程序实现单个或多个倒计时功能
2020/11/01 Javascript
python 常见字符串与函数的用法详解
2018/11/23 Python
python爬虫 爬取58同城上所有城市的租房信息详解
2019/07/30 Python
如何运行带参数的python脚本
2019/11/15 Python
python 实现单通道转3通道
2019/12/03 Python
Django mysqlclient安装和使用详解
2020/09/17 Python
Python中三维坐标空间绘制的实现
2020/09/22 Python
加拿大在线眼镜零售商:SmartBuyGlasses加拿大
2019/05/25 全球购物
Genny意大利官网:意大利高级时装品牌
2020/04/15 全球购物
工程专业毕业生自荐信范文
2013/12/25 职场文书
单位提档介绍信
2014/01/17 职场文书
求职信的七个关键技巧
2014/02/05 职场文书
水污染治理工程专业自荐信
2014/06/21 职场文书
分公司总经理岗位职责
2014/07/30 职场文书
学校政风行风整改方案
2014/10/25 职场文书
村党组织公开承诺书
2015/04/30 职场文书
2015年暑期社会实践方案
2015/07/14 职场文书
python爬取豆瓣电影TOP250数据
2021/05/23 Python
教你用Java Swing实现自助取款机系统
2021/06/11 Java/Android