vue 纯前端登录验证码

效果图

父组件中随机生成一串字符转，数字+字母


mounted(){this.createCode()
},
methods:{createCode() {var text = "";var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";// 设置验证码长度，for( var i=0; i < 4; i++ ){text += possible.charAt(Math.floor(Math.random() * possible.length));}this.code = text},
}

导入并注册子组件

import SIdentify from 'components/common/code/SIdentify'export default {components:{SIdentify},data(){return{code:'',inputCode:'',}},}

然后在登录表单中加上

<div style="display:flex"><el-input type="text" v-model="inputCode" style="width:190px" placeholder="请输入验证码" clearable></el-input><span @click="createCode"><SIdentify :identifyCode="code"></SIdentify></span></div>

最后在登录方法中判断 inputCode 是否等于 code就可以了，加 .toLowerCace() 是为了不区分大小写

if(this.inputCode == ''){this.$message.error('请输入验证码')return
}
if(this.inputCode.toLowerCase() != this.code.toLowerCase()){this.$message.error('验证码错误')this.inputCode = ''this.createCode()return
}

子组件 SIdentify 的完整代码

<template><div class="s-canvas"><canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas></div>
</template>
<script>export default {name: 'SIdentify',props: {identifyCode: {type: String,default: '1234'},fontSizeMin: {type: Number,default: 25},fontSizeMax: {type: Number,default: 30},backgroundColorMin: {type: Number,default: 255},backgroundColorMax: {type: Number,default: 255},colorMin: {type: Number,default: 0},colorMax: {type: Number,default: 160},lineColorMin: {type: Number,default: 100},lineColorMax: {type: Number,default: 255},dotColorMin: {type: Number,default: 0},dotColorMax: {type: Number,default: 255},contentWidth: {type: Number,default: 132},contentHeight: {type: Number,default: 31}},methods: {// 生成一个随机数randomNum(min, max) {return Math.floor(Math.random() * (max - min) + min)},// 生成一个随机的颜色randomColor(min, max) {let r = this.randomNum(min, max)let g = this.randomNum(min, max)let b = this.randomNum(min, max)return 'rgb(' + r + ',' + g + ',' + b + ')'},drawPic() {let canvas = document.getElementById('s-canvas')let ctx = canvas.getContext('2d')ctx.textBaseline = 'bottom'// 绘制背景ctx.fillStyle = this.randomColor(this.backgroundColorMin, this.backgroundColorMax)ctx.fillRect(0, 0, this.contentWidth, this.contentHeight)// 绘制文字for (let i = 0; i < this.identifyCode.length; i++) {this.drawText(ctx, this.identifyCode[i], i)}this.drawLine(ctx)this.drawDot(ctx)},drawText(ctx, txt, i) {ctx.fillStyle = this.randomColor(this.colorMin, this.colorMax)ctx.font = this.randomNum(this.fontSizeMin, this.fontSizeMax) + 'px SimHei'let x = (i + 1) * (this.contentWidth / (this.identifyCode.length + 1))let y = this.randomNum(this.fontSizeMax, this.contentHeight - 5)var deg = this.randomNum(-45, 45)// 修改坐标原点和旋转角度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)},drawLine(ctx) {// 绘制干扰线for (let i = 0; i < 5; i++) {ctx.strokeStyle = this.randomColor(this.lineColorMin, this.lineColorMax)ctx.beginPath()ctx.moveTo(this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight))ctx.lineTo(this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight))ctx.stroke()}},drawDot(ctx) {// 绘制干扰点for (let i = 0; i < 80; i++) {ctx.fillStyle = this.randomColor(0, 255)ctx.beginPath()ctx.arc(this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight), 1, 0, 2 * Math.PI)ctx.fill()}}},watch: {identifyCode() {this.drawPic()}},mounted() {this.drawPic()}}
</script>
<style scoped>.s-canvas {height: 38px;}.s-canvas canvas{margin-top: 1px;margin-left: 8px;}
</style>

vue 纯前端登录验证码相关推荐

【vue】纯前端登录验证码实现记录
[写在前面的话] 应项目安全需求,登录验证要新增验证码,下意识觉得是前端的工作,后来才发现前端验证了个寂寞,真正安全的验证码验证工作应该交给后台来做,此是后话,先记录一下纯前端实现的验证码模块. [实 ...
vue实现前端登录验证码
一.验证码组件 <template><div class="s-draw"><canvas id="s-draw" :width= ...
ant design Vue 纯前端实现分页
ant design Vue 纯前端实现分页功能 (有选择的话最好让后端分页,前端分页可能会有问题,为了性能,尽量不要前端分页) 自己想的一个简单方法: 通过页码改变事件,每页数据个数改变事件,获取改 ...
VUE纯前端导出excel表格功能《转载》
插件:使用vue-json-excel插件实现Vue纯前端导出简单的Excel表格功能. 使用方法 1. 安装依赖 npm install vue-json-excel 2. 引入组件 a. 全局引入 ...
Vue导出word附表部分横向显示(承接上一篇Vue纯前端导出word)
Vue纯前端导出word直通车 1. 引入js import htmlDocx from "@/utils/html-docx"; 2. page-break-before:alw ...
Vue纯前端：榜单管理系统
文章目录: 一.主要功能: 二.实现效果: 1.主页: 2.注册: 3.登录: 4.列表界面: 5.添加应用界面: 6.修改应用界面: 7.模糊查询: 三.整体架构: 四.配置文件说明: 五.功能说明 ...
vue纯前端下载表格
一般我们做后台管理会遇到这样的需求:页面上的表格,需要纯前端技术来完成.不涉及接口对接.不涉及后端,就是你在页面上展示的表格是什么样,就要下载什么样的表格excel,方便人观察,废话不多说,上代码如 ...
【验证码功能合集】vue简单实现验证码功能，纯前端实现验证码，拿来即用【输入，滑动，拼图】
效果图可以让输入的验证码和图片验证码比对. 上面的是验证码的组件,直接复制贴里面就行了,然后引入到你需要的地方很简单的两个步骤搞定 (1)验证码组件这里是验证码的组件,啥也不用动,直接复制创建个 ...
html前端登录验证码,前端登录页面开发_js生成验证码并验证
/p> 前端集成开发工具: margin: 0; padding: 0; } a { text-decoration: none; } .main_bar { width: 100%; heig ...

vue 纯前端登录验证码

效果图

父组件中随机生成一串字符转，数字+字母

导入并注册子组件

然后在登录表单中加上

最后在登录方法中判断 inputCode 是否等于 code就可以了，加 .toLowerCace() 是为了不区分大小写

子组件 SIdentify 的完整代码

vue 纯前端登录验证码相关推荐

最新文章

热门文章