vue+element-ui集成随机验证码+用户名+密码的form表单验证功能


Posted in Javascript onAugust 05, 2018

 在登入页面,我们往往需要通过输入验证码才能进行登入,那我们下面就详讲一下在vue项目中如何配合element-ui实现这个功能

第一步:自定义一个生产随机验证码的组件,其本质是使用canvas绘制,详细代码如下:

<template>
 <div class="s-canvas">
 <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas>
 </div>
</template>
<script>
export default {
 name: 'SIdentify',
 props: {
 identifyCode: {
  type: String,
  default: '1234'
 },
 fontSizeMin: {
  type: Number,
  default: 16
 },
 fontSizeMax: {
  type: Number,
  default: 40
 },
 backgroundColorMin: {
  type: Number,
  default: 180
 },
 backgroundColorMax: {
  type: Number,
  default: 240
 },
 colorMin: {
  type: Number,
  default: 50
 },
 colorMax: {
  type: Number,
  default: 160
 },
 lineColorMin: {
  type: Number,
  default: 40
 },
 lineColorMax: {
  type: Number,
  default: 180
 },
 dotColorMin: {
  type: Number,
  default: 0
 },
 dotColorMax: {
  type: Number,
  default: 255
 },
 contentWidth: {
  type: Number,
  default: 112
 },
 contentHeight: {
  type: Number,
  default: 38
 }
 },
 methods: {
 // 生成一个随机数
 randomNum(min, max) {
  return Math.floor(Math.random() * (max - min) + min)
 },
 // 生成一个随机的颜色
 randomColor(min, max) {
  var r = this.randomNum(min, max)
  var g = this.randomNum(min, max)
  var b = this.randomNum(min, max)
  return 'rgb(' + r + ',' + g + ',' + b + ')'
 },
 drawPic() {
  var canvas = document.getElementById('s-canvas')
  var ctx = canvas.getContext('2d')
  ctx.textBaseline = 'bottom'
  // 绘制背景
  ctx.fillStyle = this.randomColor(
  this.backgroundColorMin,
  this.backgroundColorMax
  )
  ctx.fillRect(0, 0, this.contentWidth, this.contentHeight)
  // 绘制文字
  for (let i = 0; i < this.identifyCode.length; i++) {
  this.drawText(ctx, this.identifyCode[i], i)
  }
  this.drawLine(ctx)
  this.drawDot(ctx)
 },
 drawText(ctx, txt, i) {
  ctx.fillStyle = this.randomColor(this.colorMin, this.colorMax)
  ctx.font =
  this.randomNum(this.fontSizeMin, this.fontSizeMax) + 'px SimHei'
  var x = (i + 1) * (this.contentWidth / (this.identifyCode.length + 1))
  var y = this.randomNum(this.fontSizeMax, this.contentHeight - 5)
  var deg = this.randomNum(-45, 45)
  // 修改坐标原点和旋转角度
  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)
 },
 drawLine(ctx) {
  // 绘制干扰线
  for (let i = 0; i < 8; i++) {
  ctx.strokeStyle = this.randomColor(
   this.lineColorMin,
   this.lineColorMax
  )
  ctx.beginPath()
  ctx.moveTo(
   this.randomNum(0, this.contentWidth),
   this.randomNum(0, this.contentHeight)
  )
  ctx.lineTo(
   this.randomNum(0, this.contentWidth),
   this.randomNum(0, this.contentHeight)
  )
  ctx.stroke()
  }
 },
 drawDot(ctx) {
  // 绘制干扰点
  for (let i = 0; i < 100; i++) {
  ctx.fillStyle = this.randomColor(0, 255)
  ctx.beginPath()
  ctx.arc(
   this.randomNum(0, this.contentWidth),
   this.randomNum(0, this.contentHeight),
   1,
   0,
   2 * Math.PI
  )
  ctx.fill()
  }
 }
 },
 watch: {
 identifyCode() {
  this.drawPic()
 }
 },
 mounted() {
 this.drawPic()
 }
}
</script>

第二步:使用该组件:

我们首先新建一个vue组件,在该组件进行布局,其中还包括用户名和密码的验证(这只是前端的简单验证,真实项目中还需要请求登入接口进行后端验证)

<template>
 <el-form class="login-form" status-icon :rules="loginRules" ref="loginForm" :model="loginForm" label-width="0">
 <el-form-item prop="username">
  <el-input size="small" @keyup.enter.native="handleLogin" v-model="loginForm.username" auto-complete="off" placeholder="请输入用户名">
  <i slot="prefix" class="icon-yonghu"></i>
  </el-input>
 </el-form-item>
 <el-form-item prop="password">
  <el-input size="small" @keyup.enter.native="handleLogin" :type="passwordType" v-model="loginForm.password" auto-complete="off" placeholder="请输入密码">
  <i class="el-icon-view el-input__icon" :style="fontstyle" slot="suffix" @click="showPassword"></i>
  <i slot="prefix" class="icon-mima"></i>
  </el-input>
 </el-form-item>
 <el-form-item prop="verifycode">
  <!-- 注意:prop与input绑定的值一定要一致,否则验证规则中的value会报undefined,因为value即为绑定的input输入值 -->
  <el-input v-model="loginForm.verifycode" placeholder="请输入验证码" class="identifyinput"></el-input>
 </el-form-item>
 <el-form-item>
  <div class="identifybox">
  <div @click="refreshCode">
   <s-identify :identifyCode="identifyCode"></s-identify>
  </div>
  <el-button @click="refreshCode" type='text' class="textbtn">看不清,换一张</el-button>
  </div>
 </el-form-item>
 <el-checkbox v-model="checked">记住账号</el-checkbox>
 <el-form-item>
  <el-button type="primary" size="small" @click.native.prevent="handleLogin" class="login-submit">登录</el-button>
 </el-form-item>
 </el-form>
</template>

 第三步:生产随机码与进行登入验证

<script>
import { isvalidUsername } from '@/utils/validate'
import SIdentify from '@/components/identify/identify.vue'
export default {
 name: 'userlogin',
 data() {
 // 用户名自定义验证规则
 const validateUsername = (rule, value, callback) => {
  if (!isvalidUsername(value)) {
  callback(new Error('请输入正确的用户名'))
  } else {
  console.log('user', value)
  callback()
  }
 }
 // 验证码自定义验证规则
 const validateVerifycode = (rule, value, callback) => {
  if (value === '') {
  callback(new Error('请输入验证码'))
  } else if (value !== this.identifyCode) {
  console.log('validateVerifycode:', value)
  callback(new Error('验证码不正确!'))
  } else {
  callback()
  }
 }
 return {
  fontstyle: {
  },
  loginForm: {
  username: 'admin',
  password: '123456',
  verifycode: ''
  },
  checked: false,
  identifyCodes: '1234567890',
  identifyCode: '',
  loginRules: { // 绑定在form表单中的验证规则
  username: [
   { required: true, trigger: 'blur', validator: validateUsername }
  ],
  password: [
   { required: true, message: '请输入密码', trigger: 'blur' },
   { min: 6, message: '密码长度最少为6位', trigger: 'blur' }
  ],
  verifycode: [
   { required: true, trigger: 'blur', validator: validateVerifycode }
  ]
  },
  passwordType: 'password'
 }
 },
 components: {
 SIdentify
 },
 created() {
 },
 mounted() {
 // 验证码初始化
 this.identifyCode = ''
 this.makeCode(this.identifyCodes, 4)
 },
 computed: {
 },
 props: [],
 methods: {
 // 通过改变input的type使密码可见
 showPassword() {
  this.fontstyle === '' ? (this.fontstyle = 'color: red') : (this.fontstyle = '') // 改变密码可见按钮颜色
  this.passwordType === ''
  ? (this.passwordType = 'password')
  : (this.passwordType = '')
 },
 // 点击登入按钮
 handleLogin() {
  this.$refs.loginForm.validate(valid => {
  if (valid) {
   this.$store.dispatch('Login', this.loginForm).then(res => {
   this.$router.push({ path: '/dashboard/dashboard' })
   })
  }
  })
 },
 // 生成随机数
 randomNum(min, max) {
  return Math.floor(Math.random() * (max - min) + min)
 },
 // 切换验证码
 refreshCode() {
  this.identifyCode = ''
  this.makeCode(this.identifyCodes, 4)
 },
 // 生成四位随机验证码
 makeCode(o, l) {
  for (let i = 0; i < l; i++) {
  this.identifyCode += this.identifyCodes[
   this.randomNum(0, this.identifyCodes.length)
  ]
  }
  console.log(this.identifyCode)
 }
 }
}
</script>
<style scoped>
.identifybox{
 display: flex;
 justify-content: space-between;
 margin-top:7px;
}
.iconstyle{
 color:#409EFF;
}
</style>

最后的效果如下,当我们输入之后鼠标失去焦点就会进行验证:

vue+element-ui集成随机验证码+用户名+密码的form表单验证功能

总结

以上所述是小编给大家介绍的vue+element-ui集成随机验证码+用户名+密码的form表单验证功能,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
js 新浪的一个图片播放图片轮换效果代码
Jul 15 Javascript
Jquery 获取表单text,areatext,radio,checkbox,select值的代码
Nov 12 Javascript
js+css实现增加表单可用性之提示文字
Jun 03 Javascript
javascript使用onclick事件改变选中行的颜色
Dec 30 Javascript
浅析script标签中的defer与async属性
Nov 30 Javascript
基于node.js依赖express解析post请求四种数据格式
Feb 13 Javascript
jQuery实现IE输入框完成placeholder标签功能的方法
Sep 20 jQuery
Angular将填入表单的数据渲染到表格的方法
Sep 22 Javascript
微信小程序实现弹出菜单
Jul 19 Javascript
vue项目前端知识点整理【收藏】
May 13 Javascript
微信小程序身份证验证方法实现详解
Jun 28 Javascript
vue与iframe之间的信息交互的实现
Apr 08 Javascript
dts文件中删除一个node或属性的操作方法
Aug 05 #Javascript
深入理解JavaScript的async/await
Aug 05 #Javascript
js数据类型检测总结
Aug 05 #Javascript
通过函数作用域和块级作用域看javascript的作用域链
Aug 05 #Javascript
vue实现简单的MVVM框架
Aug 05 #Javascript
使用D3.js+Vue实现一个简单的柱形图
Aug 05 #Javascript
详解Require.js与Sea.js的区别
Aug 05 #Javascript
You might like
使用网络地址转换实现多服务器负载均衡
2006/10/09 PHP
php 启动时报错的简单解决方法
2014/01/27 PHP
PHP连接MySQL数据的操作要点
2015/03/20 PHP
jsonp原理及使用
2013/10/28 Javascript
javascript数组排序汇总
2015/07/07 Javascript
jQuery中$.each()函数的用法引申实例
2016/05/12 Javascript
Bootstrap下拉菜单效果实例代码分享
2016/06/30 Javascript
js跨域资源共享 基础篇
2016/07/02 Javascript
canvas滤镜效果实现代码
2017/02/06 Javascript
vue渲染时闪烁{{}}的问题及解决方法
2018/03/28 Javascript
javascript操作元素的常见方法小结
2019/11/13 Javascript
js实现带搜索功能的下拉框
2020/01/11 Javascript
JS数据类型分类及常用判断方法
2020/11/19 Javascript
[02:33]DOTA2英雄基础教程 司夜刺客
2013/12/04 DOTA
[34:39]Secret vs VG 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
Python中获取对象信息的方法
2015/04/27 Python
python 每天如何定时启动爬虫任务(实现方法分享)
2018/05/21 Python
pyqt5 实现在别的窗口弹出进度条
2019/06/18 Python
python交互模式下输入换行/输入多行命令的方法
2019/07/02 Python
基于sklearn实现Bagging算法(python)
2019/07/11 Python
python实现代码统计器
2019/09/19 Python
Python数据可视化:箱线图多种库画法
2019/11/06 Python
pytorch实现focal loss的两种方式小结
2020/01/02 Python
pytorch 实现在一个优化器中设置多个网络参数的例子
2020/02/20 Python
浅谈Python中os模块及shutil模块的常规操作
2020/04/03 Python
python3 logging日志封装实例
2020/04/08 Python
Anaconda的安装与虚拟环境建立
2020/11/18 Python
英国奢侈品概念店:Base Blu
2019/05/16 全球购物
英国在线购买轮胎、预订汽车、汽车维修和装配网站:Protyre
2020/04/12 全球购物
校园安全教育广播稿
2014/02/17 职场文书
购房协议书
2014/04/11 职场文书
挂靠协议书范本
2014/04/22 职场文书
忠诚奉献演讲稿
2014/09/12 职场文书
离职证明范本
2015/06/12 职场文书
Windows server 2012搭建FTP服务器
2022/04/29 Servers
css清除浮动clearfix:after的用法详解(附完整代码)
2023/05/21 HTML / CSS