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 MD4
Dec 20 Javascript
Jquery异步请求数据实例代码
Dec 28 Javascript
30分钟就入门的正则表达式基础教程
Feb 25 Javascript
在Node.js中实现文件复制的方法和实例
Jun 05 Javascript
jQuery中document与window以及load与ready 区别详解
Dec 29 Javascript
浅谈如何实现easyui的datebox格式化
Jun 12 Javascript
浅谈javascript运算符——条件,逗号,赋值,()和void运算符
Jul 15 Javascript
深入理解JavaScript中Ajax
Aug 02 Javascript
jQuery居中元素scrollleft计算方法示例
Jan 16 Javascript
微信小程序 支付功能开发错误总结
Feb 21 Javascript
关于Ajax的原理以及代码封装详解
Sep 08 Javascript
webpack打包非模块化js的方法
Oct 24 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
CodeIgniter使用smtp服务发送html邮件的方法
2015/06/10 PHP
php 解决substr()截取中文字符乱码问题
2016/07/18 PHP
PHP给源代码加密的几种方法汇总(推荐)
2018/02/06 PHP
Laravel 6 将新增为指定队列任务设置中间件的功能
2019/08/06 PHP
laravel框架select2多选插件初始化默认选中项操作示例
2020/02/18 PHP
jQuery判断元素是否是隐藏的代码
2011/04/24 Javascript
JQuery获取当前屏幕的高度宽度的实现代码
2011/07/12 Javascript
JavaScript 模式之工厂模式(Factory)应用介绍
2012/11/15 Javascript
js动态创建标签示例代码
2014/06/09 Javascript
初始Nodejs
2014/11/08 NodeJs
认识Knockout及如何使用Knockout绑定上下文
2015/12/25 Javascript
jQuery实现图片走马灯效果的原理分析
2016/01/16 Javascript
jQuery如何封装输入框插件
2016/08/19 Javascript
BootStrap table表格插件自适应固定表头(超好用)
2016/08/24 Javascript
web前端vue实现插值文本和输出原始html
2018/01/19 Javascript
JavaScript常用数学函数用法示例
2018/05/14 Javascript
ES6 Generator基本使用方法示例
2020/06/06 Javascript
Nuxt.js nuxt-link与router-link的区别说明
2020/11/06 Javascript
Python的面向对象思想分析
2015/01/14 Python
在Python的setuptools框架下生成egg的教程
2015/04/13 Python
基于wxpython开发的简单gui计算器实例
2015/05/30 Python
Python编程实现二分法和牛顿迭代法求平方根代码
2017/12/04 Python
Python实现的排列组合、破解密码算法示例
2019/04/12 Python
Django 迁移、操作数据库的方法
2019/08/02 Python
解决Python 异常TypeError: cannot concatenate 'str' and 'int' objects
2020/04/08 Python
python如何利用paramiko执行服务器命令
2020/11/07 Python
国际奢侈品品牌童装购物网站:Designer Childrenswear
2019/05/08 全球购物
讲文明树新风公益广告宣传方案
2014/02/25 职场文书
预备党员表决心书
2014/03/11 职场文书
公司感谢信范文
2015/01/22 职场文书
2019行政前台转正申请书范文3篇
2019/08/15 职场文书
导游词之镇江-金山寺
2019/10/14 职场文书
Go语言中break label与goto label的区别
2021/04/28 Golang
Redis6.0搭建集群Redis-cluster的方法
2021/05/08 Redis
MySQL面试题讲解之如何设置Hash索引
2021/11/01 MySQL
Python中使用Opencv开发停车位计数器功能
2022/04/04 Python