vue+Element實(shí)現(xiàn)登錄隨機(jī)驗(yàn)證碼
本文實(shí)例為大家分享了vue+Element實(shí)現(xiàn)登錄隨機(jī)驗(yàn)證碼的具體代碼,供大家參考,具體內(nèi)容如下
驗(yàn)證碼驗(yàn)證只是前端,無(wú)需后臺(tái)交互
首先,創(chuàng)建一個(gè)identify.vue頁(yè)面,用于寫各種:隨機(jī)數(shù)字/字母,隨機(jī)顏色,干擾點(diǎn)/線
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: { // 生成一個(gè)隨機(jī)數(shù) ? ? ? ?randomNum(min, max) { ? ? return Math.floor(Math.random() * (max - min) + min) ? ?}, ? ?// 生成一個(gè)隨機(jī)的顏色 ? ?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) ? ? // 修改坐標(biāo)原點(diǎn)和旋轉(zhuǎn)角度? ? ? ctx.translate(x, y) ? ? ctx.rotate(deg * Math.PI / 180) ? ? ctx.fillText(txt, 0, 0) ? ? // 恢復(fù)坐標(biāo)原點(diǎn)和旋轉(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) { ? ? // 繪制干擾點(diǎn) ? ? ? 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>
然后就是在你需要的頁(yè)面
html代碼只是簡(jiǎn)單的輸入行,圖片,加驗(yàn)證碼替換
@keyup.enter.native="submitForm()是我登錄時(shí)摁下Enter直接登錄的方法可有可無(wú),自己選擇
<el-form-item prop="verifycode"> ? ? ?<el-input v-model="param.verifycode" placeholder="請(qǐng)輸入驗(yàn)證碼" 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'
下面各種方法,驗(yàn)證及規(guī)則就直接寫完了
export default { ?? ?data: function() { ?? ?/* 自定義驗(yàn)證碼規(guī)則 */ ? ?const validateVerifycode = (rule, value, callback) => { ? ? if (value === '') { ? ? ?callback(new Error('請(qǐng)輸入驗(yàn)證碼')) ? ? } else if (value !== this.identifyCode) { ? ? ?console.log('validateVerifycode:', value); ? ? ?callback(new Error('驗(yàn)證碼不正確!')) ? ? } 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) ? ?}, ? ?// 切換驗(yàn)證碼 ?? ? ?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; ?}
驗(yàn)證碼分享就這么多了。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Vue前端登錄token信息驗(yàn)證功能實(shí)現(xiàn)
- Vue3實(shí)現(xiàn)登錄表單驗(yàn)證功能
- vue實(shí)現(xiàn)通過(guò)手機(jī)號(hào)發(fā)送短信驗(yàn)證碼登錄的示例代碼
- vue實(shí)現(xiàn)token登錄驗(yàn)證的完整實(shí)例
- vue登錄頁(yè)面設(shè)置驗(yàn)證碼input框的方法
- vue實(shí)現(xiàn)登錄時(shí)滑塊驗(yàn)證
- vue實(shí)現(xiàn)登錄滑動(dòng)拼圖驗(yàn)證
- 如何在Vue中實(shí)現(xiàn)登錄驗(yàn)證功能(代碼示例)
相關(guān)文章
一文搞懂vue中provide和inject實(shí)現(xiàn)原理對(duì)抗平庸
這篇文章主要為大家介紹了vue中provide和inject實(shí)現(xiàn)原理的深入理解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-04-04vue中對(duì)監(jiān)聽(tīng)esc事件和退出全屏問(wèn)題的解決方案
這篇文章主要介紹了vue中對(duì)監(jiān)聽(tīng)esc事件和退出全屏問(wèn)題的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08vue.js 實(shí)現(xiàn)點(diǎn)擊展開(kāi)收起動(dòng)畫效果
這篇文章主要介紹了vue.js 實(shí)現(xiàn)點(diǎn)擊展開(kāi)收起動(dòng)畫效果,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07Vue按時(shí)間段查詢數(shù)據(jù)組件使用詳解
這篇文章主要為大家詳細(xì)介紹了Vue按時(shí)間段查詢數(shù)據(jù)組件的使用方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-08-08Vue路由跳轉(zhuǎn)傳參或者打開(kāi)新頁(yè)面跳轉(zhuǎn)問(wèn)題
這篇文章主要介紹了Vue路由跳轉(zhuǎn)傳參或者打開(kāi)新頁(yè)面跳轉(zhuǎn)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-03-03