vue实现登录页面的验证码以及验证过程解析(面向新手)


Posted in Javascript onAugust 02, 2019

做成之后就

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: 35
  },
  backgroundColorMin: { // 验证码图片背景色最小值
   type: Number,
   default: 200
  },
  backgroundColorMax: { // 验证码图片背景色最大值
   type: Number,
   default: 220
  },
  dotColorMin: { // 背景干扰点最小值
   type: Number,
   default: 60
  },
  dotColorMax: { // 背景干扰点最大值
   type: Number,
   default: 120
  },
  contentWidth: { // 容器宽度
   type: Number,
   default: 90
  },
  contentHeight: { // 容器高度
   type: Number,
   default: 38
  }
 },
 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 = '#e6ecfd'
   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(50, 160) // 随机生成字体颜色
   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(-30, 30)
   // 修改坐标原点和旋转角度
   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 < 4; i++) {
    ctx.strokeStyle = this.randomColor(100, 200)
    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 < 30; 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>

在登录页面中
验证码输输入框

<el-form-item prop="code">
  <el-input type="text" v-model="formLogin.code" placeholder="- - - -">
   <template slot="prepend">验证码</template>
   <template slot="append">
    <div class="login-code" @click="refreshCode">
     <Identify :identifyCode="identifyCode"></Identify>
    </div>
   </template>
  </el-input>
 </el-form-item>

登录按钮

<el-button-group>
        <el-button style="width:100%" @click="submit" type="primary">登录</el-button>
 </el-button-group>

引入之前的组件(在例子中它叫identify)

import Identify from './identify'

在登录组件中引入Identify (这是验证码组件)这一部分略

在data中

// 表单
   formLogin: {
    username: "",
    password: "",
    code: ""
   },
   identifyCodes: '1234567890abcdefjhijklinopqrsduvwxyz',
   identifyCode: '',
   // 校验
   rules: {
    username: [
     { required: true, message: "请输入用户名", trigger: "blur" }
    ],
    password: [{ required: true, message: "请输入密码", trigger: "blur" }],
    code: [{ required: true, message: "请输入验证码", trigger: "blur" }]
   }

在mounted中

mounted () {
  // 初始化验证码
  this.identifyCode = ''
  this.makeCode(this.identifyCodes, 4)
 },

在method中

// 引入验证接口
...mapActions("d2admin/account", ["login"]),
    // 重置验证码
  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)]
   }
  },
  randomNum (min, max) {
   return Math.floor(Math.random() * (max - min) + min)
  },
  /**
  * @description 提交表单
  */
  // 提交登录信息
  submit() {
    if (this.formLogin.code.toLowerCase() !== this.identifyCode.toLowerCase()) {
    this.$message.error('请填写正确验证码')
    this.refreshCode()
    return
   }
   this.$refs.loginForm.validate(valid => {
    if (valid) {
     // 登录
     // 注意 这里的演示没有传验证码
     // 具体需要传递的数据请自行修改代码
     this.login({
      vm: this,
      username: this.formLogin.username,
      password: this.formLogin.password
     });
    } else {
     // 登录表单校验失败
     this.$message.error("表单校验失败");
    }
   });
  }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 二维数组
Nov 26 Javascript
JavaScript中switch判断容易犯错的一个细节
Aug 27 Javascript
javascript+HTML5的Canvas实现Lab单车动画效果
Aug 07 Javascript
JavaScript数据类型转换的注意事项
Jul 31 Javascript
jQuery电话号码验证实例
Jan 05 Javascript
JS轮播图中缓动函数的封装
Nov 25 Javascript
Angularjs使用指令做表单校验的方法
Mar 31 Javascript
微信小程序之蓝牙的链接
Sep 26 Javascript
vue打包后显示空白正确处理方法
Nov 01 Javascript
微信小程序三级联动选择器使用方法
May 19 Javascript
VueJs里利用CryptoJs实现加密及解密的方法示例
Apr 29 Javascript
vue使用localStorage保存登录信息 适用于移动端、PC端
May 27 Javascript
详解element-ui中el-select的默认选择项问题
Aug 02 #Javascript
jQuery实现checkbox全选、反选及删除等操作的方法详解
Aug 02 #jQuery
150行Node.js实现的dns代理工具
Aug 02 #Javascript
el-select 下拉框多选实现全选的实现
Aug 02 #Javascript
js动态获取时间的方法分析
Aug 02 #Javascript
微信小程序实现语音识别转文字功能及遇到的坑
Aug 02 #Javascript
jQuery pager.js 插件动态分页功能实例分析
Aug 02 #jQuery
You might like
php操作MongoDB基础教程(连接、新增、修改、删除、查询)
2014/03/25 PHP
header与缓冲区之间的深层次分析
2016/07/30 PHP
PHP简单实现合并2个数字键数组值的方法
2017/05/30 PHP
javaScript面向对象继承方法经典实现
2013/08/20 Javascript
jQuery实现单击按钮遮罩弹出对话框(仿天猫的删除对话框)
2014/04/10 Javascript
仿JQuery输写高效JSLite代码的一些技巧
2015/01/13 Javascript
DOM基础教程之模型中的模型节点
2015/01/19 Javascript
JS设置cookie、读取cookie、删除cookie
2015/04/17 Javascript
老生常谈javascript中逻辑运算符&amp;&amp;和||的返回值问题
2017/04/13 Javascript
妙用Angularjs实现表格按指定列排序
2017/06/23 Javascript
JS鼠标滚动分页效果示例
2017/07/05 Javascript
vue proxyTable 接口跨域请求调试的示例
2017/09/12 Javascript
nodejs log4js 使用详解
2019/05/31 NodeJs
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
2019/06/18 jQuery
浅谈Python中chr、unichr、ord字符函数之间的对比
2016/06/16 Python
Python外星人入侵游戏编程完整版
2020/03/30 Python
Python实现的径向基(RBF)神经网络示例
2018/02/06 Python
在jupyter notebook 添加 conda 环境的操作详解
2020/04/10 Python
python中使用input()函数获取用户输入值方式
2020/05/03 Python
MoviePy简介及Python视频剪辑自动化
2020/12/18 Python
CSS3 clip-path 用法介绍详解
2018/03/01 HTML / CSS
HUGO BOSS美国官方网上商店:世界知名奢侈品牌
2017/08/04 全球购物
Vector, ArrayList, HashTable, HashMap哪些是线程安全的,哪些不是
2015/10/12 面试题
实习老师个人总结的自我评价
2013/09/28 职场文书
中专自荐信
2013/10/13 职场文书
经典婚礼主持开场白
2014/03/13 职场文书
《每逢佳节倍思亲》教后反思
2014/04/19 职场文书
优秀护士先进事迹
2014/05/08 职场文书
春游踏青活动方案
2014/08/14 职场文书
党员干部对十八届四中全会的期盼
2014/10/17 职场文书
团委副书记工作总结
2015/08/14 职场文书
小学体育教学随笔
2015/08/14 职场文书
《蜜蜂引路》教学反思
2016/02/22 职场文书
Ajax实现三级联动效果
2021/10/05 Javascript
CentOS7和8下安装Maven3.8.4
2022/04/07 Servers
CSS link与@import的区别和用法解析
2023/05/07 HTML / CSS