【VUE】vue+Verify实现防刷验证码验证

因为公司要做防刷，所以要验证码功能，于是又在网上找，看了一圈都是需要收费的，最后同事找了一个纯前端的开源，免费的验证码插件Verify，Verify的github地址:https://github.com/Hibear/verify，但是毕竟不需要后端配合，对安全性要求不高的可以安利一下验证码效果图验证码图片Verify使用Verify的资源包下载，注意使用时还要引入下载...

文章共1,086字 · 阅读需要大约4分钟

一键AI生成摘要，助你高效阅读

问答

北极星丶超帅的

7489人浏览 · 2018-10-11 17:16:03

北极星丶超帅的 · 2018-10-11 17:16:03 发布

因为公司要做防刷，所以要验证码功能，于是又在网上找，看了一圈都是需要收费的，最后找了一个纯前端的开源，免费的验证码插件Verify，Verify的github地址: https://github.com/Hibear/verify，但是毕竟不需要后端配合，对安全性要求不高的可以安利一下

验证码效果图

验证码图片

Verify使用

Verify的资源包下载，注意使用时还要引入下载包中的images、fonts文件夹。

<!-- index.html -->
<head>
<script src="static/js/jquery.min.js"></script>
<script src="static/js/verify.min.js"></script>
</head>

<!-- main.js -->
import './assets/css/verify.css'   //验证码

为了方便使用，抽出来做组件mpanel.vue，并根据自己的需求改了验证码的样式

<!-- mpanel.vue -->
<template>
    <transition name="fade">
        <div class="modal-box">
            <div class="modal-content">
                <!--头部-->
                <div class="modal-header">
                    <p class="title">验证码验证</p>
                    <a @click="onCancel"
                       class="modal-close"
                       href="javascript:void(0)">
                        <x-icon type="ios-close"
                                size="30"></x-icon>
                    </a>
                </div>
                <!--内容区域-->
                <div class="modal-body">
                    <div id="mpanel"
                         ref="mpanel">
                    </div>
                  <div id="check-btn" class="verify-btn">确定</div>
                </div>
                <!--尾部,操作按钮  -->
                <!-- <div class="modal-footer">
                </div> -->
            </div>
        </div>
    </transition>

</template>

<script>
import { XDialog, TransferDomDirective as TransferDom } from 'vux'
export default {
    name: 'mpanel',
    data() {
        return {
            path: null
        }
    },
    mounted() {
        this.initMpanel();
    },
    methods: {
        onCancel() {
            this.$emit('close');
        },
        // 提示框
        showToolTip(text, timeout = 2000) {
            this.$vux.toast.text(text);
        },
        // 验证
        initMpanel() {
            this.codeVerify()  //运算验证码
            // this.slideVerify()  //拼图验证码
            // this.pointsVerify()  //拼字验证码
        },
        // 运算验证码
        codeVerify() {           // https://veui.net/document/index
            let _this = this
            $('#mpanel').codeVerify({
                type: 2,
                figure: 100,
                arith: 0,
                width: '100%',
                height: '50px',
                fontSize: '30px',
                btnId: 'check-btn',
                ready: function () {
                },
                success: function () {
                    _this.showToolTip("验证成功！")
                    // 向父组件传值
                    _this.$emit('success');
                },
                error: function () {
                    _this.showToolTip("验证码不匹配！")
                }
            });
        },
        // 拼图验证码
        slideVerify() {           // https://veui.net/document/index
            let _this = this
            $('#mpanel').slideVerify({
                type: 2,
                mode: 'pop',
                vOffset: 5,
                vSpace: 5,
                explain: '向右滑动完成验证',
                imgUrl: 'http://txh-cdn.96qbhy.com/',
                imgName: ['20181010170653M58v1KlH.jpg', '20181010170719McH7EkZK.jpg'],
                imgSize: {
                    width: '100%',
                    height: '200px',
                },
                blockSize: {
                    width: '40px',
                    height: '40px',
                },
                barSize: {
                    width: '100%',
                    height: '40px',
                },
                ready: function () {
                },
                success: function () {
                    _this.showToolTip("验证成功！")
                    // 向父组件传值
                    _this.$emit('success');
                },
                error: function () {
                    _this.showToolTip("验证码不匹配！")
                }
            });
        },
        // 拼字验证码
        pointsVerify() {           // https://veui.net/document/index
            let _this = this
            $('#mpanel').pointsVerify({
                mode: 'pop',
                defaultNum: 4,
                checkNum: 2,
                vSpace: 5,
                imgUrl: 'http://txh-cdn.96qbhy.com/',
                imgName: ['20181010170653M58v1KlH.jpg', '20181010170719McH7EkZK.jpg'],
                imgSize: {
                    width: '100%',
                    height: '200px',
                },
                barSize: {
                    width: '100%',
                    height: '40px',
                },
                ready: function () {
                },
                success: function () {
                    _this.showToolTip("验证成功！")
                    // 向父组件传值
                    _this.$emit('success');
                },
                error: function () {
                    _this.showToolTip("验证码不匹配！")
                }
            });
        }
    }
}
</script>
<style scoped>
.modal-box {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  left: 0;
  top: 0;
  z-index: 100;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}
.modal-content {
  position: relative;
  width: 300px;
  /* background: #fff; */
  border-radius: 10px;
  box-sizing: border-box;
  font-size: 13px;
}
.modal-header {
  text-align: center;
  border: 0;
}
.modal-header .title {
  font-size: 20px;
  font-weight: 550;
}
.modal-body{
    margin-top: -25px;
}
.modal-close {
  position: absolute;
  right: -10px;
  top: -15px;
  color: #999494;
  font-size: 14px;
}

.fade-enter-active {
  animation: fade-in 0.5s;
}
.fade-leave-active {
  animation: fade-in 0.5s reverse;
}
@keyframes fade-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
</style>

验证码组件引用

<!-- home.vue -->
</template>
...
    <!-- 验证码 start -->
    <mpanel v-if="mpanelShow"
            @close="mpanelShow = false"
            @success="onMpanelSuccess"></mpanel>
    <!-- 验证码 end -->
...
</template>
<script>
import Mpanel from 'Components/mpanel/mpanel'   //验证码
export default {
  data() {
    return {
      mpanelShow: false, //验证码是否显示
    }
  },
  methods: {
    // 是否要验证
    checkVerifyCodeApi(options) {
      checkVerifyCode(options).then(res => {
        if (res.data && res.data.code === 0) {
          //不要验证执行代码
        } else { 
          //需要验证码,弹窗显示
          this.mpanelShow = true;
        }
      })
    },
    // 验证通过
    onMpanelSuccess() {
      this.mpanelShow = false;
      //执行代码
    }
  }
}