您好,登錄后才能下訂單哦!
今天小編給大家分享一下vue+Element怎么實現(xiàn)登錄隨機驗證碼的相關知識點,內(nèi)容詳細,邏輯清晰,相信大部分人都還太了解這方面的知識,所以分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后有所收獲,下面我們一起來了解一下吧。
驗證碼驗證只是前端,無需后臺交互
首先,創(chuàng)建一個identify.vue頁面,用于寫各種:隨機數(shù)字/字母,隨機顏色,干擾點/線
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: { // 生成一個隨機數(shù) 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) // 修改坐標原點和旋轉(zhuǎn)角度 ctx.translate(x, y) ctx.rotate(deg * Math.PI / 180) ctx.fillText(txt, 0, 0) // 恢復坐標原點和旋轉(zhuǎn)角度 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'
下面各種方法,驗證及規(guī)則就直接寫完了
export default { data: function() { /* 自定義驗證碼規(guī)則 */ 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) /* alert(this.identifyCode) */ } } }
到這就已經(jīng)完成了,還可以添加css樣式完美一下
.identifybox { display: flex; justify-content: space-between; margin-top: 7px; }
以上就是“vue+Element怎么實現(xiàn)登錄隨機驗證碼”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家閱讀完這篇文章都有很大的收獲,小編每天都會為大家更新不同的知識,如果還想學習更多的知識,請關注億速云行業(yè)資訊頻道。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。