4位随机数字验证码

一、效果图

二、封装成一个组件（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: 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
    }
  },
  mounted() {
    this.drawPic()
  },
  methods: {
    drawPic() {
      const canvas = document.getElementById('s-canvas')
      const 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)
    },

    // 生成一个随机的颜色
    randomColor(min, max) {
      const r = this.randomNum(min, max)
      const g = this.randomNum(min, max)
      const b = this.randomNum(min, max)
      return 'rgb(' + r + ',' + g + ',' + b + ')'
    },

    // 生成一个随机数
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min)
    },

    drawText(ctx, txt, i) {
      ctx.fillStyle = this.randomColor(this.colorMin, this.colorMax)
      ctx.font = this.randomNum(this.fontSizeMin, this.fontSizeMax) + 'px SimHei'
      const x = (i + 1) * (this.contentWidth / (this.identifyCode.length + 1))
      const 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 < 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()
    }
  }
}
</script>

<style lang="scss" scoped>
.s-canvas {
  height: 38px;
}

canvas {
  margin-top: 1px;
  margin-left: 8px;
  cursor: pointer;
}
</style>

三、在所需界面中使用，代码如下：

<template>
  <div class="verify-code-container">
    <!-- 表单区域 -->
    <div class="form-box">
      <el-form
        :model="form"
        :rules="formRules"
        ref="formRef"
        label-width="100px"
      >
        <el-form-item
          label="用户名"
          prop="phone"
        >
          <el-input
            v-model="form.phone"
            placeholder="请输入手机号"
            maxlength="11"
            @input="form.phone = form.phone.replace(/\D/g, '')"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item
          label="密码"
          prop="password"
        >
          <el-input
            v-model.trim="form.password"
            type="password"
            placeholder="请输入密码"
            show-password
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item
          label="验证码"
          prop="verifyCode"
          class="verify-code-item"
        >
          <el-input
            v-model="form.verifyCode"
            placeholder="请输入验证码"
            maxlength="4"
            @input="form.verifyCode = form.verifyCode.replace(/\D/g, '')"
            clearable
          ></el-input>

          <div
            class="verify-code-box"
            @click="refreshCode"
          >
            <SIdentify :identifyCode="identifyCode"></SIdentify>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="submitForm('formRef')"
          >登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import SIdentify from '@/components/SIdentify.vue'

export default {
  name: 'VerifyCode',
  components: {
    SIdentify
  },
  data() {
    // 检查手机号
    const checkPhone = (rule, value, callback) => {
      const regPhone = /0?(13|14|15|16|17|18|19)[0-9]{9}/
      if (!value) {
        callback(new Error('请输入用户名'))
      } else if (!regPhone.test(value)) {
        callback(new Error('手机号格式错误'))
      } else {
        callback()
      }
    }

    // 检查验证码
    const checkVerifyCode = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入验证码'))
      } else if (value !== this.identifyCode) {
        callback(new Error('验证码不正确'))
      } else {
        callback()
      }
    }

    return {
      form: {
        phone: '',
        password: '',
        verifyCode: ''
      },
      formRules: {
        phone: [{ validator: checkPhone, required: true, trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        verifyCode: [{ validator: checkVerifyCode, required: true, trigger: 'blur' }]
      },

      // 验证码
      identifyCode: '',
      identifyCodes: '123456789'
    }
  },
  created() {
    this.refreshCode()
  },
  methods: {
    refreshCode() {
      this.identifyCode = ''
      this.makeCode()
    },

    makeCode() {
      for (let i = 0; i < 4; i++) {
        this.identifyCode += this.identifyCodes[this.randomNum(0, this.identifyCodes.length)]
      }
    },

    // 随机数
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min)
    },

    // 登录
    submitForm(refName) {
      this.$refs[refName].validate(valid => {
        if (valid) {
          console.log('form--', this.form)
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.verify-code-container {
  flex: 1;
  height: 0;
  display: flex;
  justify-content: center;
  align-items: center;

  .form-box {
    width: 600px;
    padding: 50px 50px 50px 20px;
    border: 1px solid pink;
    border-radius: 5px;

    ::v-deep .el-form {
      .el-form-item {
        margin-bottom: 35px;
      }
      .el-form-item:last-child {
        margin-bottom: 0;
      }

      .verify-code-item {
        .el-form-item__content {
          display: flex;
        }
      }
    }
  }
}
</style>