自定义检验功能

 <el-form :model="form1" :rules="rules1" ref="form1">

          <div class="loginbox" style="margin-top: 1vw">

            <el-form-item prop="username1">

              <div>

                <el-input

                  v-model="form1.username1"

                  input

                  type="text"

                  placeholder="请输入注册账号"

                  @input="validateCode"

                ></el-input>

              </div>

            </el-form-item>

            <el-form-item prop="password1">

              <div>

                <el-input

                  v-model="form1.password1"

                  input

                  type="text"

                  placeholder="请输入注册密码"

                  @input="validateCode1"

                ></el-input>

              </div>

            </el-form-item>

            <el-form-item prop="password2">

              <div>

                <el-input

                  v-model="form1.password2"

                  input

                  type="text"

                  placeholder="再次确认您的密码"

                ></el-input>

              </div>

            </el-form-item>

            <!-- 忘记密码 -->

            <div class="wos-df wos-jcsb wos-mt20">

              <div></div>

              <a style="color: #b8b8b8; font-size: 13px" v-if="show"

                >忘记密码?</a

              >

            </div>

            <el-form-item

              prop="authcode"

              style="height: 40px; margin-bottom: 20px"

            >

              <div class="wos-df">

                <el-input

                  class="input11"

                  maxlength="8"

                  placeholder="请输入验证码"

                  v-model="form1.authcode"

                ></el-input>

                <div class="divIdentifyingCode">

                  <div class="get-code" @click="refreshCode()">

                    <suiji :identifyCode="identifyCode"></suiji>

                  </div>

                  <!-- <canvas id="tutorial" width="150" height="150"></canvas> -->

                </div>

              </div>

            </el-form-item>

            <el-form-item v-loading="loading">

              <div

                style="margin-left: -5vw; margin-top: 0.5vw"

                :class="{ shake: isShaking }"

              >

                <el-checkbox

                  v-model="form1.checked"

                  checked-color="#3398FF"

                  :label-disabled="true"

                  shape="square"

                >

                  <span style="color: #9f9d9d; font-size: 15px">

                    我已阅读并同意

                    <span style="color: #000; font-size: 15px"

                      >吉林农大用户协议</span

                    >

                  </span>

                </el-checkbox>

              </div>

            </el-form-item>

            <el-form-item style="margin-top: -2vw">

              <a

                class="confirm wos-mt20 wos-colorb"

                style="width: 100%; height: 100%; display: block"

                @click="zhuche('form1')"

                >立即注册</a

              >

            </el-form-item>

          </div>

        </el-form>

<script>

import suiji from "@/components/suiji.vue"

data () {

    const look = (rule, value, callback) => {

      if (value != this.identifyCodeStr) {

        callback(new Error("验证码不一致,请注意大小写"))

      } else {

        callback()

      }

    }

    const lookPass = (rule, value, callback) => {

      if (this.form1.password1 !== value) {

        callback(new Error("确认密码不一致"))

      } else {

        callback()

      }

    }

    return {

      identifyCode: "",

      identifyCodes: "0123456789abcdwerwshdjeJKDHRJHKOOPLMKQ", //绘制的随机

      isShaking: false,

      loading: false,

      // 控制注册或者登录

      show: true,

   

      form1: {

        // 账号

        username1: "",

        // 密码

        password1: "",

        // 确认密码

        password2: "",

        // 验证码

        authcode: "",

        checked: false,

      },

      rules1: {

        username1: [

          { required: true, trigger: "blur", message: "注册账号不能为空" },

          { min: 3, max: 5, trigger: "input", message: "注册账号长度在 3 到 5 个字符" },

        ],

        password1: [

          { required: true, trigger: "blur", message: "注册密码不能为空" },

          { min: 3, max: 5, trigger: "input", message: "注册密码长度在 3 到 5 个字符" },

        ],

        password2: [

          { validator: lookPass, trigger: "blur", required: true, },

        ],

        authcode: [

          { validator: look, trigger: "blur" },

        ],

      },

      identifyCodeStr: "",

      haha: false,

   

      // 注册校验

    }

  },

  components: {

    suiji,

  },

</script>

<style lang="scss">

.shake {

  animation: shake 0.5s ease-in-out infinite; // 抖动动画样式

}

@keyframes shake {

  0% {

    transform: translateX(0);

  }

  25% {

    transform: translateX(-10px);

  }

  50% {

    transform: translateX(10px);

  }

  75% {

    transform: translateX(-10px);

  }

  100% {

    transform: translateX(0);

  }

}

.el-checkbox__inner {

  border-radius: 50% !important;

}

.input11 {

  width: 60% !important;

}

.divIdentifyingCode {

  position: absolute;

  top: 10px;

  right: 10px;

  z-index: 5;

  width: 102px; /*设置图片显示的宽*/

  height: 40px; /*图片显示的高*/

  background: #e2e2e2;

  margin: 0;

}

.underline1-ajkps {

  color: #3e8c97;

  font-size: 13px;

}

.underline1-ajkps:hover {

  color: red !important;

}

.html {

  background-image: url("../assets/imgs/bg.png");

  width: 100vw;

  height: 100vh;

  background-size: cover;

  position: relative;

}

.background {

  width: 69vw;

  height: 50vh;

  background-image: url("../assets/imgs/xbj.png");

  background-size: cover;

  position: absolute;

  top: 50%;

  left: 50%;

  justify-content: space-around;

  padding: 5vw 0 0 0;

  transform: translate(-50%, -50%);

  .left {

    .welcome {

      font-size: 2.2vw;

    }

    .transverseline {

      width: 2vw;

      height: 0.5vh;

      background-color: #fff;

    }

    .name {

      font-size: 2vw;

    }

    .introduce {

      font-size: 23px;

    }

    .contactus {

      display: inline-block;

      border: 1px solid #fff;

      border-radius: 3px;

      padding: 5px;

    }

  }

  .right {

    width: 28vw;

    height: 60vh;

    background-color: #fff;

    border-radius: 10px;

    margin-top: -7vw;

    text-align: center;

    padding: 4vw 3vw 3vw 4.5vw;

    // margin-left: 50px;

    .login {

      color: #3e8c97;

      font-size: 2.1vw;

    }

    .letter {

      color: #858585;

      font-size: 15px;

    }

    // 登录框样式

    .loginbox {

      width: 19vw;

      margin-top: 3.5vw;

      input {

        width: 100%;

        height: 6vh;

        background-color: #f7f7f7;

        border-radius: 40px;

        border: none;

        outline: none;

        text-align: center;

        font-size: 16px;

      }

    }

    .confirm {

      width: 100%;

      height: 6vh;

      background-color: #3e8c97;

      font-size: 18px;

      border-radius: 40px;

      text-align: center;

      line-height: 6vh;

      display: block;

    }

  }

}

</style>

子组件

<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: 35

    },

    fontSizeMax: {

      type: Number,

      default: 35

    },

    backgroundColorMin: {

      type: Number,

      default: 180

    },

    backgroundColorMax: {

      type: Number,

      default: 240

    },

    colorMin: {

      type: Number,

      default: 50

    },

    colorMax: {

      type: Number,

      default: 160

    },

    lineColorMin: {

      type: Number,

      default: 100

    },

    lineColorMax: {

      type: Number,

      default: 200

    },

    dotColorMin: {

      type: Number,

      default: 0

    },

    dotColorMax: {

      type: Number,

      default: 255

    },

    contentWidth: {

      type: Number,

      default: 120

    },

    contentHeight: {

      type: Number,

      default: 40

    }

  },

  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 + ")"

    },

    transparent () {

      return "rgb(255,255,255)"

    },

    drawPic () {

      let canvas = document.getElementById("s-canvas")

      let ctx = canvas.getContext("2d")

      ctx.textBaseline = "bottom"

      //   绘制背景

      ctx.fillStyle = this.randomColor(

        this.backgroundColorMin,

        this.backgroundColorMax

      )

      ctx.fillStyle = this.transparent()

      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(-10, 10)

      // 修改坐标原点和旋转角度

      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()

    }

  },

  mounted () {

    this.drawPic()

  }

};

</script>