Vue使用luosimao人机验证组件实现

最新推荐文章于 2025-07-01 16:42:38 发布

原创最新推荐文章于 2025-07-01 16:42:38 发布 · 2.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #luosimao

Vue.js 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何在Vue项目中使用luosimao的人机验证组件，通过实例展示了验证码的请求与验证过程，适用于网站登录或注册场景。

Vue使用luosimao人机验证组件实现

暂时的实现方法是把luosimao的回调写在了一个全局变量里。如有好的方法欢迎留言。

<template>
  <div class="login">
    <div class="logo">
      <div class="logo-box">
        <img height="100%" src="static/images/logo-1.png" alt="">
      </div>
    </div>
    <div class="form">
      <p class="form-label">请输入领取奖励的手机号</p>
      <div class="input-bj">
        <span class="input-bj-label ignore">+86</span>
        <input v-model="telephone" type="text" name="" value="" placeholder="请输入您的手机号">
        <span v-show="telephone" @click="clearTelephone" class="input-bj-icon"><i class="el-icon-error"></i></span>
      </div>
      <div class="input-bj margin-top">
        <span class="input-bj-label ignore">验证码</span>
        <input v-model="code" type="text" name="" value="" placeholder="6位数字验证码">
        <span @click="sendCode" class="input-bj-text">
          <span v-if="sendMsgDisabled">{{time+'秒后获取'}}</span>
          <span v-if="!sendMsgDisabled">发送验证码</span>
        </span>
      </div>
      <!-- <div class="margin-top">
        <div class="l-captcha" data-width="100%" data-callback="getResponse" data-theme="transparent" data-site-key="4ac658e355ae644de4b99d5bf7791708"></div>
      </div> -->
      <p class="error" v-show="checkTelephone">请输入正确的手机号</p>
      <button @click="submit" class="btn" type="button" name="button">登录</button>
    </div>
  </div>
</template>

<script>
  import axios from 'axios';
  export default {
    data () {
      return {
        telephone: '',
        code: '',
        checkTelephone:false,
        time:60,
        sendMsgDisabled:false
      }
    },
    mounted:()=>{
      let dom = document.getElementById("luosimao");
      if(dom){
         dom.parentNode.removeChild(dom);
       }
       var c = document.createElement('script');c.type = 'text/javascript';c.async = true;c.id="luosimao"
      c.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'captcha.luosimao.com/static/dist/captcha.js?v=201805071004';
       var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(c, s);
    },
    methods:{
      submit(){
        if(!this.telephone||!/^((1[3,5,8][0-9])|(14[5,7])|(17[0,6,7,8])|(19[7]))\d{8}$/.test(this.telephone)||!this.code){
          return false;
        }
        if(code){
          //有人机验证返回的操作
          }else{
          //使用了elementUI，没有请更换提示框
           this.$message.error('请完成人机验证！');
         }
      },
      clearTelephone(){
        this.telephone = '';
      },
      sendCode(){
        if(!this.telephone||!/^((1[3,5,8][0-9])|(14[5,7])|(17[0,6,7,8])|(19[7]))\d{8}$/.test(this.telephone)){
          this.checkTelephone = true;
          return false;
        }else{
          this.checkTelephone = false
        }
        if(this.sendMsgDisabled){
          return false;
        }
        this.sendMsgDisabled = true;
        let interval = window.setInterval(()=> {
          if ((this.time--) <= 0) {
            this.time = 60;
            this.sendMsgDisabled = false;
            window.clearInterval(interval);
           }
        }, 1000);
      },
    }
  }
  var code = ''
  window.getResponse = (res)=>{
    code = res;
  };
</script>

<style scoped>
.login{
  height: 100%;
}
.logo{
  padding: 50px 0;
  height: 200px;
  text-align: center;
}
.logo-box{
  margin-top: 20px;
  height: 160px;
}
.form{
  padding: 0 58px;
}
.form .form-label{
  color: #666666;
  margin: 0 0 25px 0;
  font-size: 24px;
}
/* input组件开始 */
.input-bj{
  width: 100%;
  height: 70px;
  border: 1px solid #c29957;
  border-radius: 35px;
  line-height: 70px;
  white-space: nowrap;
}
.input-bj-label{
  display: inline-block;
  text-align: right;
  color: #666666;
  width: 120px;
  font-size: 18px;
  height: 70px;
  vertical-align: top;
}
.ignore{
  /* font-size: 12px; */
}
.input-bj-label::after{
  content: '';
  height: 36px;
  display: inline-block;
  vertical-align: top;
  border-right: 1px solid #dedede;
  margin: 17px;
}
.input-bj-icon{
  float: right;
  margin-right: 32px;
  width: 100px;
  text-align: right;
  color: #b7b7b7;
  cursor: pointer;
}
input, button, select, textarea {
  outline: none;
  -webkit-appearance: none;
  border-radius: 0;
}
.input-bj input{
  display: inline-block;
  background: transparent;
  vertical-align: top;
  border: 0;
  height: 36px;
  font-size: 18px;
  margin-top: 17px;
  width: 45%;
  color: #fff;
}
.input-bj-text{
  float: right;
  margin-right: 32px;
  width: 150px;
  text-align: right;
  color: #c29957;
  /* cursor: pointer; */
  font-size: 24px;
  font-weight: bold;
}
/* input组件结束 */
.form .error{
  color: #666666;
  margin: 25px 0 0;
  font-size: 24px;
}
.margin-top{
  margin-top: 40px;
}
.btn{
  width: 100%;
  height: 70px;
  background: #c29957;
  font-size: 30px;
  color: #fff;
  border-radius: 35px;
  border:none;
  margin-top: 25px;
  margin-bottom: 200px;
}
</style>