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 相关文章推荐
再论Javascript下字符串连接的性能
Mar 05 Javascript
jquery批量设置属性readonly和disabled的方法
Jan 24 Javascript
JS图片无缝、平滑滚动代码
Mar 11 Javascript
Javascript异步编程模型Promise模式详细介绍
May 08 Javascript
node.js中的Socket.IO使用实例
Nov 04 Javascript
在JavaScript中处理时间之setMinutes()方法的使用
Jun 11 Javascript
基于javascript实现图片预加载
Jan 05 Javascript
JavaScript 中 apply 、call 的详解
Mar 21 Javascript
Angular5.0 子组件通过service传递值给父组件的方法
Jul 13 Javascript
vue项目搭建以及全家桶的使用详细教程(小结)
Dec 19 Javascript
如何在JavaScript中谨慎使用代码注释
Jun 21 Javascript
webpack+vue-cil 中proxyTable配置接口地址代理操作
Jul 18 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新手上路(十一)
2006/10/09 PHP
使用HMAC-SHA1签名方法详解
2013/06/26 PHP
PHP中创建图像并绘制文字的例子
2014/11/19 PHP
谈谈PHP连接Access数据库的注意事项
2016/08/12 PHP
Laravel框架处理用户的请求操作详解
2019/12/20 PHP
php模拟post提交请求调用接口示例解析
2020/08/07 PHP
JS JavaScript获取Url参数,src属性参数
2021/03/09 Javascript
js监听鼠标点击和键盘点击事件并自动跳转页面
2014/09/24 Javascript
jQuery实现防止提交按钮被双击的方法
2015/03/24 Javascript
jQuery实现鼠标经过弹出提示信息的地图热点效果
2015/08/07 Javascript
JS实现的车标图片提示效果代码
2015/10/10 Javascript
jquery.validate使用详解
2016/06/02 Javascript
详解vue-cli开发环境跨域问题解决方案
2017/06/06 Javascript
解决vue A对象赋值给B对象,修改B属性会影响到A的问题
2018/09/25 Javascript
一文读懂ES7中的javascript修饰器
2019/05/06 Javascript
javascript中undefined的本质解析
2019/07/31 Javascript
封装 axios+promise通用请求函数操作
2020/08/11 Javascript
python zip文件 压缩
2008/12/24 Python
利用python将图片转换成excel文档格式
2017/12/30 Python
Python中一行和多行import模块问题
2018/04/01 Python
python 成功引入包但无法正常调用的解决
2020/03/09 Python
python shapely.geometry.polygon任意两个四边形的IOU计算实例
2020/04/12 Python
tensorflow中tf.reduce_mean函数的使用
2020/04/19 Python
html5教程实现Photoshop渐变色效果
2013/12/04 HTML / CSS
Backcountry旗下的户外商品闪购网站:steep&cheap
2016/09/22 全球购物
TIME时代杂志台湾总代理:台时亚洲
2018/10/22 全球购物
解释一下ArrayList Vector和LinkedList的实现和区别
2013/04/26 面试题
给男朋友的道歉信
2014/01/12 职场文书
小学家长评语大全
2014/04/16 职场文书
计算机求职自荐信范文
2014/04/19 职场文书
实训报告范文大全
2014/11/04 职场文书
2014年酒店前台工作总结
2014/11/14 职场文书
教师党员承诺书2015
2015/01/21 职场文书
公司行政主管岗位职责
2015/04/09 职场文书
go结构体嵌套的切片数组操作
2021/04/28 Golang
一文搞懂Java中的注解和反射
2022/06/21 Java/Android