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 相关文章推荐
Mootools 1.2教程 输入过滤第一部分(数字)
Sep 15 Javascript
浅析jQuery的链式调用之each函数
Dec 03 Javascript
数组方法解决JS字符串连接性能问题有争议
Jan 12 Javascript
JavaScript function函数种类详解
Feb 22 Javascript
JS获取IMG图片高宽的简单实例
May 17 Javascript
微信小程序使用第三方库Underscore.js步骤详解
Sep 27 Javascript
easyui form validate总是返回false的原因及解决方法
Nov 07 Javascript
Vuex之理解state的用法实例
Apr 19 Javascript
vue实现点击图片放大效果
Aug 15 Javascript
浅谈JavaScript find 方法不支持IE的问题
Sep 28 Javascript
微信小程序非跳转式组件授权登录的方法示例
May 22 Javascript
微信小程序项目总结之记账小程序功能的实现(包括后端)
Aug 20 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
php 页面执行时间计算代码
2008/12/04 PHP
php下保存远程图片到本地的办法
2010/08/08 PHP
PHP 第二节 数据类型之转换
2012/04/28 PHP
浅析PHP递归函数返回值使用方法
2013/02/18 PHP
ThinkPHP自动转义存储富文本编辑器内容导致读取出错的解决方法
2014/08/08 PHP
php单例模式实现方法分析
2015/03/14 PHP
PHP模版引擎原理、定义与用法实例
2019/03/29 PHP
laravel5.6实现数值转换
2019/10/23 PHP
javascript之水平横向滚动歌词同步的应用
2007/05/07 Javascript
js中的scroll和offset 使用比较的实例与分析
2013/09/29 Javascript
JS获取计算机mac地址以及IP的实现方法
2014/01/08 Javascript
IE浏览器IFrame对象内存不释放问题解决方法
2014/08/22 Javascript
多种JQuery循环滚动文字图片效果代码
2020/06/23 Javascript
jquery checkbox的相关操作总结
2016/10/17 Javascript
jQuery实现菜单栏导航效果
2017/08/15 jQuery
js中的 || 与 &amp;&amp; 运算符详解
2018/05/24 Javascript
React styled-components设置组件属性的方法
2018/08/07 Javascript
vue实现固定位置显示功能
2019/05/30 Javascript
layui实现下拉框三级联动
2019/07/26 Javascript
微信小程序实现转盘抽奖
2020/09/21 Javascript
python中的reduce内建函数使用方法指南
2014/08/31 Python
Python静态类型检查新工具之pyright 使用指南
2019/04/26 Python
利用PyCharm操作Github(仓库新建、更新,代码回滚)
2019/12/18 Python
Python使用shutil模块实现文件拷贝
2020/07/31 Python
编译 pycaffe时报错:fatal error: numpy/arrayobject.h没有那个文件或目录
2020/11/29 Python
Meli Melo官网:名媛们钟爱的英国奢侈手包品牌
2017/04/17 全球购物
预订奥兰多和佛罗里达州公园门票:FloridaTix
2018/01/03 全球购物
高一物理教学反思
2014/01/24 职场文书
学校消防演习方案
2014/02/19 职场文书
会计核算科岗位职责
2014/03/19 职场文书
信用卡工作证明范本
2015/06/19 职场文书
二十年同学聚会致辞
2015/07/28 职场文书
初中政治教学工作总结
2015/08/13 职场文书
导游词之山东孔庙
2019/11/04 职场文书
JavaWeb实现显示mysql数据库数据
2022/03/19 Java/Android
vue递归实现树形组件
2022/07/15 Vue.js