几种常见的注册登录验证(vue)

雪天web

共 4960字,需浏览 10分钟

 ·

2023-08-28 14:38

本文收集几种常见的注册登录验证源码,分别有滑动验证,拼图验证,组词验证。

滑动验证

git地址: https://gitee.com/monoplasty/vue-monoplasty-slide-verify

7c1ae2747377f9b4adbcc7c9b2c54027.webp

01.安装包:

npm i vue-monoplasty-slide-verify -S

02. main.js中导入并使用

      import SlideVerify from 'vue-monoplasty-slide-verify'
Vue.use(SlideVerify)

03.Template 模板中

      <el-card class="cover">
      <slide-verify
              :l="42"
              :r="10"
              :w="310"
              :h="155"
              slider-text="向右滑动"
              @success="onSuccess"
              @fail="onFail"
              @refresh="onRefresh">

      </slide-verify>
    </el-card>

04.style中css

      .cover{
  width: fit-content;
  background-color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 1000;
}

05.js部分

      <script>
export default {
  name: 'App',
  data() {
    return {
      loginAdmin: {}
    }
  },
  methods: {
    onSuccess() { //滑块验证通过之后触发的
      alert("验证成功")
      // 下面是跳转首页代码
    },
    onFail() {
      alert("验证失败")
    },
    onRefresh() {
     
    }
  }
}
</script>

到此,效果已出现。


简单滑动验证

094b47ffa9e6f0fc7ea849724e3eed17.webp

01.安装包

npm install vue-drag-verify -S

02.template代码

      <template>
  <div id="app">
    <drag-verify :width="width" :height="height" :text="text" :success-text="successText" :background="background"
      :progress-bar-bg="progressBarBg" :completed-bg="completedBg" :handler-bg="handlerBg" :handler-icon="handlerIcon"
      :text-size="textSize" :success-icon="successIcon" ref="Verify">

    </drag-verify>
  </div>
</template>

02.js代码(需component中注册)

      <script>
import dragVerify from 'vue-drag-verify'
export default {
  name: 'App',
  components: { dragVerify },
  data() {
    return {
      handlerIcon: "fa fa-angle-double-right",
      successIcon: "fa fa-check",
      background: "#cccccc",
      progressBarBg: "#4b0",
      completedBg: "#ff1234",
      handlerBg: "#fff",
      text: "请将滑块拖动到右侧",
      successText: "验证成功",
      width: 320,
      height: 42,
      textSize: "18px",
      isCircle: 'true'
    }
  }
}
</script>


滑动验证合集(一个包,5种验证方式都包含) 

文档地址 https://gitcode.net/mirrors/mizuka-wu/vue2-verify?utm_source=csdn_github_accelerator

01.安装包

npm install vue2-verify -S

02.template代码(type值不同验证方式不同)

      <Verify :type="1" @success="success"></Verify>
    

03.js代码

      <script>
import Verify from 'vue2-verify'
export default {
  name: 'App',
  components: {Verify},
  data() {
    return {
    }
  },
  methods: {
    success(e){
      //成功后的返回
      alert("成功")
    }
  }
}
</script>

———— type 值不同验证方式不同:

当type = 1

865831ffb452852c4e3199f3ec62f3cb.webp

type = 2

857aefbf3114e38ab5654457ad82e868.webp

type = 3

b7f08a413b3c6c9d32c58a20d12eb010.webp

type = 4

386ced70c02c2f32f6d96525808d2fb5.webp

type = 5

9c634d274f690797ca8de6d9349f9e2f.webp

e20df1cf72621633d02167b9856d61e5.webpe20df1cf72621633d02167b9856d61e5.webp动动发财的手点个赞吧!

浏览 25
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报