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


Posted in Javascript onApril 30, 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;
}

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);
 },

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 文字符串转换unicode编码函数
May 30 Javascript
Jsonp 跨域的原理以及Jquery的解决方案
Jun 27 Javascript
Js参数值中含有单引号或双引号问题的解决方法
Nov 06 Javascript
TypeScript学习之强制类型的转换
Dec 27 Javascript
AngularJS 控制器 controller的详解
Oct 17 Javascript
关于vue中watch检测到不到对象属性的变化的解决方法
Feb 08 Javascript
解决使用Vue.js显示数据的时,页面闪现原始代码的问题
Feb 11 Javascript
解决vuejs 使用value in list 循环遍历数组出现警告的问题
Sep 26 Javascript
解决Vue开发中对话框被遮罩层挡住的问题
Nov 26 Javascript
js实现移动端轮播图
Dec 21 Javascript
jquery ui 实现 tab标签功能示例【测试可用】
Jul 25 jQuery
element-ui中el-upload多文件一次性上传的实现
Dec 02 Javascript
详解vue 图片上传功能
Apr 30 #Javascript
vue移动端屏幕适配详解
Apr 30 #Javascript
vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component
Apr 30 #Javascript
微信小程序时间戳转日期的详解
Apr 30 #Javascript
使用 Vue cli 3.0 构建自定义组件库的方法
Apr 30 #Javascript
vue自动路由-单页面项目(非build时构建)
Apr 30 #Javascript
vue-router 前端路由之路由传值的方式详解
Apr 30 #Javascript
You might like
Drupal7 form表单二次开发要点与实例
2014/03/02 PHP
php通过分类列表产生分类树数组的方法
2015/04/20 PHP
PHP实现链式操作的三种方法详解
2017/11/16 PHP
PHP排序二叉树基本功能实现方法示例
2018/05/26 PHP
php实现微信公众号企业转账功能
2018/10/01 PHP
JavaScript 学习笔记(十六) js事件
2010/02/01 Javascript
jquery lazyload延迟加载技术的实现原理分析
2011/01/24 Javascript
js动态添加事件并可传参数示例代码
2013/10/21 Javascript
jQuery中ajax的使用与缓存问题的解决方法
2013/12/19 Javascript
Extjs grid添加一个图片状态或者按钮的方法
2014/04/03 Javascript
JS版的date函数(和PHP的date函数一样)
2014/05/12 Javascript
jQuery实现数字加减效果汇总
2014/12/16 Javascript
jQuery模拟黑客帝国矩阵效果实例
2015/06/28 Javascript
js限制文本框的输入内容代码分享(3类)
2015/08/20 Javascript
BootStrap中的table实现数据填充与分页应用小结
2016/05/26 Javascript
Three.js学习之文字形状及自定义形状
2016/08/01 Javascript
Node.js 日志处理模块log4js
2016/08/28 Javascript
微信小程序图片自适应支持多图实例详解
2017/06/21 Javascript
vue.js轮播图组件使用方法详解
2018/07/03 Javascript
layui 表格操作列按钮动态显示的实现方法
2019/09/06 Javascript
js实现小星星游戏
2020/03/23 Javascript
vue中destroyed方法的使用说明
2020/07/21 Javascript
用Python输出一个杨辉三角的例子
2014/06/13 Python
详解python爬虫系列之初识爬虫
2019/04/06 Python
Python中新式类与经典类的区别详析
2019/07/10 Python
Python的对象传递与Copy函数使用详解
2019/12/26 Python
Pandas的数据过滤实现
2021/01/15 Python
怎样声明子类
2013/07/02 面试题
办公室保洁员岗位职责
2013/12/02 职场文书
优秀应届毕业生推荐信
2014/02/18 职场文书
幼儿园老师寄语
2014/04/03 职场文书
经销商年会策划方案
2014/05/29 职场文书
森林病虫害防治方案
2014/06/02 职场文书
教师民族团结演讲稿
2014/08/27 职场文书
上课玩手机的检讨书
2014/10/01 职场文书
分析JVM源码之Thread.interrupt系统级别线程打断
2021/06/29 Java/Android