vue实现登录页面验证码图片生成和检验（适合新手）

vue实现登录验证码效果图

新建vue文件，粘入以下代码
作为一个组件使用

在需要验证码的页面引入组件

	import Identify from './identify'components: { SIdentify },	//写在export default{}中与data同级表示使用组件

页面中引入一下代码

在data数据中引入变量code

       code:"",// 验证码identifyCodes: '1234567890abcdefjhijklinopqrsduvwxyz',//随机串内容identifyCode: '',// 校验rules: {code: [{ required: true, message: "请输入验证码", trigger: "blur" }]},

在 methods 种引入三个相关函数

		// 重置验证码refreshCode () {this.identifyCode = ''this.makeCode(this.identifyCodes, 4)},makeCode (o, l) {for (let i = 0; i < l; i++) {this.identifyCode += this.identifyCodes[this.randomNum(0, this.identifyCodes.length)]}},randomNum (min, max) {return Math.floor(Math.random() * (max - min) + min)},

在 mounted 钩子种初始化验证码

mounted(){this.identifyCode = ''this.makeCode(this.identifyCodes, 4)
}

根据自己需求，粘入验证码检验

			// 验证码检验if (this.code.toLowerCase() !== this.identifyCode.toLowerCase()) {// this.$message.error('请填写正确验证码')console.log(this.code.toLowerCase(),this.identifyCode.toLowerCase());this.msg = "请输入正确验证码";this.refreshCode()return}

参考链接：原文链接

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！