Bagaimana untuk melaksanakan kod pengesahan dalam vue

Kaedah Vue untuk melaksanakan kod pengesahan: 1. Buat komponen js; 2. Perkenalkan komponen; 3. Tentukan objek pengesahan; 4. Mulakan nod;

Persekitaran pengendalian artikel ini: sistem Windows 7, vue versi 2.9.6, komputer DELL G3.

Bagaimana vue melaksanakan kod pengesahan

Vue melaksanakan fungsi kod pengesahan

Kandungan khusus adalah seperti berikut

1. Kesan

2.1 Cipta komponen js

Kandungan

(Anda boleh menampalnya terus, anda perlu menukar lebar dan tinggi, mengubah suai lebar dan tinggi dalam kaedah _init)

2.2 Halaman log masuk

function GVerify (options) { // 创建一个图形验证码对象，接收options对象为参数
 this.options = { // 默认options参数值
  id: '', // 容器Id
  canvasId: 'verifyCanvas', // canvas的ID
  width: '80', // 默认canvas宽度
  height: '30', // 默认canvas高度
  type: 'number', // 图形验证码默认类型blend:数字字母混合类型、number:纯数字、letter:纯字母
  code: ''
 }
 
 if (Object.prototype.toString.call(options) === '[object Object]') { // 判断传入参数类型
  for (var i in options) { // 根据传入的参数，修改默认参数值
   this.options[i] = options[i]
  }
 } else {
  this.options.id = options
 }
 
 this.options.numArr = '0,1,2,3,4,5,6,7,8,9'.split(',')
 this.options.letterArr = getAllLetter()
 
 this._init()
 this.refresh()
}
 
GVerify.prototype = {
 /** 版本号**/
 version: '1.0.0',
 
 /** 初始化方法**/
 _init: function () {
  var con = document.getElementById(this.options.id)
  var canvas = document.createElement('canvas')
  // this.options.width = con.offsetWidth > 0 ? con.offsetWidth : '30'
  // this.options.height = con.offsetHeight > 0 ? con.offsetHeight : '30'
  this.options.width = '160'
  this.options.height = '50'
  canvas.id = this.options.canvasId
  canvas.width = this.options.width
  canvas.height = this.options.height
  canvas.style.cursor = 'pointer'
  canvas.innerHTML = '您的浏览器版本不支持canvas'
  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('2d')
  }
  ctx.textBaseline = 'middle'
 
  ctx.fillStyle = randomColor(180, 240)
  ctx.fillRect(0, 0, this.options.width, this.options.height)
 
  if (this.options.type === 'blend') { // 判断验证码类型
   var txtArr = this.options.numArr.concat(this.options.letterArr)
  } else if (this.options.type === 'number') {
   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.1 Memperkenalkan komponen

2.2.2 Tentukan objek pengesahan

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

Nota verifyCode

2.2.3 Mulakan nod

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

dimulakan dalam kaedah yang dipasang 'v_container' ialah id div

<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>

2.2.4 Sahkan sama ada input adalah betul

mounted () {
  this.verifyCode = new GVerify('v_container')
}

Melalui kaedah validate() daripada objek verifyCode yang ditakrifkan dalam data, jika input adalah betul, benar dikembalikan salah

3. >Pilihan tutorial video 5 vue.js terbaharu

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

"

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan kod pengesahan dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!