几种常见的注册登录验证(vue)-技术圈

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

雪天web

共 4960字，需浏览 10分钟

· 2023-08-28

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

滑动验证

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

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>

到此，效果已出现。

简单滑动验证

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

type = 2

type = 3

type = 4

type = 5

动动发财的手点个赞吧！