vue登錄頁面設(shè)置驗證碼input框的方法

更新時間：2022年04月14日 08:16:11 作者：張小歡ㄦ~

這篇文章主要為大家詳細(xì)介紹了vue登錄頁面設(shè)置驗證碼input框的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue登錄頁面設(shè)置驗證碼input框的具體代碼，供大家參考，具體內(nèi)容如下

1、效果

2、代碼

第一步：建立子組件（舉例，文件名可自己?。?---代碼如下

子組件 SIdentify 的完整代碼：

<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: 25,
? ? },
? ? fontSizeMax: {
? ? ? type: Number,
? ? ? default: 30,
? ? },
? ? backgroundColorMin: {
? ? ? type: Number,
? ? ? default: 255,
? ? },
? ? backgroundColorMax: {
? ? ? type: Number,
? ? ? default: 255,
? ? },
? ? colorMin: {
? ? ? type: Number,
? ? ? default: 0,
? ? },
? ? colorMax: {
? ? ? type: Number,
? ? ? default: 160,
? ? },
? ? lineColorMin: {
? ? ? type: Number,
? ? ? default: 100,
? ? },
? ? lineColorMax: {
? ? ? type: Number,
? ? ? default: 255,
? ? },
? ? dotColorMin: {
? ? ? type: Number,
? ? ? default: 0,
? ? },
? ? dotColorMax: {
? ? ? type: Number,
? ? ? default: 255,
? ? },
? ? contentWidth: {
? ? ? type: Number,
? ? ? default: 132,
? ? },
? ? contentHeight: {
? ? ? type: Number,
? ? ? default: 31,
? ? },
? },
? methods: {
? ? // 生成一個隨機(jī)數(shù)
? ? randomNum(min, max) {
? ? ? return Math.floor(Math.random() * (max - min) + min)
? ? },
? ? // 生成一個隨機(jī)的顏色
? ? randomColor(min, max) {
? ? ? let r = this.randomNum(min, max)
? ? ? let g = this.randomNum(min, max)
? ? ? let b = this.randomNum(min, max)
? ? ? return 'rgb(' + r + ',' + g + ',' + b + ')'
? ? },
? ? drawPic() {
? ? ? let canvas = document.getElementById('s-canvas')
? ? ? let 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'
? ? ? let x = (i + 1) * (this.contentWidth / (this.identifyCode.length + 1))
? ? ? let y = this.randomNum(this.fontSizeMax, this.contentHeight - 5)
? ? ? var deg = this.randomNum(-45, 45)
? ? ? // 修改坐標(biāo)原點和旋轉(zhuǎn)角度
? ? ? ctx.translate(x, y)
? ? ? ctx.rotate((deg * Math.PI) / 180)
? ? ? ctx.fillText(txt, 0, 0)
? ? ? // 恢復(fù)坐標(biāo)原點和旋轉(zhuǎn)角度
? ? ? ctx.rotate((-deg * Math.PI) / 180)
? ? ? ctx.translate(-x, -y)
? ? },
? ? drawLine(ctx) {
? ? ? // 繪制干擾線
? ? ? for (let i = 0; i < 5; 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 < 80; 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>
<style scoped>
.s-canvas {
? height: 38px;
}
.s-canvas canvas {
? margin-top: 1px;
? margin-left: 8px;
}
</style>

第二步：在父組件中導(dǎo)入并注冊子組件

import SIdentify from '../SIdentify'
? export default {
? ? ? components:{
? ? ? ? ? SIdentify
? ? ? },
? ? ? data(){
? ? ? ? ? ? return{
? ? ? ? ? ? ? ? code:'',
? ? ? ? ? ? ? ? inputCode:'',
? ? ? ? ? ? }
? ? ? ? },
? }

第三步：在登錄表單上加上驗證碼的樣式

<el-form-item prop="inputCode">
? ? ? ? ? ? <div style="display:flex" id="atilposition">
? ? ? ? ? ? ? <el-input
? ? ? ? ? ? ? ? type="text"
? ? ? ? ? ? ? ? class="verificationcode"
? ? ? ? ? ? ? ? ref="inputCode"
? ? ? ? ? ? ? ? v-model="loginForm.inputCode"
? ? ? ? ? ? ? ? style="width:175px"
? ? ? ? ? ? ? ? prefix-icon="el-icon-key"
? ? ? ? ? ? ? ? placeholder="請輸入驗證碼"
? ? ? ? ? ? ? ? clearable
? ? ? ? ? ? ? ></el-input>
? ? ? ? ? ? ? <span @click="createCode" id="spancode">
? ? ? ? ? ? ? ? <SIdentify :identifyCode="code"></SIdentify>
? ? ? ? ? ? ? </span>
? ? ? ? ? ? </div>
</el-form-item>

第四步： 父組件中隨機(jī)生成一串字符串-------數(shù)字+字母

mounted(){
? ? this.createCode()
},
methods:{
?? ?createCode() {
?? ? ? ?var text = "";
?? ? ? ?var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
?? ? ? ?// 設(shè)置驗證碼長度，
?? ? ? ?for( var i=0; i < 4; i++ ){
?? ? ? ? ? ?text += possible.charAt(Math.floor(Math.random() * possible.length));
?? ??? ?}
?? ? ? ?this.code = text
?? ?},
}

第五步：在點擊登錄按鈕后的方法中判斷驗證碼部分（加 .toLowerCace() 是為了不區(qū)分大小寫）

if(this.inputCode == ''){
? ? this.$message.error('請輸入驗證碼')
? ? return
}
if(this.inputCode.toLowerCase() != this.code.toLowerCase()){
? ? this.$message.error('驗證碼錯誤')
? ? this.inputCode = ''
? ? this.createCode()
? ? return
}

具體位置如下：