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