vue+Element實(shí)現(xiàn)登錄隨機(jī)驗(yàn)證碼
更新時(shí)間：2022年04月10日 13:45:06 作者：她的大頭
這篇文章主要為大家詳細(xì)介紹了vue+Element實(shí)現(xiàn)登錄隨機(jī)驗(yàn)證碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(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-element-admin關(guān)閉eslint的校驗(yàn)方式
這篇文章主要介紹了vue-element-admin關(guān)閉eslint的校驗(yàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了vue-cli3.0之配置productionGzip方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
vue項(xiàng)目用到vue-lazyload做圖片懶加載，這篇文章主要介紹了vue-lazyload使用總結(jié)，解決這個(gè)插件的坑，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2018-11-11
關(guān)于vant折疊面板默認(rèn)展開(kāi)問(wèn)題
這篇文章主要介紹了關(guān)于vant折疊面板默認(rèn)展開(kāi)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
基于Vue實(shí)現(xiàn)平滑過(guò)渡的拖拽排序功能
這篇文章主要介紹了vue實(shí)現(xiàn)平滑過(guò)渡的拖拽排序功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-06-06
vue實(shí)現(xiàn)標(biāo)簽云效果的方法詳解
這篇文章主要介紹了vue實(shí)現(xiàn)標(biāo)簽云效果的方法,結(jié)合實(shí)例形式詳細(xì)分析了vue標(biāo)簽云的實(shí)現(xiàn)技巧與相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-08-08
vue動(dòng)態(tài)組件實(shí)現(xiàn)選項(xiàng)卡切換效果
這篇文章主要為大家詳細(xì)介紹了vue動(dòng)態(tài)組件實(shí)現(xiàn)選項(xiàng)卡切換效果的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
element-ui 表格sortable排序手動(dòng)js清除方式
這篇文章主要介紹了element-ui 表格sortable排序手動(dòng)js清除方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要為大家詳細(xì)介紹了Vue中出現(xiàn)首屏白屏的六種解決方法,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以參考一下2025-02-02
Ant Design的可編輯Tree的實(shí)現(xiàn)操作
這篇文章主要介紹了Ant Design的可編輯Tree的實(shí)現(xiàn)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10