vue生成随机验证码的示例代码


Posted in Javascript onSeptember 29, 2017

本文介绍了vue生成随机验证码的示例代码,分享给大家,具体如下:

样式自调,最终效果如图:

vue生成随机验证码的示例代码

实现效果:

点击右边input框会自动切换,如果输入的值与字不同,则清空换一串随机数

HTML

<input type="text" placeholder="请输入验证码" class="yanzhengma_input" @blur="checkLpicma" v-model="picLyanzhengma">
<input type="button" id="code" @click="createCode" class="verification1" v-model="checkCode"/> <br>
<span class="tishixiaoxi disappear">请输入验证码。</span>
<a class="user_login" @click="Login">登录</a>

JS

// 图片验证码
createCode(){
  code = ""; 
  var codeLength = 4;//验证码的长度 
  var random = new Array(0,1,2,3,4,5,6,7,8,9,'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');//随机数 
  for(var i = 0; i < codeLength; i++) {
   //循环操作 
   var index = Math.floor(Math.random()*36);//取得随机数的索引(0~35) 
   code += random[index];//根据索引取得随机数加到code上 
  } 
  this.checkCode = code;//把code值赋给验证码 
},
// 失焦验证图和密码
checkLpicma(){   
  this.picLyanzhengma.toUpperCase();//取得输入的验证码并转化为大写   
  if(this.picLyanzhengma == '') {
   //代码是直接复制项目内容,这里选择器选择时 请根据自己的需求来实现提示语效果,很简单,我懒,就不改了 ~
   $(".login_content1 span:eq(2)").text("请输入验证码")
   $(".login_content1 span:eq(2)").removeClass("disappear");  
  }else if(this.picLyanzhengma.toUpperCase() != this.checkCode ) { 
   //若输入的验证码与产生的验证码不一致时 
   console.log( this.picLyanzhengma.toUpperCase())
   //代码是直接复制项目内容,这里选择器选择时 请根据自己的需求来实现提示语效果,很简单,我懒,就不改了 ~  
   $(".login_content1 span:eq(2)").text("验证码不正确")
   $(".login_content1 span:eq(2)").removeClass("disappear");
   this.createCode();//刷新验证码 
   this.picLyanzhengma = '';
  }else {
   //输入正确时 
   //代码是直接复制项目内容,这里选择器选择时 请根据自己的需求来实现提示语效果,很简单,我懒,就不改了 ~  
   $(".login_content1 span:eq(2)").addClass("disappear");
   $(".login_content1 span:eq(2)").text("请输入验证码")
   return true;
  } 
}

友情提示:本文直接从项目拿来供大家思路参考,验证提示那块大家可根据自己情况做更改。懒得改的可以去我github拿demo。

demo已放到鄙人github,也可自取:https://github.com/JOSIE1988/JS-Random-authentication-code

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS target与currentTarget区别说明
Aug 28 Javascript
很好用的js日历算法详细代码
Mar 07 Javascript
基于编写jQuery的无缝滚动插件
Aug 02 Javascript
javascript限制用户只能输汉字中文的方法
Nov 20 Javascript
8个超实用的jQuery功能代码分享
Jan 08 Javascript
jquery实现带缩略图的全屏图片画廊效果实例
Jun 25 Javascript
react 父组件与子组件之间的值传递的方法
Sep 14 Javascript
javascript+jQuery实现360开机时间显示效果
Nov 03 jQuery
vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单
Nov 29 Javascript
JavaScript实现单图片上传并预览功能
Sep 30 Javascript
解决vue+router路由跳转不起作用的一项原因
Jul 19 Javascript
如何在Vue.JS中使用图标组件
Aug 04 Javascript
JS设计模式之单例模式(一)
Sep 29 #Javascript
微信小程序的日期选择器的实例详解
Sep 29 #Javascript
JS设计模式之惰性模式(二)
Sep 29 #Javascript
bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据
Aug 09 #Javascript
详解用Node.js实现Restful风格webservice
Sep 29 #Javascript
实现一个完整的Node.js RESTful API的示例
Sep 29 #Javascript
jquery鼠标悬停导航下划线滑出效果
Sep 29 #jQuery
You might like
一个显示某段时间内每个月的方法 返回由这些月份组成的数组
2012/05/16 PHP
PHP计算加权平均数的方法
2015/07/16 PHP
遍历指定目录,并存储目录内所有文件属性信息的php代码
2016/10/28 PHP
php设计模式之原型模式分析【星际争霸游戏案例】
2020/03/23 PHP
JavaScript 动态将数字金额转化为中文大写金额
2009/05/14 Javascript
JQuery设置和去除disabled属性的5种方法总结
2013/05/16 Javascript
使用nodejs、Python写的一个简易HTTP静态文件服务器
2014/07/18 NodeJs
JS实现一个按钮的方法
2015/02/05 Javascript
CSS javascript 结合实现悬浮固定菜单效果
2015/08/23 Javascript
js鼠标按键事件和键盘按键事件用法实例汇总
2016/10/03 Javascript
javascript中call,apply,bind函数用法示例
2016/12/19 Javascript
webpack本地开发环境无法用IP访问的解决方法
2018/03/20 Javascript
一步一步的了解webpack4的splitChunk插件(小结)
2018/09/17 Javascript
js实现无限层级树形数据结构(创新算法)
2020/02/27 Javascript
基于原生js实现判断元素是否有指定class名
2020/07/11 Javascript
JavaScript事件委托实现原理及优点进行
2020/08/29 Javascript
python进阶教程之动态类型详解
2014/08/30 Python
粗略分析Python中的内存泄漏
2015/04/23 Python
浅谈python字典多键值及重复键值的使用
2016/11/04 Python
Python如何把字典写入到CSV文件的方法示例
2020/08/23 Python
突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
2013/01/31 HTML / CSS
HTML5地理定位实例
2014/10/15 HTML / CSS
兰蔻英国官网:Lancome英国
2019/04/30 全球购物
俄罗斯香水在线商店:AromaCode
2019/12/04 全球购物
ASOS西班牙官网:英国在线时尚和美容零售商
2020/01/10 全球购物
芭比波朗加拿大官方网站:Bobbi Brown Cosmetics CA
2020/11/05 全球购物
实习生求职自荐信
2014/02/07 职场文书
基督教婚礼主持词
2014/03/14 职场文书
网络管理员岗位职责
2014/03/17 职场文书
党的群众路线教育实践活动对照检查材料范文
2014/09/24 职场文书
工作违纪检讨书范文
2015/01/26 职场文书
小时代观后感
2015/06/10 职场文书
2015初一年级组工作总结
2015/07/24 职场文书
《圆的周长》教学反思
2016/02/17 职场文书
导游词之河姆渡遗址博物馆
2019/10/10 职场文书
MySQL中的隐藏列的具体查看
2021/09/04 MySQL