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 相关文章推荐
javascript 模式设计之工厂模式学习心得
Apr 27 Javascript
jquery 笔记 事件
Nov 02 Javascript
js String对象中常用方法小结(字符串操作)
Jan 27 Javascript
jQuery滚动加载图片效果的实现
Mar 06 Javascript
javascript实现阻止iOS APP中的链接打开Safari浏览器
Jun 12 Javascript
jquery中用jsonp实现搜索框功能
Oct 18 Javascript
jquery easyui dataGrid动态改变排序字段名的方法
Mar 02 Javascript
React Native 集成jpush-react-native的示例代码
Aug 16 Javascript
实现一个完整的Node.js RESTful API的示例
Sep 29 Javascript
jQuery扩展方法实现Form表单与Json互相转换的实例代码
Sep 05 jQuery
vue服务端渲染操作简单入门实例分析
Aug 28 Javascript
原生js基于canvas实现一个简单的前端截图工具代码实例
Sep 10 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
一个简易需要注册的留言版程序
2006/10/09 PHP
php绘图中显示不出图片的原因及解决
2014/03/05 PHP
php+mysql实现无限分类实例详解
2015/01/15 PHP
thinkphp的dump函数无输出实例代码
2016/11/15 PHP
Laravel 中使用 Vue.js 实现基于 Ajax 的表单提交错误验证操作
2017/06/30 PHP
laravel框架中表单请求类型和CSRF防护实例分析
2019/11/23 PHP
javascript 嵌套的函数(作用域链)
2010/03/15 Javascript
JS生成不重复随机数组的函数代码
2014/06/10 Javascript
JavaScript实现的GBK、UTF8字符串实际长度计算函数
2014/08/27 Javascript
JavaScript中使用Object.create()创建对象介绍
2014/12/30 Javascript
javascript中call和apply的用法示例分析
2015/04/02 Javascript
JS 通过系统时间限定动态添加 select option的实例代码
2016/06/09 Javascript
JavaScript获取URL中参数querystring的方法详解
2016/10/11 Javascript
javascript设计模式之策略模式学习笔记
2017/02/15 Javascript
Node.js+jade+mongodb+mongoose实现爬虫分离入库与生成静态文件的方法
2017/09/20 Javascript
javascript字体颜色控件的开发 JS实现字体控制
2017/11/27 Javascript
简单明了区分escape、encodeURI和encodeURIComponent
2018/05/26 Javascript
webpack4.x CommonJS模块化浅析
2018/11/09 Javascript
node app 打包工具pkg的具体使用
2019/01/17 Javascript
使用vue-router在Vue页面之间传递数据的方法
2019/07/15 Javascript
ckeditor一键排版功能实现方法分析
2020/02/06 Javascript
[09:13]DOTA2-DPC中国联赛 正赛 Ehome vs Magma 选手采访 1月19日
2021/03/11 DOTA
Python中字符串对齐方法介绍
2015/05/21 Python
Python 判断是否为质数或素数的实例
2017/10/30 Python
Python实现mysql数据库更新表数据接口的功能
2017/11/19 Python
Numpy数据类型转换astype,dtype的方法
2018/06/09 Python
利用Python如何制作好玩的GIF动图详解
2018/07/11 Python
Django 实现外键去除自动添加的后缀‘_id’
2019/11/15 Python
浅谈Python访问MySQL的正确姿势
2020/01/07 Python
python用TensorFlow做图像识别的实现
2020/04/21 Python
CSS3自定义滚动条样式的示例代码
2017/08/21 HTML / CSS
优秀员工事迹材料
2014/12/20 职场文书
狼牙山五壮士观后感
2015/06/09 职场文书
人力资源部工作计划
2019/05/14 职场文书
python实现Nao机器人的单目测距
2021/09/04 Python
Python如何让字典保持有序排列
2022/04/29 Python