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 相关文章推荐
js 获取、清空input type=&quot;file&quot;的值(示例代码)
Dec 24 Javascript
js post提交调用方法
Feb 12 Javascript
js 事件截取enter按键页面提交事件示例代码
Mar 04 Javascript
实现js保留小数点后N位的代码
Nov 13 Javascript
Javascript无参数和有参数类继承问题解决方法
Mar 02 Javascript
JavaSacript中charCodeAt()方法的使用详解
Jun 05 Javascript
jQuery点击头像上传并预览图片
Feb 23 Javascript
微信小程序滚动Tab实现左右可滑动切换
Aug 17 Javascript
jquery实现左右轮播切换效果
Jan 01 jQuery
Vuex入门到上手教程
Jun 20 Javascript
微信小程序canvas.drawImage完全显示图片问题的解决
Nov 30 Javascript
JavaScript实现显示和隐藏图片
Apr 29 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
php入门学习知识点五 关于php数组的几个基本操作
2011/07/14 PHP
php返回相对时间(如:20分钟前,3天前)的方法
2015/04/14 PHP
php操作MongoDB类实例
2015/06/17 PHP
PHP中的Trait 特性及作用
2016/04/03 PHP
PHP 中TP5 Request 请求对象的实例详解
2017/07/31 PHP
PHP操作MongoDB实现增删改查功能【附php7操作MongoDB方法】
2018/04/24 PHP
详解在YII2框架中使用UEditor编辑器发布文章
2018/11/02 PHP
javascript中的parseInt和parseFloat区别
2013/07/12 Javascript
Firefox下无法正常显示年份的解决方法
2014/09/04 Javascript
node.js使用require()函数加载模块
2014/11/26 Javascript
js实现鼠标悬停图片上时滚动文字说明的方法
2015/02/17 Javascript
jQuery实现模仿微博下拉滚动条加载数据效果
2015/12/25 Javascript
jQuery Ajax 实例代码 ($.ajax、$.post、$.get)
2016/04/29 Javascript
jQuery中Find选择器用法示例
2016/09/21 Javascript
react-native 完整实现登录功能的示例代码
2017/09/11 Javascript
vue2.0 better-scroll 实现移动端滑动的示例代码
2018/01/25 Javascript
浅谈webpack 自动刷新与解析
2018/04/09 Javascript
微信小程序自定义组件实现环形进度条
2020/11/17 Javascript
vue.js实现照片放大功能
2020/06/23 Javascript
[02:38]2018年度DOTA2最佳劣单位选手-完美盛典
2018/12/17 DOTA
Python中for循环详解
2014/01/17 Python
Python基础之getpass模块详细介绍
2017/08/10 Python
python正向最大匹配分词和逆向最大匹配分词的实例
2018/11/14 Python
对Python信号处理模块signal详解
2019/01/09 Python
Python设计模式之观察者模式原理与用法详解
2019/01/16 Python
对python numpy.array插入一行或一列的方法详解
2019/01/29 Python
Python中注释(多行注释和单行注释)的用法实例
2019/08/28 Python
理肤泉加拿大官网:La Roche-Posay加拿大
2018/07/06 全球购物
英国银首饰公司:e&e Jewellery
2021/02/11 全球购物
历史学专业个人的自我评价
2013/10/13 职场文书
《钱学森》听课反思
2014/03/01 职场文书
医院护士工作检讨书
2014/10/26 职场文书
联欢会开场白
2015/06/01 职场文书
2015年十月一日放假通知
2015/08/18 职场文书
《孙子兵法》:欲成大事者,需读懂这些致胜策略
2019/08/23 职场文书
Python爬虫 简单介绍一下Xpath及使用
2022/04/26 Python