随机验证码vue实现，登录验证码随机验证码数字和字母类型的

1、组件

2、登录页面上使用

data里面定义值

     identifyCodeType: 'abcdefghuiokvbnm1234567890', // 定义验证类型 1.数字 2.字母

      identifyCode: '',

      inputCode: '', // text框输入的验证码

// 导入组件

import loginCode from '@/components/loginCode.vue'

 

               

               

                 

               

               

                  v-model="inputCode"

                  style="width: 305px"

                  type="text"

                  placeholder="请输入您的验证码"

                />

               

                 

               

               

               

               

               

               

             

 mounted() {

    this.refreshCode()

  },

 // 验证码规则

    getSubmitData() {

      if (this.inputCode === '') {

        alert('请输入验证码')

        return

      }

      if (this.identifyCode !== this.inputCode) {

        this.inputCode = ''

        this.refreshCode()

        alert('请输入正确的验证码!')

        return

      } else {

        this.$message({

          message: '验证成功',

          type: 'success'

        })

      }

    },

    // 验证码

    randomNum(min, max) {

      return Math.floor(Math.random() * (max - min) + min)

    },

    // 初始化验证码

    refreshCode() {

      this.identifyCode = '' // 输入框置空

      this.makeCode(this.identifyCodeType, 4) // 验证码长度为4

    },

    // 随机切换验证码

    makeCode(o, l) {

      for (let i = 0; i < l; i++) {

        this.identifyCode +=

          this.identifyCodeType[

            this.randomNum(0, this.identifyCodeType.length)

          ]

      }

      console.log(this.identifyCode)

    },

验证码校验和登录合并

handleLogin() {

      // 验证码校验

      if (this.inputCode === '') {

        alert('请输入验证码')

        return

      }

      if (this.identifyCode !== this.inputCode) {

        this.inputCode = ''

        this.refreshCode()

        alert('请输入正确的验证码!')

        return

      } else {

        this.$message({

          message: '验证成功',

          type: 'success'

        })

      }