随机验证码登录功能(前端自己做)

第一步创建一个js文件 定义一个方法

export function draw(show_num) {
  let canvas = document.getElementsByClassName('search_canvas')[0];
  let canvas_width = '90';
  let canvas_height = '32';
  let context = canvas.getContext('2d'); //获取到canvas画图的环境，演员表演的舞台
  canvas.width = canvas_width;
  canvas.height = canvas_height;
  let sCode =
    'a,b,c,d,e,f,g,h,i,j,k,m,n,p,q,r,s,t,u,v,w,x,y,z,A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0';
  let aCode = sCode.split(',');
  let aLength = aCode.length; //获取到数组的长度
  for (let i = 0; i < 4; i++) {
    //这里的for循环可以控制验证码位数（如果想显示6位数，4改成6即可）
    let j = Math.floor(Math.random() * aLength); //获取到随机的索引值
    // let deg = Math.random() * 30 * Math.PI / 180;//产生0~30之间的随机弧度
    //  let deg = Math.random() - 0.5;  产生一个随机弧度
    let txt = aCode[j]; //得到随机的一个内容
    show_num[i] = txt.toLowerCase();
    let x = 13 + i * 20; //文字在canvas上的x坐标
    let y = 20; //文字在canvas上的y坐标
    context.font = 'bold 12px Alibaba PuHuiTi';
    context.translate(x, y); 
    context.fillStyle = '#fff';   //样式
    context.fillText(txt, 0, 0);
    context.translate(-x, -y);
  }
  return show_num;
}

第二步 创建一个login.vue文件

<template>
  <div>
    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="密码" prop="pass">
        <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="checkPass">
        <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="验证码" prop="YanzhenPass">
        <el-input autocomplete="off" v-model="ruleForm.YanzhenPass"></el-input>
        <div class='right'>
          <canvas class='search_canvas' style='width: 100%, height: 100%' @click='tagCanvas()'></canvas>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import {
    draw
  } from '@/utils/setCanvas';
  export default {
    data() {
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.pass) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      var validatePass3 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入验证码'));
        } else if (this.securityCode.toUpperCase() != value.toUpperCase()) {
          callback(new Error('验证码不正确'));
        } else {
          callback();
        }
      };
      return {
        security: '',
        securityCode: '',
        ruleForm: {
          pass: '',
          checkPass: '',
          YanzhenPass: ''
        },
        rules: {
          pass: [{
            validator: validatePass,
            trigger: 'blur'
          }],
          checkPass: [{
            validator: validatePass2,
            trigger: 'blur'
          }],
          YanzhenPass: [{
            validator: validatePass3,
            trigger: 'blur'
          }]
        }
      };
    },
    mounted() {
      this.tagCanvas();
    },
    methods: {
      submitForm(formName) {
        console.log(formName)
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      // 验证码
      tagCanvas() {
        let show_num = [];
        let datas = draw(show_num);
        this.security = datas,
          this.securityCode = datas.join('')
      }
    }
  }
</script>

<style scoped>
</style>