前端验证码

前端验证码

1、有背景和干扰

该方法复制他人的，原博地址为：https://blog.youkuaiyun.com/qq_43466457/article/details/100559974
效果图

总体思路：
使用canvas元素画背景图，用js产生随机验证码，背景颜色以及干扰图线，干扰点，然后渲染到页面上

代码实现如下：

HTML部分：

<canvas id="mycanvas"></canvas><br /><br />
<input type="button"id="mybutton" value="刷新" onclick="code(options)"/>
1
2
JS部分

var options={
		 canvasId:'mycanvas',
		 width:200,
		 height:50,
		 txt:'' 
	}
	//生产验证码
	function produceCode(options){
		var code="";
		var random=new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
			 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z','a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z');
		for(var i=0;i<4;i++){
			var index=Math.floor(Math.random()*62);
			code+=random[index];
		}
		options.txt=code;
	}
	//产生随机数字
	function randomNum(min,max){
		return Math.floor(Math.random()*(max-min)+min);
	}
	//产生随机颜色
	function randomColor(min,max){
		var r=randomNum(min,max);
		var g=randomNum(min,max);
		var b=randomNum(min,max);
		return "rgb("+r+","+g+","+b+")";
	}
	//生产验证码背景
	function code(options){
		produceCode(options);
		var canvas=document.getElementById(options.canvasId);
		canvas.width=options.width||300;//画布的宽
		canvas.height=options.height||150;//画布的高
		var ctx=canvas.getContext("2d");//创建一个canvas对象
		ctx.textBaseline="middle";
		ctx.fillStyle=randomColor(60,255);
		ctx.fillRect(0,0,canvas.width,canvas.height);
		for(var i=0;i<options.txt.length;i++){
			var txt=options.txt.charAt(i);
			ctx.font='50px SimHei';
			ctx.fillStyle = randomColor(60, 180); /**随机生成字体颜色*/
			ctx.shadowOffsetY = randomNum(-3, 3);
			ctx.shadowBlur = randomNum(-3, 3);
			ctx.shadowColor = "rgba(0, 0, 0, 0.3)";
			var x = options.width / (options.txt.length+1) * (i+1);
			var y = options.height / 2;
			var deg = randomNum(-30, 30);
			/**设置旋转角度和坐标原点*/
			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);
		}
		
		/**1~4条随机干扰线随机出现*/
		for (var i = 0; i < randomNum(1,4); i++) {
			ctx.strokeStyle = randomColor(40, 180);
			ctx.beginPath();
			ctx.moveTo(randomNum(0, options.width), randomNum(0, options.height));
			ctx.lineTo(randomNum(0, options.width), randomNum(0, options.height));
			ctx.stroke();
		}
		/**绘制干扰点*/
		for (var i = 0; i < options.width / 6; i++) {
			ctx.fillStyle = randomColor(0, 255);
			ctx.beginPath();
			ctx.arc(randomNum(0, options.width), randomNum(0, options.height), 1, 0, 2 * Math.PI);
			ctx.fill();
		}
	}
	window.onload=function(){
		code(options)
	}

2、普通输入框验证码

vue文件：

<template>
  <input
    type="button"
    id="authentication-code"
    v-model="authenticationCode"
    @click="createCode"
  />
</template>

<script>
export default {
  data() {
    return {
      authenticationCode: ''
    }
  },
  props: {
    // 可以传入任意长度
    codeLength: {
      type: Number,
      default: 4
    }
  },
  methods: {
    createCode() {
      let code = ''
      var random = new Array(
        0,
        1,
        2,
        3,
        4,
        5,
        6,
        7,
        8,
        9,
        'A',
        'B',
        'C',
        'D',
        'E',
        'F',
        'G',
        'H',
        'I',
        'J',
        'K',
        'L',
        'M',
        'N',
        'O',
        'P',
        'Q',
        'R',
        'S',
        'T',
        'U',
        'V',
        'W',
        'X',
        'Y',
        'Z'
      )

      for (var i = 0; i < this.codeLength; i++) {
        var index = Math.floor(Math.random() * random.length)
        code += random[index]
      }
      this.authenticationCode = code
    },
    validateCode(userVal) {
      return new Promise((resolve, reject) => {
        if (userVal.toUpperCase() === this.authenticationCode.toUpperCase()) {
          resolve('success')
        } else {
          this.createCode()
          reject('error')
        }
      })
    },
    reset() {
      this.createCode()
    }
  },
  mounted() {
    this.createCode()
  }
}
</script>

<style lang="less" scoped>
#authentication-code {
  font-size: 18px;
  letter-spacing: 5px;
  color: #053d84;
  width: 80px;
  background: #f2f2f5;
  outline: none;
  border: 0;
}
</style>

父组件代码：

//组件标签
<authentication-code
              ref="auth-code"
              class="authentication-code"
            ></authentication-code>
//引入组件
import AuthenticationCode from './AuthenticationCode'
//注册组件
components: {
    AuthenticationCode
  },
try {
          // 此处做校验
          const res = await this.$refs['auth-code'].validateCode(this.userCode)
          console.log(res)
       } catch (err) {
          // 验证码错误
          this.$message.error('验证码输入错误')
        }