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 相关文章推荐
Convert Seconds To Hours
Jun 16 Javascript
javascript闭包的理解和实例
Aug 12 Javascript
javascript椭圆旋转相册实现代码
Jan 16 Javascript
jquery 倒计时效果实现秒杀思路
Sep 11 Javascript
JQuery实现绚丽的横向下拉菜单
Dec 19 Javascript
js判断浏览器类型为ie6时不执行
Jun 15 Javascript
详解AngularJS中的表达式使用
Jun 16 Javascript
在Node.js应用中使用Redis的方法简介
Jun 24 Javascript
jquery实现下拉菜单的手风琴效果
Jul 23 jQuery
关于前后端json数据的发送与接收详解
Jul 30 Javascript
浅谈react-native热更新react-native-pushy集成遇到的问题
Sep 30 Javascript
React事件处理的机制及原理
Dec 03 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 之Section与Cookie使用总结
2012/09/14 PHP
smarty循环嵌套用法示例分析
2016/07/19 PHP
PHP实现QQ、微信和支付宝三合一收款码实例代码
2018/02/19 PHP
键盘控制事件应用教程大全
2006/11/24 Javascript
js资料toString 方法
2007/03/13 Javascript
XHTML下,JS浮动代码失效的问题
2009/11/12 Javascript
jquerymobile checkbox及时刷新才能获取其准确值
2012/04/14 Javascript
jQuery 回车事件enter使用示例
2014/02/18 Javascript
5种处理js跨域问题方法汇总
2014/12/04 Javascript
浅谈javascript 函数属性和方法
2015/01/21 Javascript
在线所见即所得HTML编辑器的实现原理浅析
2015/04/25 Javascript
jquery实现手机号码选号的方法
2015/07/31 Javascript
js中编码函数:escape,encodeURI与encodeURIComponent详解
2017/03/21 Javascript
利用yarn代替npm管理前端项目模块依赖的方法详解
2017/09/04 Javascript
swiper移动端轮播插件(触碰图片之后停止轮播)
2017/12/28 Javascript
layui中table表头样式修改方法
2018/08/15 Javascript
浅析vue 函数配置项watch及函数 $watch 源码分享
2018/11/22 Javascript
详解React中合并单元格的正确写法
2019/01/08 Javascript
React如何实现浏览器打印部分内容详析
2019/05/19 Javascript
js实现简单选项卡制作
2020/08/05 Javascript
python实现发送邮件及附件功能
2021/03/02 Python
python使用jieba实现中文分词去停用词方法示例
2018/03/11 Python
500行代码使用python写个微信小游戏飞机大战游戏
2019/10/16 Python
Django通用类视图实现忘记密码重置密码功能示例
2019/12/17 Python
Python3.9.1中使用match方法详解
2021/02/08 Python
Wallis官网:英国女装零售商
2020/01/21 全球购物
EJB包括(SessionBean,EntityBean)说出他们的生命周期,及如何管理事务的
2015/07/24 面试题
高三自我鉴定怎么写
2013/10/19 职场文书
成功的酒店创业计划书
2013/12/27 职场文书
财经学院自荐信范文
2014/02/02 职场文书
维护民族团结演讲稿
2014/08/27 职场文书
正风肃纪查摆剖析材料
2014/10/10 职场文书
社区党建工作汇报材料
2014/10/27 职场文书
义诊活动总结
2015/02/04 职场文书
2016教师校本培训心得体会
2016/01/08 职场文书
python内置模块之上下文管理contextlib
2022/06/14 Python