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

最新推荐文章于 2023-04-06 17:20:21 发布

原创

最新推荐文章于 2023-04-06 17:20:21 发布 · 2.4k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue #js #javascript

本文介绍了使用Vue实现图形验证码及校验的思路和步骤。包括创建生成图形验证码的组件、在main.js中全局注册该组件、封装验证码校验的js文件、使用vue.prototype实现校验全局变量，还说明了在表单页中引入组件、生成验证码、校验输入及重新生成验证码的操作。

源码
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