vue實現(xiàn)web前端登錄頁數(shù)字驗證碼

更新時間：2022年06月16日 16:40:35 作者：SAN822

這篇文章主要為大家詳細介紹了vue實現(xiàn)web前端登錄頁數(shù)字驗證碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue實現(xiàn)web前端登錄頁數(shù)字驗證碼的具體代碼，供大家參考，具體內容如下

1.創(chuàng)建code.js文件夾下面是js代碼

function GVerify(options) {
? ? console.log(); // 創(chuàng)建一個圖形驗證碼對象，接收options對象為參數(shù)
? ? this.con = document.getElementById(options)
? ? this.options = { // 默認options參數(shù)值
? ? ? ? id: '', // 容器Id
? ? ? ? canvasId: 'verifyCanvas', // canvas的ID
? ? ? ? width: this.con.offsetWidth, // 默認canvas寬度
? ? ? ? height: this.con.offsetHeight, // 默認canvas高度
? ? ? ? type: 'number', // 圖形驗證碼默認類型blend:數(shù)字字母混合類型、number:純數(shù)字、letter:純字母
? ? ? ? code: ''
? ? }

? ? if (Object.prototype.toString.call(options) === '[object Object]') { // 判斷傳入參數(shù)類型
? ? ? ? for (var i in options) { // 根據傳入的參數(shù)，修改默認參數(shù)值
? ? ? ? ? ? this.options[i] = options[i]
? ? ? ? }
? ? } else {
? ? ? ? this.options.id = options
? ? }

? ? this.options.numArr = '0,1,2,3,4,5,6,7,8,9'.split(',')
? ? this.options.letterArr = getAllLetter()

? ? this._init()
? ? this.refresh()
}

GVerify.prototype = {
? ? /** 版本號**/
? ? version: '1.0.0',

? ? /** 初始化方法**/
? ? _init: function () {
? ? ? ? var canvas = document.createElement('canvas')
? ? ? ? canvas.id = this.options.canvasId
? ? ? ? let { width, height } = this.options
? ? ? ? canvas.width = width
? ? ? ? canvas.height = height
? ? ? ? canvas.style.cursor = 'pointer'
? ? ? ? canvas.innerHTML = '您的瀏覽器版本不支持canvas'
? ? ? ? this.con.appendChild(canvas)
? ? ? ? var parent = this
? ? ? ? canvas.onclick = function () {
? ? ? ? ? ? parent.refresh()
? ? ? ? }
? ? },

? ? /** 生成驗證碼**/
? ? refresh: function () {
? ? ? ? var canvas = document.getElementById(this.options.canvasId)
? ? ? ? if (canvas.getContext) {
? ? ? ? ? ? var ctx = canvas.getContext('2d')
? ? ? ? }
? ? ? ? ctx.textBaseline = 'middle'

? ? ? ? ctx.fillStyle = randomColor(180, 240)
? ? ? ? ctx.fillRect(0, 0, this.options.width, this.options.height)

? ? ? ? if (this.options.type === 'blend') { // 判斷驗證碼類型
? ? ? ? ? ? var txtArr = this.options.numArr.concat(this.options.letterArr)
? ? ? ? } else if (this.options.type === 'number') {
? ? ? ? ? ? var txtArr = this.options.numArr
? ? ? ? } else {
? ? ? ? ? ? var txtArr = this.options.letterArr
? ? ? ? }
? ? ? ? this.options.code = ''
? ? ? ? for (var i = 1; i <= 4; i++) {
? ? ? ? ? ? var txt = txtArr[randomNum(0, txtArr.length)]
? ? ? ? ? ? this.options.code += txt
? ? ? ? ? ? ctx.font = randomNum(this.options.height / 2, this.options.height) + 'px SimHei' // 隨機生成字體大小
? ? ? ? ? ? ctx.fillStyle = randomColor(50, 160) // 隨機生成字體顏色
? ? ? ? ? ? ctx.shadowOffsetX = randomNum(-3, 3)
? ? ? ? ? ? ctx.shadowOffsetY = randomNum(-3, 3)
? ? ? ? ? ? ctx.shadowBlur = randomNum(-3, 3)
? ? ? ? ? ? ctx.shadowColor = 'rgba(0, 0, 0, 0.3)'
? ? ? ? ? ? var x = this.options.width / 5 * i
? ? ? ? ? ? var y = this.options.height / 2
? ? ? ? ? ? var deg = 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)
? ? ? ? }
? ? ? ? /** 繪制干擾線**/
? ? ? ? for (var i = 0; i < 4; i++) {
? ? ? ? ? ? ctx.strokeStyle = randomColor(40, 180)
? ? ? ? ? ? ctx.beginPath()
? ? ? ? ? ? ctx.moveTo(randomNum(0, this.options.width), randomNum(0, this.options.height))
? ? ? ? ? ? ctx.lineTo(randomNum(0, this.options.width), randomNum(0, this.options.height))
? ? ? ? ? ? ctx.stroke()
? ? ? ? }
? ? ? ? /** 繪制干擾點**/
? ? ? ? for (var i = 0; i < this.options.width / 4; i++) {
? ? ? ? ? ? ctx.fillStyle = randomColor(0, 255)
? ? ? ? ? ? ctx.beginPath()
? ? ? ? ? ? ctx.arc(randomNum(0, this.options.width), randomNum(0, this.options.height), 1, 0, 2 * Math.PI)
? ? ? ? ? ? ctx.fill()
? ? ? ? }
? ? },

? ? /** 驗證驗證碼**/
? ? validate: function (code) {
? ? ? ? var code = code.toLowerCase()
? ? ? ? var v_code = this.options.code.toLowerCase()
? ? ? ? if (code == v_code) {
? ? ? ? ? ? return true
? ? ? ? } else {
? ? ? ? ? ? return false
? ? ? ? }
? ? }
}
/** 生成字母數(shù)組**/
function getAllLetter() {
? ? var letterStr = 'a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z'
? ? return letterStr.split(',')
}
/** 生成一個隨機數(shù)**/
function randomNum(min, max) {
? ? return Math.floor(Math.random() * (max - min) + min)
}
/** 生成一個隨機色**/
function randomColor(min, max) {
? ? var r = randomNum(min, max)
? ? var g = randomNum(min, max)
? ? var b = randomNum(min, max)
? ? return 'rgb(' + r + ',' + g + ',' + b + ')'
}

export {
? ? GVerify
}

2.code.js在組件中引入

3.在data中定義如下兩個屬性

value:"",
verifyCode: "",

4.在mounted中執(zhí)行方法

?mounted(){
? ? ? ? this.verifyCode = new GVerify("auth_code");
? ? },

5.在template中定義div需要給div設置寬高

<div id="auth_code"></div>?

6.在登錄請求前進行判斷成功向下執(zhí)行,失敗return并同時執(zhí)行this.verifyCode.refresh()方法切換驗證碼，同時按照邏輯在登錄失敗賬號或密碼錯誤時也需要執(zhí)行this.verifyCode.refresh()切換驗證碼

if(this.verifyCode.validate(this.value)){
? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? ?this.$message({
? ? ? ? ? ? ? ? ? ? ? ? ? ? message: "驗證碼錯誤",
? ? ? ? ? ? ? ? ? ? ? ? ? ? type: 'warning'
? ? ? ? ? ? ? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? this.verifyCode.refresh();
? ? ? ? ? ? ? ? return
? ? ? ? ? ? }

7.效果圖