vue图形验证码的生成和实现校验功能(附源码)

源码
https://gitee.com/river-winter/graphic-verification-code

思路

1.创建生成图形验证码的组件

2.在main.js中全局注册图形验证码组件

3.封装一个验证码校验的js文件

4.使用vue.prototype实现验证码校验全局变量

5.在表单页中

​ 5.1 使用标签直接引入图形验证码组件

​ 5.2 在onShow页面初次渲染完成生命周期中调用组件中生成验证码方法

​ 5.3 点击提交表单函数中,调用判断封装函数,将用户输入信息作为实参传入,可以得到一个布尔返回值

​ 5.4 返回值为false时,重新生成图形验证码

1.创建生成图形验证码的组件

components/picture_captcha/picture_captcha.vue

<template>
	<view class="canvas-img-code" @click="refresh()">
		<text>图形验证码</text>
		<canvas :style="{width:width+'px',height:height+'px'}" canvas-id="imgcanvas" @error="canvasIdErrorCallback"></canvas>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		props:{
			width:{
				type:Number,
				default:120
			},
			height:{
				type:Number,
				default:45
			},
			title:{
				type:String,
				default:'字符串'
			},
			boolean:{
				type:Boolean,
				default:false
			},
			array:{
				type:Array,
				default(){
					return [1,2,3]
				}
			},
			object:{
				type:Object,
				default(){
					return {text:'标题'}
				}
			}
		},
		methods:{
			// 初始化验证码
			init: function() {
				console.log('start');
				var context = uni.createCanvasContext('imgcanvas', this),
					w = this.width,
					h = this.height;
				context.setFillStyle("white");
				context.setLineWidth(5);
				context.fillRect(0, 0, w, h);
				var pool = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "I", "M", "N", 								"O", "P", "Q", "R", "S","T", "U", "V", "W", "S", "Y", "Z", "1", "2", "3",                                  "4", "5", "6", "7", "8", "9", "0"
					],
					str = '';
				for (var i = 0; i < 4; i++) {
					var c = pool[this.rn(0, pool.length - 1)];
					var deg = this.rn(-30, 30);
					context.setFontSize(18);
					context.setTextBaseline("top");
					context.setFillStyle(this.rc(80, 150));
					context.save();
					context.translate(30 * i + 15, parseInt(h / 1.5));
					context.rotate(deg * Math.PI / 180);
					context.fillText(c, -15 + 5, -15);
					context.restore();
					str += c;
				}
				// 将图形码存储到本地
				uni.setStorage({
					key: 'imgcode',
					data: str,
				});
				for (var i = 0; i < 40; i++) {
					context.beginPath();
					context.arc(this.rn(0, w), this.rn(0, h), 1, 0, 2 * Math.PI);
					context.closePath();
					context.setFillStyle(this.rc(150, 200));
					context.fill();
				}
				context.draw();
				console.log('end');
			},
			rc: function(min, max) {
				var r = this.rn(min, max);
				var g = this.rn(min, max);
				var b = this.rn(min, max);
				return "rgb(" + r + "," + g + "," + b + ")";
			},
			rn: function(max, min) {
				return parseInt(Math.random() * (max - min)) + min;
			},
			refresh: function() {
				this.init();
			},
			canvasIdErrorCallback: function(e) {
				console.error(e.detail.errMsg)
			}
		}
	}
</script>

<style lang="scss">
    
</style>

2.全局注册图形验证码组件

main.js

// 图形验证码
import picture_captcha from '@/components/picture_captcha/picture_captcha.vue'
Vue.component("picture-captcha",picture_captcha)

3.封装一个验证码校验的js文件

enterprise/util/Tools.js

let Tools = {};
// 提交判断
Tools.formSubmit = (data, compare) => {
	let {
		value,
	} = data;
	for (var key in value) {
		let values = value[key];
		// 图形验证码 判断
		if (key == 'verCode') {
			if (values.length != 4) {
				uni.showToast({
					icon: 'none',
					title: '图形验证码不正确!',
					duration: 2500
				});
				return false;
			}
			// toLowerCase将字符串转换为小写
			if (values.toLowerCase() != uni.getStorageSync('imgcode').toLowerCase()) {
				uni.showToast({
					icon: 'none',
					title: '图形验证码不正确!',
					duration: 2500
				});
				return false;
			}
		}
		
	}
	return true;
}
module.exports = Tools;

4.验证码校验全局变量

// 将验证方法使用vue.prototype实现全局变量  在组件中通过this.tools来访问
import Tools from  './util/Tools.js'
Vue.prototype.tools = Tools;

5.表单页中

<template>
	<view class="content">
		<form @submit="formSubmit">
			<view class="cu-form-group color32">
				<input placeholder="请输入图形验证码" type="text" name="verCode" />
                  //生成图形验证码的组件
				<picture-captcha ref="captcha" v-show="modalName == ''"></picture-captcha>
				<button class="cu-btn submit" form-type="submit">点击验证</button>
			</view>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				modalName: '',
			}
		},
		
		methods: {
			formSubmit(e) {
				let that = this; //获取外部this指向
				let values = e.detail.value; //用户输入的信息
				let click = that.click; //blonen布尔值

				let data = {
					check: {
						verCode: '图形验证码',
					},
					value: values,
				}
				// 调用判断封装函数
				var checks = that.tools.formSubmit(data);
				// 验证不通过时,重新生成验证码
				if(!checks){
					that.$refs.captcha.init()
				}

			},
		},
		onShow() {
            // 页面初次渲染完成生成验证码
			let that = this;
			setTimeout(() => {
				that.$refs.captcha.init()
			}, 1000)
		},
	}
</script>

<style>
	
</style>