vue 验证码

旧城等待， 2023-01-12 10:20 130阅读 0赞

# 一、概述 #

效果图

![931d981a4579e273748953af7e22d71f.png][]

# 二、代码实现 #

新建test目录，放2个vue文件。

![39d1a8d6e83cbc80be8b31f064d1ceea.png][]

sidentify.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: 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: 112
          },
          contentHeight: {
            type: Number,
            default: 31
          }
        },
        methods: {
          // 生成一个随机数
          randomNum(min, max) {
            return Math.floor(Math.random() * (max - min) + min)
          },
          // 生成一个随机的颜色
          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)
            // 修改坐标原点和旋转角度
            ctx.translate(x, y)
            ctx.rotate(deg * Math.PI / 180)
            ctx.fillText(txt, 0, 0)
            // 恢复坐标原点和旋转角度
            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>

说明

![0df9038d18f9e6b2d352bc93d5aada40.png][]

test.vue

<template>
      <div class="form-group" style="display: flex;">
        <div>
          <span>验证码：</span>
          <input type="text" id="code" v-model="code" class="code" placeholder="请输入验证码"/>
        </div>
        <div class="login-code" @click="refreshCode">
          
          <s-identify :identifyCode="identifyCode"></s-identify>
        </div>
        <div>
          <button @click="checkCaptcha">验证</button>
        </div>
      </div>
    
    </template>
    
    <script>
      import SIdentify from '../login/sidentify'
    
      export default {
        components: { SIdentify },
        data() {
          return {
            identifyCodes: '1234567890',
            identifyCode: '',
            code: '',//text框输入的验证码
            tableData: []
          }
        },
        mounted: function() {
          this.identifyCode = ''
          // 初始化验证码
          this.makeCode(this.identifyCodes, 4)
        },
        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)
          },
          // 检查验证码是否正确
          checkCaptcha(){
            if (this.code == ""){
              alert("请输入验证码")
              return false
            }
            if (this.identifyCode != this.code){
              this.code = ''
              this.refreshCode()
              alert("请输入正确的验证码")
              return false
            }
            console.log("验证码正确")
          }
        }
      }
    </script>
    
    <style>
      /*验证码样式*/
      .code {
          
        width: 124px;
        height: 31px;
        border: 1px solid rgba(186, 186, 186, 1);
      }
    
      .login-code {
          
        cursor: pointer;
      }
    </style>

访问页面，输入正确的验证码，会有提示。

![e98c054783747aa54f1e9d513fa2affb.png][]

注意：我在console中，输出了正确的验证码，照着填写即可。

这个样式，可能不太美观。如果需要用到项目中，可以自行调整样式。

本文参考链接：

[https://www.cnblogs.com/web-aqin/p/10796326.html][https_www.cnblogs.com_web-aqin_p_10796326.html]

[931d981a4579e273748953af7e22d71f.png]: /images/20221119/51f9146ca99243a0ab9f5f43cd554350.png
[39d1a8d6e83cbc80be8b31f064d1ceea.png]: /images/20221119/73b501b8da6b43d9a95f6d53cb2983ae.png
[0df9038d18f9e6b2d352bc93d5aada40.png]: /images/20221119/a2253537e8fe469fa122739e4a9837cc.png
[e98c054783747aa54f1e9d513fa2affb.png]: /images/20221119/c8f601ba524f40dea5b9def5f52d6693.png
[https_www.cnblogs.com_web-aqin_p_10796326.html]: https://www.cnblogs.com/web-aqin/p/10796326.html