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 相关文章推荐
JQuery 无废话系列教程(一) jquery入门 [推荐]
Jun 23 Javascript
JS等比例缩小图片尺寸的实例
Feb 27 Javascript
javascript中的delete使用详解
Apr 11 Javascript
Jqgrid设置全选(选择)及获取选择行的值示例代码
Dec 28 Javascript
基于Jquery和html5实现炫酷的3D焦点图动画
Mar 02 Javascript
vue.js树形组件之删除双击增加分支实例代码
Feb 28 Javascript
JavaScript创建对象_动力节点Java学院整理
Jun 27 Javascript
Vue-Cli中自定义过滤器的实现代码
Aug 12 Javascript
vue改变对象或数组时的刷新机制的方法总结
Apr 24 Javascript
electron实现静默打印的示例代码
Aug 12 Javascript
微信小程序如何获取用户头像和昵称
Sep 23 Javascript
JavaScript的function函数详细介绍
Nov 20 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
php file_get_contents函数轻松采集html数据
2010/04/22 PHP
PHP中4个加速、缓存扩展的区别和选用建议
2014/03/12 PHP
PHP return语句另类用法不止是在函数中
2014/09/17 PHP
&amp;lt;script defer&amp;gt; defer 是什么意思
2009/05/10 Javascript
jquery 操作表格实现代码(多种操作打包)
2011/03/20 Javascript
namespace.js Javascript的命名空间库
2011/10/11 Javascript
js 遍历对象的属性的代码
2011/12/29 Javascript
document.compatMode的CSS1compat使用介绍
2014/04/03 Javascript
jQuery中offsetParent()方法用法实例
2015/01/19 Javascript
jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)
2016/05/27 Javascript
js 获取经纬度的实现方法
2016/06/20 Javascript
原生js的RSA和AES加密解密算法
2016/10/08 Javascript
利用SpringMVC过滤器解决vue跨域请求的问题
2018/02/10 Javascript
Vue-路由导航菜单栏的高亮设置方法
2018/03/17 Javascript
node(koa2) web应用模块介绍详解
2019/03/29 Javascript
vue中格式化时间过滤器代码实例
2019/04/17 Javascript
解决layui使用layui-icon出现默认图标的问题
2019/09/11 Javascript
jquery轻量级数字动画插件countUp.js使用详解
2019/10/17 jQuery
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
2020/07/20 Javascript
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
2021/01/22 Vue.js
python测试驱动开发实例
2014/10/08 Python
Python首次安装后运行报错(0xc000007b)的解决方法
2016/10/18 Python
Python常用库推荐
2016/12/04 Python
浅谈Python实现贪心算法与活动安排问题
2017/12/19 Python
python中将zip压缩包转为gz.tar的方法
2018/10/18 Python
python绘制已知点的坐标的直线实例
2019/07/04 Python
python字典的常用方法总结
2019/07/31 Python
香港No.1得奖零食网:香港零食大王
2016/07/22 全球购物
GANT葡萄牙官方商店:拥有美国运动服传统的生活方式品牌
2018/10/18 全球购物
竞选学习委员演讲稿
2014/04/28 职场文书
歌颂祖国的演讲稿
2014/05/04 职场文书
优秀班组事迹材料
2014/12/24 职场文书
优秀家长事迹材料(2016推荐版)
2016/02/29 职场文书
2016年精神文明建设先进个人事迹材料
2016/02/29 职场文书
Python如何导出导入所有依赖包详解
2021/06/08 Python
mysql脏页是什么
2021/07/26 MySQL