Vue实现验证码功能
本文主要介绍的是Vue实现验证码功能
·
创建js组件
链接:https://pan.baidu.com/s/19PXeSTNB-tWvOhIP7DYoHw
提取码:5nk9
(需要改宽度和高度,修改_init方法中的宽和高)
2.2.1 引入组件
import { GVerify } from '../assets/js/verifyCode';
2.2.2 定义验证对象
data() {
return{
loginForm: {
username: '',
password: '',
verifyCode:''
},
loginFormRuls: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 3, max: 12, message: '长度在 3 到 12 个字符', trigger: 'blur' }
],
verifyCode: [
{ required: true, message: '请输入验证码', trigger: 'blur' }
]
}
}
2.2.3 初始化节点
<el-form-item prop="icode" label-width='0'>
<el-row :gutter="10">
<el-col :span="12"><el-input v-model="loginForm.verifyCode" placeholder="验证码" @keyup.enter.native="submitForm"></el-input></el-col>
<el-col :span="12">
<div id="v_container"></div>
</el-col>
</el-row>
</el-form-item>
方式一,使用Notification弹窗提示验证码是否正确
mounted方法中初始化 'v_container' 为div的id
mounted () {
this.verifyCode = new GVerify('v_container')
}
2.2.4 验证输入的是否正确
通过在data中定义的verifyCode对象的validate()方法,如果输入正确返回true 错误返回 false
login() {
var that = this
// 获取验证码
var verifyCode = this.loginForm.verifyCode
var verifyFlag = this.verifyCode.validate(verifyCode)
if (!verifyFlag) {
that.$notify.error({
title: '系统提示',
message: '验证码输入错误'
})
return;
} else {
that.$notify({
title: '系统提示',
message: '验证码输入正确',
type: 'success'
})
}
// 登录按钮的表单预验证
this.$refs.loginFormRef.validate(async valid => {
const { data:res } = await this.$http.post('login', this.loginForm)
console.log(res)
if(!valid) return
if(res.meta.status !== 200) return this.$message.error(res.meta.msg)
this.$message.success('登录成功')
window.sessionStorage.setItem('token',res.data.token)
this.$router.push('/home')
})
}
完整代码:
html:
<template>
<div class="hello">
<div class='loginTable'>
<el-row class="mflexBox">
<el-col :span='13' class="loginImage">
<img src="../assets/images/left.jpg" height="404" alt="">
</el-col>
<el-col :sm="24" :xs="24" class="table loginForm">
<span class="table_name"><h1 class="font20">商品管理</h1></span>
<el-form :model="loginForm" ref="loginFormRef" :rules="loginFormRuls" label-width="80px" >
<el-form-item prop="username" label-width='0' >
<el-input prefix-icon="el-icon-user" v-model="loginForm.username" placeholder="用户名"></el-input>
</el-form-item>
<el-form-item prop="password" label-width='0'>
<el-input prefix-icon="el-icon-lock" type="password" v-model="loginForm.password" placeholder="密码"></el-input>
</el-form-item>
<el-form-item prop="icode" label-width='0'>
<el-row :gutter="10">
<el-col :span="12"><el-input v-model="loginForm.verifyCode" placeholder="验证码" @keyup.enter.native="submitForm"></el-input></el-col>
<el-col :span="12">
<div id="v_container"></div>
</el-col>
</el-row>
</el-form-item>
</el-form>
<el-button class="submit" type="primary" @click="login()">登录</el-button>
<el-button type="text" size="mini">忘记密码?</el-button>
</el-col>
</el-row>
</div>
</div>
</template>
js:
<script>
import { GVerify } from '../assets/js/verifyCode';
export default {
data() {
return{
loginForm: {
username: '',
password: '',
verifyCode:''
},
loginFormRuls: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 3, max: 12, message: '长度在 3 到 12 个字符', trigger: 'blur' }
],
verifyCode: [
{ required: true, message: '请输入验证码', trigger: 'blur' }
]
}
}
},
methods: {
login() {
var that = this
// 获取验证码
var verifyCode = this.loginForm.verifyCode
var verifyFlag = this.verifyCode.validate(verifyCode)
if (!verifyFlag) {
that.$notify.error({
title: '系统提示',
message: '验证码输入错误'
})
return;
} else {
that.$notify({
title: '系统提示',
message: '验证码输入正确',
type: 'success'
})
}
// 登录按钮的表单预验证
this.$refs.loginFormRef.validate(async valid => {
const { data:res } = await this.$http.post('login', this.loginForm)
console.log(res)
if(!valid) return
if(res.meta.status !== 200) return this.$message.error(res.meta.msg)
this.$message.success('登录成功')
window.sessionStorage.setItem('token',res.data.token)
this.$router.push('/home')
})
}
},mounted () {
this.verifyCode = new GVerify('v_container')
},
components:{
Notification
}
}
</script>
js:
<style lang="less" scoped>
@import '@/assets/css/main.less';
@import '@/assets/css/main.css';
@import '@/assets/css/indexMedia.css';
.hello{ display: flex; height: 100vh; flex-wrap: wrap; align-items: center; justify-content: center; background: url(../assets/images/login_bg.jpg) center center;
h1{font-weight: normal; margin-bottom:50px; color: #5a93fe;}
.loginTable{width:800px; }
.table{background:#fff; width:350px; padding:22px 30px; }
input{border-radius:50px;}
.reset_pas{font-size: 12px;}
.submit{background:linear-gradient(90deg, #19b4f1 0%, #0e73e8 100%) !important; width: 100%;}
.reset_pas{margin-top: 20px; display: inline-block; color: #5a93fe;}
}
</style>
今天觉得验证码提示的形式有点不舒服,所以改进了一下,不使用弹窗,现附上代码:
1、rules书写规则:
verifyCode: [
{ required: true, message: '请输入验证码', trigger: 'blur' },
{
validator: (rule, value, callback) => {
if (value !== '') {
if (value !== this.checkVerifyCode.options.code) {
callback(new Error('验证码输入错误'))
return false
} else {
callback()
}
}else{
callback(new Error('请输入验证码'))
return false
}
},
trigger: 'blur'
}
]
2、mounted写法:
mounted () {
this.checkVerifyCode = new GVerify('v_container')
}
3、同时:components 中的 Notification 可以删除了
开发的时候找到的,做个备忘,也分享给需要的伙伴。
更多推荐
已为社区贡献1条内容
所有评论(0)