vuejs简单验证码功能完整示例


Posted in Javascript onJanuary 08, 2019

本文实例讲述了vuejs简单验证码功能。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
</head>
<body>
 <div id="app">
  <!-- 验证码输入框 -->
  <input type="text" v-model="aaa" @blur="checkNum" />
  <!-- 验证码切换按钮 -->
  <input type="button" v-model="bbb" @click="createCode"/>
  <!-- 提示信息 -->
  <span type="text" style="color: red;">{{ ccc }}</span>
 </div>
</body>
 <!-- import Vue before Element -->
 <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
 <script>
  new Vue({
   el: '#app',
   data: function() {
    return {
     aaa:"",
     bbb:"",
     ccc:"提示信息"
    }
   },
   created(){
    this.createCode();//初始化生成一个4位数的验证码
   },
   methods: {
    createCode(){
      var 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.bbb = code;//把code值赋给验证码
    },
    checkNum(){
     var num = this.aaa.toUpperCase();//输入内容全部转化为大写
     if(num == this.bbb){
      this.ccc = "验证码正确";
     }else{
      this.ccc = "验证码错误";
      this.createCode();
     }
    }
   }
  })
 </script>
</html>

使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun运行上述代码,可得到如下运行结果:

vuejs简单验证码功能完整示例

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
Tips 带三角可关闭的文字提示
Oct 06 Javascript
js 静态动态成员 and 信息的封装和隐藏
May 29 Javascript
关于JavaScript的面向对象和继承有利新手学习
Jan 11 Javascript
js获取元素到文档区域document的(横向、纵向)坐标的两种方法
May 17 Javascript
Egret引擎开发指南之视觉编程
Sep 03 Javascript
JavaScript字符串对象fromCharCode方法入门实例(用于把Unicode值转换为字符串)
Oct 17 Javascript
javascript HTML+CSS实现经典橙色导航菜单
Feb 16 Javascript
简单的JS控制button颜色随点击更改的实现方法
Apr 17 Javascript
two.js之实现动画效果示例
Nov 06 Javascript
vue.js项目 el-input 组件 监听回车键实现搜索功能示例
Aug 25 Javascript
Vue Prop属性功能与用法实例详解
Feb 23 Javascript
tsconfig.json配置详解
May 17 Javascript
详解React中合并单元格的正确写法
Jan 08 #Javascript
JS简单判断是否在微信浏览器打开的方法示例
Jan 08 #Javascript
JQuery搜索框自动补全(模糊匹配)功能实现示例
Jan 08 #jQuery
Angular6 发送手机验证码按钮倒计时效果实现方法
Jan 08 #Javascript
Angular6 用户自定义标签开发的实现方法
Jan 08 #Javascript
JS实现的获取银行卡号归属地及银行卡类型操作示例
Jan 08 #Javascript
关于微信小程序登录的那些事
Jan 08 #Javascript
You might like
PHP令牌 Token改进版
2008/07/18 PHP
jQuery 自定义函数写法分享
2012/03/30 Javascript
jQuery判断密码强度实现思路及代码
2013/04/24 Javascript
showModelDialog弹出文件下载窗口的使用示例
2013/11/19 Javascript
解决JQeury显示内容没有边距内容紧挨着浏览器边线
2013/12/20 Javascript
javascript中substring()、substr()、slice()的区别
2015/08/30 Javascript
基于jQuery倾斜打开侧边栏菜单特效代码
2015/09/15 Javascript
javascript bom是什么及bom和dom的区别
2015/11/26 Javascript
javascript生成img标签的3种实现方法(对象、方法、html)
2015/12/25 Javascript
jQuery基于muipicker实现仿ios时间选择
2016/02/22 Javascript
javascript insertAfter()定义与用法示例
2016/07/25 Javascript
JSP防止网页刷新重复提交数据的几种方法
2016/11/19 Javascript
原生js实现淘宝购物车功能
2020/06/23 Javascript
BootStrap表单验证实例代码
2017/01/13 Javascript
关于在mongoose中填充外键的方法详解
2017/08/14 Javascript
vue 下列表侧滑操作实例代码详解
2018/07/24 Javascript
C#程序员入门学习微信小程序的笔记
2019/03/05 Javascript
react PropTypes校验传递的值操作示例
2020/04/28 Javascript
javascript实现贪吃蛇小练习
2020/07/05 Javascript
深入讲解Java编程中类的生命周期
2016/02/05 Python
详解Python中使用base64模块来处理base64编码的方法
2016/07/01 Python
Python 12306抢火车票脚本
2018/02/07 Python
python高效过滤出文件夹下指定文件名结尾的文件实例
2018/10/21 Python
基于Django静态资源部署404的解决方法
2019/07/28 Python
python psutil模块使用方法解析
2019/08/01 Python
python3 动态模块导入与全局变量使用实例
2019/12/22 Python
使用Python第三方库pygame写个贪吃蛇小游戏
2020/03/06 Python
Python中使用filter过滤列表的一个小技巧分享
2020/05/02 Python
如何以Winsows Service方式运行JupyterLab
2020/08/30 Python
天美时手表加拿大官网:Timex加拿大
2016/09/01 全球购物
迪奥官网:Dior.com
2018/12/04 全球购物
西式结婚主持词
2014/03/14 职场文书
高中班主任评语大全
2014/04/25 职场文书
中学生运动会新闻稿
2014/09/24 职场文书
结婚保证书
2015/01/16 职场文书
Kubernetes部署实例并配置Deployment、网络映射、副本集
2022/04/01 Servers