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 new 需不需要继续使用
Jul 02 Javascript
jquery validate 自定义验证方法介绍 日期验证
Feb 27 Javascript
js使用循环清空某个div中的input标签值
Sep 29 Javascript
javascript中一些util方法汇总
Jun 10 Javascript
详解Webwork中Action 调用的方法
Feb 02 Javascript
js实现分割上传大文件
Mar 09 Javascript
bootstrap组件之按钮式下拉菜单小结
Jan 19 Javascript
vue实现百度搜索下拉提示功能实例
Jun 14 Javascript
深入理解vuex2.0 之 modules
Nov 20 Javascript
js笔试题-接收get请求参数
Jun 15 Javascript
微信小程序框架的页面布局代码
Aug 17 Javascript
vue实现树形结构样式和功能的实例代码
Oct 15 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
tp5修改(实现即点即改)
2019/10/18 PHP
javascript 混合的构造函数和原型方式,动态原型方式
2009/12/07 Javascript
JS实现根据出生年月计算年龄
2014/01/10 Javascript
使用JQuery实现Ctrl+Enter提交表单的方法
2015/10/22 Javascript
jquery自定义表格样式
2015/11/23 Javascript
Jquery操作Ajax方法小结
2015/11/29 Javascript
JS实现回到页面顶部动画效果的简单实例
2016/05/24 Javascript
微信小程序  wx.request合法域名配置详解
2016/11/23 Javascript
微信小程序 radio单选框组件详解及实例代码
2017/01/10 Javascript
jQuery、layer实现弹出层的打开、关闭功能
2017/06/28 jQuery
jQuery实现的简单获取索引功能示例
2018/06/04 jQuery
vue中img src 动态加载本地json的图片路径写法
2019/04/25 Javascript
ES6函数和数组用法实例分析
2020/05/23 Javascript
python实现的二叉树算法和kmp算法实例
2014/04/25 Python
浅谈python 线程池threadpool之实现
2017/11/17 Python
Python从数据库读取大量数据批量写入文件的方法
2018/12/10 Python
Python中的Socket 与 ScoketServer 通信及遇到问题解决方法
2019/04/01 Python
python requests更换代理适用于IP频率限制的方法
2019/08/21 Python
基于python实现语音录入识别代码实例
2020/01/17 Python
python图形界面开发之wxPython树控件使用方法详解
2020/02/24 Python
Python实现验证码识别
2020/06/15 Python
Python pathlib模块使用方法及实例解析
2020/10/05 Python
python的数学算法函数及公式用法
2020/11/18 Python
英国网上自行车商店:Tredz Bikes
2019/10/29 全球购物
TUMI香港官网:国际领先的行李箱、背囊品牌
2021/03/01 全球购物
在C语言中实现抽象数据类型什么方法最好
2014/06/26 面试题
材料采购员岗位职责
2013/12/17 职场文书
英文道歉信
2015/01/20 职场文书
检讨书范文2000字
2015/01/28 职场文书
写给孩子的新学期寄语
2015/02/27 职场文书
酒店员工手册范本
2015/05/14 职场文书
《围炉夜话》110句人生箴言,精辟有内涵,引人深思
2019/10/23 职场文书
java实现对Hadoop的操作
2021/07/01 Java/Android
如何解决goland,idea全局搜索快捷键失效问题
2022/04/03 Golang
浅谈Redis的事件驱动模型
2022/05/30 Redis
如何利用python实现Simhash算法
2022/06/28 Python