Vue登录验证码

Vue登录验证码的实现

1、新建ValidCode.vue组件

<template> <div class="ValidCode disabled-select" :style="`width:${width}; height:${height}`" @click="refreshCode" > <span v-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.length const 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>

2、在Login.vue里新增表单

![(IAJJQ2TH9)K1H{T(TRDVJ](C:\Users\thinkpad\AppData\Roaming\Tencent\Users\1130009094\QQ\WinTemp\RichOle\(IAJJQ2TH9)K1H{T(TRDVJ.png)

 

2.1导入组件ValiCode.vue，新建变量validCode

import ValidCode from './ValidCode'export default { name: 'Login', components: { ValidCode },

 

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

createValidCode: '',methods: { createValidCode (data) { this.validCode = data },

3、在login里校验

if (valid) { // 表单校验合法 if (!this.user.validCode) { this.$message.error('请填写验证码') return } if (this.user.validCode.toLowerCase() !== this.validCode.toLowerCase()) { this.$message.error('验证码错误') return }

4、login源码

<template> <div class="wrapper"> <div style="margin: 100px auto; background-color: #fff; width: 350px; height: 350px; padding: 20px; border-radius: 10px"> <div style="margin: 20px 0; text-align: center; font-size: 20px"><b>登 录</b></div> <el-form :model="user" :rules="rules" ref="userForm"> <el-form-item prop="username"> <el-input size="medium" style="margin: 10px 0" prefix-icon="el-icon-user" v-model="user.username"></el-input> </el-form-item> <el-form-item prop="password"> <el-input size="medium" style="margin: 10px 0" prefix-icon="el-icon-lock" show-password v-model="user.password"></el-input> </el-form-item> <el-form-item> <div style="display: flex"> <el-input size="medium" prefix-icon="el-icon-key" v-model="user.validCode" style="width: 50%;" ></el-input> <ValidCode @input="createValidCode"/> </div> </el-form-item> <el-form-item style="margin: 10px 0; text-align: right"><el-button type="primary" size="small" autocomplete="off" @click="login">登录</el-button> <el-button type="warning" size="small" autocomplete="off" @click="$router.push('/register')">注册</el-button> </el-form-item> </el-form> </div> </div></template><script>import ValidCode from './ValidCode'export default { name: 'Login', components: { ValidCode }, data () { return { user: {}, rules: { username: [ { required: true, message: '请输入用户名', trigger: 'blur' }, { min: 3, max: 10, message: '长度在 3 到 5 个字符', trigger: 'blur' } ], password: [ { required: true, message: '请输入密码', trigger: 'blur' }, { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' } ], validCode: [{ required: true, trigger: 'change', message: '验证码不能为空' }] } } }, createValidCode: '', methods: { createValidCode (data) { this.validCode = data }, login () { this.$refs['userForm'].validate((valid) => { if (valid) { // 表单校验合法 if (!this.user.validCode) { this.$message.error('请填写验证码') return } if (this.user.validCode.toLowerCase() !== this.validCode.toLowerCase()) { this.$message.error('验证码错误') return } this.request.post('/user/login', this.user).then(res => { if (res.code === '200') { localStorage.setItem('user', JSON.stringify(res.data)) // 存储用户信息到浏览器 this.$router.push('/') this.$message.success('登录成功') } else { this.$message.error(res.msg) } }) } }) } }}</script><style>.wrapper { height: 100vh; background-image: linear-gradient(to bottom right, #FC466B , #3F5EFB); overflow: hidden;}</style>

 

5、实现结果