Vue登录页添加验证码

登录页添加验证码

新建ValidCode组件

内容如下，直接copy即可：

<template><divclass="ValidCode disabled-select":style="`width:${width}; height:${height}`"@click="refreshCode"><spanv-for="(item, index) in codeList":key="index":style="getStyle(item)">{{ item.code }}</span></div>
</template>

<script>
export default {name: 'ValidCode',model: {prop: 'value',event: 'input'},props: {width: {type: String,default: '100px'},height: {type: String,default: '40px'},length: {type: Number,default: 4},refresh: {type: Number}},data () {return {codeList: []}},watch: {refresh () {this.createdCode()}},mounted () {this.createdCode()},methods: {refreshCode () {this.createdCode()},createdCode () {const len = this.lengthconst codeList = []const chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz0123456789'const charsLen = chars.length// 生成for (let i = 0; i < len; i++) {const rgb = [Math.round(Math.random() * 220), Math.round(Math.random() * 240), Math.round(Math.random() * 200)]codeList.push({code: chars.charAt(Math.floor(Math.random() * charsLen)),color: `rgb(${rgb})`,fontSize: `${10 + (+[Math.floor(Math.random() * 10)] + 6)}px`,padding: `${[Math.floor(Math.random() * 10)]}px`,transform: `rotate(${Math.floor(Math.random() * 90) - Math.floor(Math.random() * 90)}deg)`})}// 指向this.codeList = codeList// 将当前数据派发出去// console.log(codeList.map(item => item.code).join(''))this.$emit('input', codeList.map(item => item.code).join(''))},getStyle (data) {return `color: ${data.color}; font-size: ${data.fontSize}; padding: ${data.padding}; transform: ${data.transform}`}}
}
</script>

<style scoped>
.ValidCode{display: flex;justify-content: center;align-items: center;cursor: pointer;
}
.ValidCode span{display: inline-block;
}
</style>

在Login.vue里面新增表单

导入组件，新建变量 validCode

新增方法：createValidCode，用来接收组件传过来的验证码并赋值给data中的变量valideCode

在login方法里校验

if (!this.form.validCode) {this.$message.error("请填写验证码")return
}
if(this.form.validCode.toLowerCase() !== this.validCode.toLowerCase()) {this.$message.error("验证码错误")return
}

Vue登录页添加验证码相关推荐

为 Django admin 登录页添加验证码
为什么80%的码农都做不了架构师?>>> 历史原因,使用上古版本 django 1.6.5,但新版本应该大同小异首先添加自定义后台模块app, 如adm,并添加到 INSTA ...
vue 登录页vue模板_Vue材质设计管理员模板
vue 登录页vue模板 Vue材料管理员 (Vue Material Admin) Vue Material Admin Template is a Vue Based Material Desig ...
Vue登录时校验验证码
Vue登录时校验验证码环境: 前端:Vue 后端:SpringBoot 前一章已写过如何实现验证码:https://blog.csdn.net/weixin_45732391/article/det ...
cas服务器登录页面添加验证码
本文的是以cas-4.1.5进行的,cas源代码下载官网:https://apereo.github.io/cas/4.2.x/index.html. 1.在cas工程的web.xml增加验证码功能的 ...
vue项目web前端登录页数字验证码登录流程
1.创建code.js文件夹下面是js代码 function GVerify(options) {console.log(); // 创建一个图形验证码对象,接收options对象为参数this.co ...
登录验证---添加验证码验证，Cookie保存功能
1,登录表单,login.jsp View Code 1 <%@ page contentType="text/html" pageEncoding="GBK&qu ...
thinkphp 3.2 =》0625-6_登录业务与验证码 =》登录页与验证码
1.登录控制器 Application/Admin/Controller/ManagerController.class.php <?php /** * Created by PhpStor ...
vue登录页实现记住密码的操作
实现记住密码的操作,如下图所示 html部分 <el-form-item style="margin-top:-10px;margin-bottom:-5px;" >& ...
WordPress自定义登录和注册页面样式并且添加验证码
通过一番尝试和验证以及网络搜索,终于实现了WordPress默认的登录和注册界面的样式修改,下面把过程记录下来.笔者主要是通过在主题中添加WordPress的钩子来实现登录和注册界面的样式修改的.Wo ...

Vue登录页添加验证码

登录页添加验证码

Vue登录页添加验证码相关推荐

最新文章

热门文章