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 快捷键设置实现代码
Mar 13 Javascript
JavaScript Sort 表格排序
Oct 31 Javascript
JavaScript 面向对象编程(2) 定义类
May 18 Javascript
js事件监听机制(事件捕获)总结
Aug 08 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之主动触发事件和模拟冒泡处理
Nov 24 Javascript
jQuery Validation PlugIn的使用方法详解
Dec 18 Javascript
AngularJS入门教程引导程序
Aug 18 Javascript
常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全(推荐)
Dec 20 Javascript
AngularJS中update两次出现$promise属性无法识别的解决方法
Jan 05 Javascript
jQuery弹出层插件popShow(改进版)用法示例
Jan 23 Javascript
js 去掉字符串前后空格实现代码集合
Mar 25 Javascript
layui表格checkbox选择全选样式及功能的实例
Mar 07 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加入ftp扩展的解决方法
2013/02/07 PHP
关于PHP自动判断字符集并转码的详解
2013/06/26 PHP
PHP 面向对象程序设计(oop)学习笔记 (四) - 异常处理类Exception
2014/06/12 PHP
thinkphp实现like模糊查询实例
2014/10/29 PHP
php三种实现多线程类似的方法
2015/10/30 PHP
PHP创建多级目录的两种方法
2016/10/28 PHP
PHP与SQL语句写一句话木马总结
2019/10/11 PHP
PHP 实现base64编码文件上传出现问题详解
2020/09/01 PHP
JavaScript 计算当天是本年本月的第几周
2009/03/22 Javascript
基于jquery的时间段实现代码
2012/08/02 Javascript
js添加table的行和列 具体实现方法
2013/07/22 Javascript
javascript实现图片上传前台页面
2015/08/18 Javascript
微信小程序 wxapp内容组件 text详细介绍
2016/10/31 Javascript
vue.js实现单选框、复选框和下拉框示例
2017/07/18 Javascript
浅析Vue自定义组件的v-model
2017/11/26 Javascript
node.js通过axios实现网络请求的方法
2018/03/05 Javascript
webpack实现一个行内样式px转vw的loader示例
2018/09/13 Javascript
JavaScript时间与时间戳的转换操作实例分析
2018/12/07 Javascript
Vue源码解析之数据响应系统的使用
2019/04/24 Javascript
[02:40]2014DOTA2 国际邀请赛中国区预选赛 四大豪门抵达华西村
2014/05/23 DOTA
Python实现将DOC文档转换为PDF的方法
2015/07/25 Python
python 读写中文json的实例详解
2017/10/29 Python
在Django中预防CSRF攻击的操作
2020/03/13 Python
Python函数参数分类原理详解
2020/05/28 Python
python的数学算法函数及公式用法
2020/11/18 Python
一款纯css3实现的tab选项卡的实列教程
2014/12/11 HTML / CSS
语文教育专业推荐信范文
2013/11/25 职场文书
运动会稿件100字
2014/02/21 职场文书
会计学习心得体会
2014/09/09 职场文书
预备党员学习十八届三中全会精神思想汇报
2014/09/13 职场文书
2014年大学学生会工作总结
2014/12/02 职场文书
财务人员岗位职责
2015/02/03 职场文书
挂职锻炼工作总结2015
2015/05/28 职场文书
创业计划书之花店
2019/09/20 职场文书
什么是SOLID
2022/03/24 Javascript
Win11运行cmd提示“请求的操作需要提升”的两种解决方法
2022/07/07 数码科技