vue+Element怎么实现登录随机验证码

今天小编给大家分享一下Vue+Element怎么实现登录随机验证码的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

验证码验证只是前端，无需后台交互

首先，创建一个identify.vue页面，用于写各种：随机数字/字母，随机颜色，干扰点/线

identify.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: 16   },   fontSizeMax: {    type: Number,    default: 40   },   backgroundColORMin: {    type: Number,    default: 180   },   backgroundColorMax: {    type: Number,    default: 240   },   colorMin: {    type: Number,    default: 50   },   colorMax: {    type: Number,    default: 160   },   lineColorMin: {    type: Number,    default: 40   },   lineColorMax: {    type: Number,    default: 180   },   dotColorMin: {    type: Number,    default: 0   },   dotColorMax: {    type: Number,    default: 255   },   contentWidth: {    type: Number,    default: 112   },   contentHeight: {    type: Number,    default: 38   }  },  methods: { // 生成一个随机数       randomNum(min, max) {    return Math.floor(Math.random() * (max - min) + min)   },   // 生成一个随机的颜色   randomColor(min, max) {    var r = this.randomNum(min, max)    var g = this.randomNum(min, max)    var b = this.randomNum(min, max)    return 'rgb(' + r + ',' + g + ',' + b + ')'   },   drawPic() {    var canvas = document.getElementById('s-canvas')    var 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';  var x = (i + 1) * (this.contentWidth / (this.identifyCode.length + 1))  var 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 < 8; 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 < 100; 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>

然后就是在你需要的页面

html代码只是简单的输入行，图片，加验证码替换
@keyup.enter.native="submitForm()是我登录时摁下Enter直接登录的方法可有可无，自己选择

<el-form-item prop="verifycode">     <el-input v-model="param.verifycode" placeholder="请输入验证码" class="identifyinput" @keyup.enter.native="submitForm()">     </el-input>    </el-form-item>    <el-form-item>     <div class="identifybox">      <div @click="refreshCode">       <s-identify :identifyCode="identifyCode"></s-identify>      </div>      <el-button @click="refreshCode" type='text' class="textbtn">看不清，换一张</el-button>     </div></el-form-item>

然后就是script
首先引入SIdentify

import SIdentify from '../../components/page/identify.vue'

下面各种方法，验证及规则就直接写完了

export default {    data: function() {       const validateVerifycode = (rule, value, callback) => {    if (value === '') {     callback(new Error('请输入验证码'))    } else if (value !== this.identifyCode) {     console.log('validateVerifycode:', value);     callback(new Error('验证码不正确!'))    } else {     callback()    }   }    return {        identifyCodes: '1234567890abcdefghijklmnopqrstuvwxyz',          identifyCode: '',          rules:{          verifycode: [{      required: true,      trigger: 'blur',      validator: validateVerifycode,     }]            }        };    },    components:{    SIdentify    },    mounted(){    this.identifyCode='';    this.makeCode(this.identifyCodes,4);    disableBrowserBack();     history.pushState(null, null, document.URL);      if (window.history && window.history.pushState) {            $(window).on('popstate', function (){                window.history.pushState('forward', null, '');                window.history.forward(1);           });            window.history.pushState('forward', null, '');  //在IE中必须得有这两行       window.history.forward(1);    },    methods:{    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)       }    }}

到这就已经完成了，还可以添加CSS样式完美一下

 .identifybox {  display: flex;  justify-content: space-between;  margin-top: 7px; }

以上就是“vue+Element怎么实现登录随机验证码”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注编程网精选频道。