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 相关文章推荐
IE6/7/8中Option元素未设value时Select将获取空字符串
Apr 07 Javascript
JQuery操作tr和td内容的方法实例
Mar 06 Javascript
javascript获取元素CSS样式代码示例
Nov 28 Javascript
jQuery+ajax中getJSON() 用法实例
Dec 22 Javascript
jQuery表单美化插件jqTransform使用详解
Apr 12 Javascript
JQuery简单实现锚点链接的平滑滚动
May 03 Javascript
基于vue实现swipe分页组件实例
May 25 Javascript
js中自定义react数据验证组件实例详解
Oct 19 Javascript
js中事件对象和事件委托的介绍
Jan 21 Javascript
vux-scroller实现移动端上拉加载功能过程解析
Oct 08 Javascript
js 使用ajax设置和获取自定义header信息的方法小结
Mar 12 Javascript
解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题
Jul 27 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 XML备份Mysql数据库
2009/05/27 PHP
php实现简单的上传进度条
2015/11/17 PHP
PHP输入流php://input实例讲解
2015/12/22 PHP
关于 Laravel Redis 多个进程同时取队列问题详解
2017/12/25 PHP
Laravel学习笔记之Artisan命令生成自定义模板的方法
2018/11/22 PHP
PHP开发实现快递查询功能详解
2019/04/08 PHP
转自Jquery官方 jQuery1.1.3发布,速度提升800%,体积保持20K
2007/08/19 Javascript
event.srcElement 用法笔记e.target
2009/12/18 Javascript
自己做的模拟模态对话框实现代码
2012/05/23 Javascript
尝试在让script的type属性等于text/html
2013/01/15 Javascript
javascript数组的使用
2013/03/28 Javascript
自己写的Javascript计算时间差函数
2013/10/28 Javascript
JavaScritp添加url参数并将参数加入到url中及更改url参数的方法
2015/10/26 Javascript
JavaScript Date对象详解
2016/03/01 Javascript
JS使用单链表统计英语单词出现次数
2016/06/16 Javascript
jQuery插件zTree实现获取当前选中节点在同级节点中序号的方法
2017/03/08 Javascript
微信小程序 实现列表项滑动显示删除按钮的功能
2017/04/13 Javascript
JS+Ajax实现百度智能搜索框
2017/08/04 Javascript
初探js和简单隐藏效果的实例
2017/11/23 Javascript
jQuery子选择器与可见性选择器实例分析
2019/06/28 jQuery
vue.js实现只能输入数字的输入框
2019/10/19 Javascript
vue使用element-ui实现表单验证
2020/12/13 Vue.js
Python中使用异常处理来判断运行的操作系统平台方法
2015/01/22 Python
python计算时间差的方法
2015/05/20 Python
pycharm远程调试openstack代码
2017/11/21 Python
用python统计代码行的示例(包括空行和注释)
2018/07/24 Python
修改python plot折线图的坐标轴刻度方法
2018/12/13 Python
Python列表list排列组合操作示例
2018/12/18 Python
python url 参数修改方法
2018/12/26 Python
使用Python实现毫秒级抢单功能
2019/06/06 Python
python conda操作方法
2019/09/11 Python
PHP面试题附答案
2015/11/28 面试题
项目施工员岗位职责
2014/03/09 职场文书
学雷锋树新风演讲稿
2014/05/10 职场文书
2014年政风行风自查自纠报告
2014/10/21 职场文书
指导老师鉴定意见
2015/06/05 职场文书