vue-------滑動驗證

 

 

 

 

 

 

需要寫一個滑動驗證是否為本人操作，框架用的是vue的elementui，

邏輯是，通過后端的接口取出來相應的大圖和小圖展示到布局中，然后判斷滑行距離（誤差十像素之內）

有需要的可以私信我

放上代碼供參考：　　

 

<template>  
　　<div>
　　<el-form class="forgetpasswordVerificaUser" :rules="forgetpasswordinput" :model="failnuser" ref="failnuser">
      <el-form-item prop="username">
        <span class="forgetpasswordVerificaUserImg">
          <img src="../../assets/img/login/yonghuming.png" />
        </span>
        <el-input ref="input" id="forgetpasswordVerificaUserInputFirst" v-model="failnuser.input" placeholder="請輸入郵箱號/手機號" type="text" tabindex="1" autofocus />
      </el-form-item>

      <div @click="ejectDialog" style="width:0px;margin-left:38.5%">
        <el-form-item>
          <span class="forgetpasswordVerificaUserImg forgetpasswordVerificaUserImgpoint">
            <img id="forgetpasswordVerificaUserImg" src="../../assets/img/forgetpassword/dianjichufa.png"
            />
          </span>
          <el-input id="forgetpasswordVerificaUserInput"
            class="verificainput" placeholder="點擊進行驗證" disabled />
        </el-form-item>
      </div>
      <el-button type="primary" @click="goactiveone(active,'failnuser',failnuser.input)"
        class="forgetpasswordVerificaUserBtn"
      >確定</el-button>
    </el-form>

    <!-- 驗證彈窗樣式 -->
    <el-dialog :visible.sync="dialogVisible" :modal="false" class="forgetpasswordVerificaDialog">
      <!-- 可以用兩個div進行嵌套更改細則 -->
      <div class="forgetpasswordVerificaDialogspan">
        <span>拖動下方滑塊完成拼圖</span>
        <i @click="RefreshDialog"
          class="el-icon-refresh-right" style="font-size:22px;color: #4393FD;margin-left:130px;margin-top:-1px;cursor: pointer;"
        ></i>
      </div>
      <div style="margin-top:20px;position:relative;">
        <div >
          <img style="width:360px;height:195px;" :src = this.bigimgData />
        </div>
        <div style="position:absolute;left:25px;z-index:999;" :style="{top:imgHeight}" id="smallImg">
          <img :src = this.smallimgData  >
        </div>
      </div>
      <div style="width:360px;height:15px;background: rgba(0,0,0,0.10);border-radius: 8px;border-radius: 8px;margin-top:25px;"
      >　　　//鼠標點擊和松開事件執行相應的事件
          <div  @mousedown="SlidingMouseDown" @mouseup="babn" id="Sliding_verication" class="forgetpasswordVerificaDialogBtn">
            <el-button type="primary" round >| | |
            </el-button>
          </div>
  
      </div>
    </el-dialog>
  </div>
</template>

<script> import { validEmail, validPhone } from "@/components/login/validate"; import config from "@/config"; import forgetpasswordVerificaCheckImg from "../../assets/img/forgetpassword/xuanzhong.png"; export default { data() {
　　　　//輸入框驗證 var checkUserName = (rule, value, callback) => { if (this.failnuser.input == "" || !this.failnuser.input.trim()) { this.failnuser.input = ""; callback(new Error("手機號/郵箱不能為空")); } if (!validEmail(this.failnuser.input) && !validPhone(this.failnuser.input)) { callback(new Error("請輸入正確的格式")); } else { callback(); } }; return { active: 1, dialogVisible: false, smallImg:"", bigImg:"", bigimgData:"", smallimgData:"", imgHeight:"", //滑塊驗證成功是否能再次點擊出來彈窗
      isTrue:true, failnuser:{ input: "18336638783", }, // 是否進行了驗證
      key:false, forgetpasswordinput: { username: [ { required: true, validator: checkUserName, trigger: "blur" } ] } }; }, mounted(){ }, methods: { // 鼠標按下
 SlidingMouseDown(e){ var box1 = document.getElementById("Sliding_verication"); var box2 = document.getElementById("smallImg"); var ol =e.clientX - box1.offsetLeft; // var ot = event.clientX - box2.offsetLeft;
                    document.onmousemove = function(e) { var left =e.clientX - ol;
　　　　　　　　　　　　　　　　//讓滑動塊在布局之內 if (left > 10 && left < 305) { box1.style.left = left + "px"; /*賦值*/ box2.style.left = left + "px"; } } }, //鼠標松開
 babn(){
　　　　　　//清理負面狀態 document.onmousemove = null; document.onmouseup = null; var box1 = document.getElementById("Sliding_verication"); var box2 = document.getElementById("smallImg");
　　　　//刪除取到的位置后面的px(接扣里面傳數字就好了) var moveLength=box1.style.left.substring(0,box1.style.left.length-2);
　　　　　　//前面自己配置的路徑 this.$axios.get(config.KEY.URL_RESGIST +"/slither-proving/verifyImageCode.do?moveLength="+moveLength) .then(res => { console.log(res);
　　　　　　　　　　//判斷接口里面的狀態展示相應操作 if(res.data.errcode == 1){
　　　　　　　　　　　　//讓它位置回到原點 setTimeout(() =>{ box1.style.left = 20 + "px"; box2.style.left = 20 + "px"; },1000) }else if(res.data.errcode == -1){ this.$message.error("滑動驗證已過期，請刷新"); setTimeout(() =>{ box1.style.left = 20 + "px"; box2.style.left = 20 + "px"; },1000) }else{
　　　　　　　　　　　　//成功執行的操作 setTimeout(() => { this.isTrue = false ; this.key=true; this.dialogVisible = false; var verificainput = document.getElementById( "forgetpasswordVerificaUserInput" ); //查找元素
                      verificainput.placeholder = "驗證成功"; verificainput.style = "border:1px solid #07DA08;background: #F9F9F9;"; //改變樣式
                      var verificaimg = document.getElementById( "forgetpasswordVerificaUserImg" ); verificaimg.src = forgetpasswordVerificaCheckImg; var verificainputFirst = document.getElementById( "forgetpasswordVerificaUserInputFirst" ); verificainputFirst.disabled = true; },1000) } }).catch(err => { this.$message({ message: "服務器錯誤" }); }) }, goactiveone(val,formName,inputValue) {
　　　　　　 this.$refs[formName].validate((valid) => {
　　　　　　　　

//當輸入框驗證成功執行操作if (valid){　　　　　　　　　　//當滑動驗證成功以后進行下一步

if(this.key){
　　　　　　　　　　　　//傳值（步驟和輸入框的值）給父組件(父組件取到這個輸入框的值直接進行渲染) this.$emit("goverificauser", [val,inputValue]); }else{ this.$message.error("請先進行滑動驗證"); } } else {
　　　　　　　　　　//先進行輸入框驗證 return false; } }); }, ejectDialog() {
　　　　//當未進行滑動驗證時 if(this.isTrue){
　　　　　　//判斷是手機格式還是郵箱格式執行相應的操作，請求相應的接口 if (this.failnuser.input !== "" && validPhone(this.failnuser.input)) { console.log("手機號格式"); this.$axios .get( config.KEY.URL_LOGIN + "/getPhone?" + "phone=" + this.failnuser.input ).then(res => { console.log(res); if (res.data == false) { setTimeout(() => { this.$message.error("該手機號未在平台進行注冊"); this.failnuser.input = "" }, 500); }else{ this.dialogVisible = true; } this.getDynamicimg() }) .catch(err => { console.log(err); this.$message({ message: "服務器錯誤" }); }); } else if (this.failnuser.input !== "" && validEmail(this.failnuser.input)) { console.log("郵箱格式"); this.$axios .get( config.KEY.URL_LOGIN + "/getEmail?" + "email=" + this.failnuser.input ) .then(res => { console.log(res); if (res.data == false) { setTimeout(() => { this.$message.error("該郵箱未在平台進行注冊"); this.failnuser.input = "" }, 500); }else{ this.dialogVisible = true; } }) .catch(err => { this.$message({ message: "服務器錯誤" }); }); } else { this.$message.error("請先輸入手機號/郵箱"); } } }, getDynamicimg(){ this.$axios .get( config.KEY.URL_RESGIST + "/slither-proving/getImageVerifyCode.do", ).then(res => { console.log(res);
　　　　　　　　//把接口中取得的大圖和小圖的編碼轉化成可以展示的格式
　　　　　　　　//< img src="data:image:jpeg;base64,參數" />
 this.bigImg=res.data.bigImage; this.bigimgData="data"+":"+"image:jpeg;base64,"+this.bigImg this.smallImg = res.data.smallImage; this.smallimgData = "data"+":"+"image:jpeg;base64,"+this.smallImg this.imgHeight = res.data.yHeight + "px"; }).catch(err => { this.$message({ message: "服務器錯誤" }); }) }, RefreshDialog(){ this.getDynamicimg(); } } }; </script> <style> </style>

 

需要在main.js中配置是否請求攜帶cookie

 

// 請求是否攜帶cookie
axios.defaults.withCredentials=true;

 

接口文檔：（刪除了主要部分但是參數都在）

參數    沒有參數

請求方式    get
返回參數    Errcode：錯誤碼，如果為零沒有錯誤
smallImage:要拖動的小圖片的base64
bigImage：大圖的base64
Errmsg:錯誤消息返回success則為獲取成功
yHeight：圖片距離下邊框的高度



接口說明    /**
 * @param @return 參數說明
* @return BaseRestResult 返回類型
* @Description: 生成滑塊拼圖驗證碼
*/

    

接口說明    /**
 * 校驗滑塊拼圖驗證碼
*
 * @param moveLength 移動距離
* @return BaseRestResult 返回類型
* @Description: 生成圖形驗證碼


接口說明    /**
 * 校驗滑塊拼圖驗證碼
*
 * @param moveLength 移動距離
* @return BaseRestResult 返回類型
* @Description: 生成圖形驗證碼


參數    moveLength：拼圖圖片移動的距離
返回參數    Errcode:1,errmsg=”驗證失敗”
Errcode:0,errmsg=”驗證成功”
誤差    運許有10px左右的誤差