vue怎麼實作驗證碼-Vue.js-PHP中文網

首頁

web前端

Vue.js

vue怎麼實作驗證碼

藏色散人

Nov 02, 2021 pm 03:06 PM

vue驗證碼

vue實作驗證碼的方法：1、建立js元件；2、引入元件；3、定義驗證物件；4、初始化節點；5、透過validate()方法驗證輸入的是否正確即可。

vue怎麼實作驗證碼

本文操作環境：windows7系統、vue2.9.6版，DELL G3電腦。

vue怎麼實作驗證碼

Vue實作驗證碼功能

具體內容如下

1.效果

vue怎麼實作驗證碼

2.程式碼

2.1 建立js元件

vue怎麼實作驗證碼

內容

（可直接貼上過去，需要改寬度和高度，修改_init方法中的寬和高）

function GVerify (options) { // 创建一个图形验证码对象，接收options对象为参数
 this.options = { // 默认options参数值
  id: &#39;&#39;, // 容器Id
  canvasId: &#39;verifyCanvas&#39;, // canvas的ID
  width: &#39;80&#39;, // 默认canvas宽度
  height: &#39;30&#39;, // 默认canvas高度
  type: &#39;number&#39;, // 图形验证码默认类型blend:数字字母混合类型、number:纯数字、letter:纯字母
  code: &#39;&#39;
 }
 
 if (Object.prototype.toString.call(options) === &#39;[object Object]&#39;) { // 判断传入参数类型
  for (var i in options) { // 根据传入的参数，修改默认参数值
   this.options[i] = options[i]
  }
 } else {
  this.options.id = options
 }
 
 this.options.numArr = &#39;0,1,2,3,4,5,6,7,8,9&#39;.split(&#39;,&#39;)
 this.options.letterArr = getAllLetter()
 
 this._init()
 this.refresh()
}
 
GVerify.prototype = {
 /** 版本号**/
 version: &#39;1.0.0&#39;,
 
 /** 初始化方法**/
 _init: function () {
  var con = document.getElementById(this.options.id)
  var canvas = document.createElement(&#39;canvas&#39;)
  // this.options.width = con.offsetWidth > 0 ? con.offsetWidth : &#39;30&#39;
  // this.options.height = con.offsetHeight > 0 ? con.offsetHeight : &#39;30&#39;
  this.options.width = &#39;160&#39;
  this.options.height = &#39;50&#39;
  canvas.id = this.options.canvasId
  canvas.width = this.options.width
  canvas.height = this.options.height
  canvas.style.cursor = &#39;pointer&#39;
  canvas.innerHTML = &#39;您的浏览器版本不支持canvas&#39;
  con.appendChild(canvas)
  var parent = this
  canvas.onclick = function () {
   parent.refresh()
  }
 },
 
 /** 生成验证码**/
 refresh: function () {
  var canvas = document.getElementById(this.options.canvasId)
  if (canvas.getContext) {
   var ctx = canvas.getContext(&#39;2d&#39;)
  }
  ctx.textBaseline = &#39;middle&#39;
 
  ctx.fillStyle = randomColor(180, 240)
  ctx.fillRect(0, 0, this.options.width, this.options.height)
 
  if (this.options.type === &#39;blend&#39;) { // 判断验证码类型
   var txtArr = this.options.numArr.concat(this.options.letterArr)
  } else if (this.options.type === &#39;number&#39;) {
   var txtArr = this.options.numArr
  } else {
   var txtArr = this.options.letterArr
  }
 
  for (var i = 1; i <= 4; i++) {
   var txt = txtArr[randomNum(0, txtArr.length)]
   this.options.code += txt
   ctx.font = randomNum(this.options.height / 2, this.options.height) + &#39;px SimHei&#39; // 随机生成字体大小
   ctx.fillStyle = randomColor(50, 160) // 随机生成字体颜色
   ctx.shadowOffsetX = randomNum(-3, 3)
   ctx.shadowOffsetY = randomNum(-3, 3)
   ctx.shadowBlur = randomNum(-3, 3)
   ctx.shadowColor = &#39;rgba(0, 0, 0, 0.3)&#39;
   var x = this.options.width / 5 * i
   var y = this.options.height / 2
   var deg = randomNum(-30, 30)
   /** 设置旋转角度和坐标原点**/
   ctx.translate(x, y)
   ctx.rotate(deg * Math.PI / 180)
   ctx.fillText(txt, 0, 0)
   /** 恢复旋转角度和坐标原点**/
   ctx.rotate(-deg * Math.PI / 180)
   ctx.translate(-x, -y)
  }
  /** 绘制干扰线**/
  for (var i = 0; i < 4; i++) {
   ctx.strokeStyle = randomColor(40, 180)
   ctx.beginPath()
   ctx.moveTo(randomNum(0, this.options.width), randomNum(0, this.options.height))
   ctx.lineTo(randomNum(0, this.options.width), randomNum(0, this.options.height))
   ctx.stroke()
  }
  /** 绘制干扰点**/
  for (var i = 0; i < this.options.width / 4; i++) {
   ctx.fillStyle = randomColor(0, 255)
   ctx.beginPath()
   ctx.arc(randomNum(0, this.options.width), randomNum(0, this.options.height), 1, 0, 2 * Math.PI)
   ctx.fill()
  }
 },
 
 /** 验证验证码**/
 validate: function (code) {
  var code = code.toLowerCase()
  var v_code = this.options.code.toLowerCase()
  if (code == v_code) {
   return true
  } else {
   return false
  }
 }
}
/** 生成字母数组**/
function getAllLetter () {
 var letterStr = &#39;a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z&#39;
 return letterStr.split(&#39;,&#39;)
}
/** 生成一个随机数**/
function randomNum (min, max) {
 return Math.floor(Math.random() * (max - min) + min)
}
/** 生成一个随机色**/
function randomColor (min, max) {
 var r = randomNum(min, max)
 var g = randomNum(min, max)
 var b = randomNum(min, max)
 return &#39;rgb(&#39; + r + &#39;,&#39; + g + &#39;,&#39; + b + &#39;)&#39;
}
 
export {
 GVerify
}

2.2 登入頁面

2.2.1 引入元件

[....<script>]
 
import { GVerify } from &#39;../../static/js/verifyCode&#39;;
 
[export default { ....]

2.2.2 定義驗證物件

注意verifyCode

data: function () {
  return {
   title: &#39;若晨后台管理系统&#39;,
   ruleForm: {
    username: &#39;&#39;,
    password: &#39;&#39;,
    verifyCode: &#39;&#39;
   },
   rules: {
    username: [
     { required: true, message: &#39;请输入用户名&#39;, trigger: &#39;blur&#39; }
    ],
    password: [{ required: true, message: &#39;请输入密码&#39;, trigger: &#39;blur&#39; }],
    verifyCode: [
     { required: true, message: &#39;请输入验证码&#39;, trigger: &#39;blur&#39; }
    ]
   },
   verifyCode: null
  }
 },

2.2.3 初始化節點

<el-form-item prop="verifyCode" class="verifyCodeItemCss">
     <el-input class="verify_css" placeholder="请输入4位验证码" v-model="ruleForm.verifyCode" @keyup.enter.native="submitForm(&#39;ruleForm&#39;)"></el-input>
     <!--关键 ↓-->
     <div id="v_container"></div>
</el-form-item>

mounted方法中初始化'v_container' 為div的id

mounted () {
  this.verifyCode = new GVerify(&#39;v_container&#39;)
}

2.2.4 驗證輸入的是否正確

透過data中定義的verifyCode物件的validate()方法，如果輸入正確回傳true 錯誤回傳false

var that = this
 
   // 获取验证码
   var verifyCode = this.ruleForm.verifyCode
   var verifyFlag = this.verifyCode.validate(verifyCode)
   if (!verifyFlag) {
    that.$notify.error({
     title: &#39;系统提示&#39;,
     message: &#39;验证码输入错误&#39;
    })
    return;
   } else {
    that.$notify({
     title: &#39;系统提示&#39;,
     message: &#39;验证码输入正确&#39;,
     type: &#39;success&#39;
    })
   }

3 .全部頁面代碼


 
<script>
import { GVerify } from &#39;../../static/js/verifyCode&#39;;
export default {
 data: function () {
  return {
   title: &amp;#39;若晨后台管理系统&amp;#39;,
   ruleForm: {
    username: &amp;#39;&amp;#39;,
    password: &amp;#39;&amp;#39;,
    verifyCode: &amp;#39;&amp;#39;
   },
   rules: {
    username: [
     { required: true, message: &amp;#39;请输入用户名&amp;#39;, trigger: &amp;#39;blur&amp;#39; }
    ],
    password: [{ required: true, message: &amp;#39;请输入密码&amp;#39;, trigger: &amp;#39;blur&amp;#39; }],
    verifyCode: [
     { required: true, message: &amp;#39;请输入验证码&amp;#39;, trigger: &amp;#39;blur&amp;#39; }
    ]
   },
   verifyCode: null
  }
 },
 mounted () {
  // 随机播放帧数
  this.videoCut()
 
  this.verifyCode = new GVerify(&#39;v_container&#39;)
 },
 methods: {
  submitForm (formName) {
   var that = this
 
   // 获取验证码
   var verifyCode = this.ruleForm.verifyCode
   var verifyFlag = this.verifyCode.validate(verifyCode)
   if (!verifyFlag) {
    that.$notify.error({
     title: &amp;#39;系统提示&amp;#39;,
     message: &amp;#39;验证码输入错误&amp;#39;
    })
    return;
   } else {
    that.$notify({
     title: &amp;#39;系统提示&amp;#39;,
     message: &amp;#39;验证码输入正确&amp;#39;,
     type: &amp;#39;success&amp;#39;
    })
   }
 
   this.$refs[formName].validate(valid => {
    if (valid) {
     // 判断是否登录成功
 
     let param = {
      userName: that.ruleForm.username,
      passWord: that.ruleForm.password
     }
 
     // this.axios.post(this.$service.user.USER_LOGIN_API.url,param).then(res=>{
     //   console.log("请求成功",res)
     //   if(res.data.data != undefined){
     //     that.$notify({
     //       title: &#39;系统提示&#39;,
     //       message: &#39;登录成功&#39;,
     //       type:"success"
     //     });
     //           // 存local
     //     localStorage.setItem(&#39;ms_username&#39;,res.data.data.userNickName);
     //     localStorage.setItem(&#39;token&#39;,res.data.data.id);
     //     self.$router.push(&#39;/index&#39;);
     //   }else{
     //     that.$notify.error({
     //     title: &#39;系统提示&#39;,
     //     message: &#39;用户账户密码输出错误&#39;
     //     });
     //   }
 
     localStorage.setItem(&#39;ms_username&#39;, &#39;admin&#39;)
     localStorage.setItem(&#39;token&#39;, &#39;admin&#39;)
     that.$router.push(&#39;/index&#39;)
    } else {
     console.log(&#39;error submit!!&#39;)
     return false
    }
   })
  },
 
  videoCut () {
   $(&#39;video&#39;).on(&#39;loadedmetadata&#39;, function (event) {
    var duration = Math.ceil(this.duration)
    this.currentTime = Math.round(Math.random() * duration)
   })
  }
 }
}
</script>

推薦學習：《最新的5個vue.js影片教學精選》

以上是vue怎麼實作驗證碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

vue.js和React：了解關鍵差異Apr 10, 2025 am 09:26 AM

Vue.js適合小型到中型項目，而React更適用於大型、複雜應用。 1.Vue.js的響應式系統通過依賴追踪自動更新DOM，易於管理數據變化。 2.React採用單向數據流，數據從父組件流向子組件，提供明確的數據流向和易於調試的結構。

vue.js vs.反應：特定於項目的考慮因素Apr 09, 2025 am 12:01 AM

Vue.js適合中小型項目和快速迭代，React適用於大型複雜應用。 1)Vue.js易於上手，適用於團隊經驗不足或項目規模較小的情況。 2)React的生態系統更豐富，適合有高性能需求和復雜功能需求的項目。

vue怎麼a標籤跳轉Apr 08, 2025 am 09:24 AM

實現 Vue 中 a 標籤跳轉的方法包括：HTML 模板中使用 a 標籤指定 href 屬性。使用 Vue 路由的 router-link 組件。使用 JavaScript 的 this.$router.push() 方法。可通過 query 參數傳遞參數，並在 router 選項中配置路由以進行動態跳轉。

vue怎麼實現組件跳轉Apr 08, 2025 am 09:21 AM

Vue 中實現組件跳轉有以下方法：使用 router-link 和 <router-view> 組件進行超鏈接跳轉，指定 :to 屬性為目標路徑。直接使用 <router-view> 組件顯示當前路由渲染的組件。使用 router.push() 和 router.replace() 方法進行程序化導航，前者保存歷史記錄，後者替換當前路由不留記錄。

vue的div怎麼跳轉Apr 08, 2025 am 09:18 AM

Vue 中 div 元素跳轉的方法有兩種：使用 Vue Router，添加 router-link 組件。添加 @click 事件監聽器，調用 this.$router.push() 方法跳轉。

vue跳轉怎麼傳值Apr 08, 2025 am 09:15 AM

Vue 中數據傳遞有兩種主要方式：props：單向數據綁定，從父組件傳遞數據給子組件。事件：使用事件和自定義事件在組件之間傳遞數據。

vue引入方式怎麼跳轉Apr 08, 2025 am 09:12 AM

Vue.js提供了三種跳轉方式：原生 JavaScript API：使用 window.location.href 進行跳轉。 Vue Router：使用 <router-link> 標籤或 this.$router.push() 方法進行跳轉。 VueX：通過 dispatch action 或 commit mutation 來觸發路由跳轉。