html 滑动拼图验证,vue登录滑动拼图验证

vue登录滑动拼图验证

一、安装插件：

npm install --save vue-monoplasty-slide-verify

二、main.js引入：

import SlideVerify from '../node_modules/vue-monoplasty-slide-verify' // 拼图验证码

Vue.use(SlideVerify)

三、组件中使用：

html(自定义关闭按钮，添加变量控制弹窗显隐)

:l="42"

:r="20"

:w="362"

:h="140"

slider-text="向右滑动"

@success="onSuccess"

@fail="onFail"

@refresh="onRefresh"

:style="{width:'362px'}"

class="slide-box"

ref="slideBlock"

v-show="flag"

return {

msg: '',

flag: false,

}

methods: {

// 拼图成功

onSuccess (){

this.getLogin()

// 拼图失败

onFail (){

this.msg = ''

// 拼图刷新

onRefresh (){

this.msg = ''

// 登录请求接口

getLogin () {

const loginData = {

account: '',

phone: this.ruleForm.userName,

// Password: sha3.sha3_256(md5(this.ruleForm.password)), // 加密

password: this.ruleForm.password,

email: '',

accountType: 2, // 登录类型手机号

checkCode: ''

}

// 接口

userLogin(loginData)

.then(res => {

console.log(res)

})

.catch(res => {

console.log(res)

})

// 点击登录校验-拼图出现

submitForm (formName) {

// 表单校验

this.$refs[formName].validate((valid) => {

// 验证通过

if (valid) {

// 拼图出现

this.flag = true

} else {

console.log('error submit!!')

return false

}

})

}

四、效果

五、没有啦嘻嘻

最平凡的一天，一切都挺好的

vue登录滑动拼图验证相关教程

html 滑动拼图验证,vue登录滑动拼图验证相关推荐

css3 滑动验证,Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
vue验证滑块功能,在生活中很多地方都可以见到,那么使用起来非常方便,基于vue如何实现滑块验证呢?下面通过代码给大家讲解. 效果图如下所示: 拖动前拖动后代码引用的css与js都是线上的将代码 ...
vue 后台登录滑动验证
1.引入vue-monoplasty-slide-verify组件到项目里先使用命令行安装:npm install --save vue-monoplasty-slide-verify 2.在mai ...
【VUE】vue实现登录滑动拼图验证的两种方法，纯前端组件验证以及前后端同时验证
vue实现登录滑动拼图验证的两种方法: 第一种是纯前端组件验证,只能区分是人为操作还是机器操作. 第二种是前后端同时验证,这种方法加上后端校验相对会更安全一些.(注:在最底部加上了同时兼容移动端的方法 ...
uniapp、vue实现滑动拼图验证码
实际开发工作中,在登陆的时候需要短信验证码,但容易引起爬虫行为,需要用到反爬虫验证码,今天介绍一下拼图验证码,解决验证码反爬虫中的滑动验证码反爬虫. 原理滑动拼图验证码是在滑块验证码的基础上增加了一 ...
vue 登录模块滑动验证
vue 登录模块滑动验证借助阿里云云盾开发首先登陆账号开通验证码服务 https://yundun.console.aliyun.com/?spm=5176.2020520162.categori ...
wegame每次登陆都要滑动验证_Vue项目中实现用户登录及token验证
在前后端完全分离的情况下,Vue项目中实现token验证大致思路如下: 1.第一次登录的时候,前端调后端的登陆接口,发送用户名和密码 2.后端收到请求,验证用户名和密码,验证成功,就给前端返回一个to ...
vue 用户名重复验证_Vue项目中实现用户登录及token验证
在前后端完全分离的情况下,Vue项目中实现token验证大致思路如下: 1.第一次登录的时候,前端调后端的登陆接口,发送用户名和密码 2.后端收到请求,验证用户名和密码,验证成功,就给前端返回一个to ...
vue项目登录及token验证 vue-ant
在前后端完全分离的情况下,Vue项目中实现token验证大致思路如下: 1.第一次登录的时候,前端调后端的登陆接口,发送用户名和密码 2.后端收到请求,验证用户名和密码,验证成功,就给前端返回一个to ...
vue router.beforeEach跳转路由验证用户登录状态
使用vue判断验证用户登录状态导航钩子类似于生命周期钩子,包含路由进入前,进入后,更新时,退出前等几个周期,主要用于控制导航的前进后退或跳转等. 其中router.beforeEach就是路由进入前 ...

html 滑动拼图验证,vue登录滑动拼图验证

html 滑动拼图验证,vue登录滑动拼图验证相关推荐

最新文章

热门文章