<!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://unpkg.com/vue/dist/vue.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>

　　

vuejs验证码的更多相关文章

  1. VueJs(1)---快速上手VueJs

    [VueJs入门] 版权声明 首先申明:此篇博客不是本人原创,只是最近开始学习vue.jS,看到有作者写的很不错,我仅在它的基础上仅仅是修改了样式 原文博客地址:https://blog.csdn.n ...

  2. golang包快速生成base64验证码

    base64Captcha快速生成base64编码图片验证码字符串 支持多种样式,算术,数字,字母,混合模式,语音模式. Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一.Base6 ...

  3. .net点选验证码实现思路分享

    哈哈好久没冒泡了,最进看见点选验证码有点意思,所以想自己写一个. 先上效果图 如果你被这个效果吸引了就请继续看下去. 贴代码前先说点思路: 1.要有一个汉字库,并按字形分类.(我在数据库里是安部首分类 ...

  4. 【探索】无形验证码 —— PoW 算力验证

    先来思考一个问题:如何写一个能消耗对方时间的程序? 消耗时间还不简单,休眠一下就可以了: Sleep(1000) 这确实消耗了时间,但并没有消耗 CPU.如果对方开了变速齿轮,这瞬间就能完成. 不过要 ...

  5. TODO：Laravel增加验证码

    TODO:Laravel增加验证码1. 先聊聊验证码是什么,有什么作用?验证码(CAPTCHA)是"Completely Automated Public Turing test to te ...

  6. TODO：搭建Laravel VueJS SemanticUI

    TODO:搭建Laravel VueJS SemanticUI Laravel是一套简洁.优雅的PHP开发框架(PHP Web Framework).可以让你从面条一样杂乱的代码中解脱出来:它可以帮你 ...

  7. PHP-解析验证码类--学习笔记

    1.开始 在 网上看到使用PHP写的ValidateCode生成验证码码类,感觉不错,特拿来分析学习一下. 2.类图 3.验证码类部分代码 3.1  定义变量 //随机因子 private $char ...

  8. 随手记_C#验证码

    前言 最近在网上偶然看见一个验证码,觉得很有意思,于是搜了下,是使用第三方实现的,先看效果: 总体来说效果还是可以的,官方提供的SDK也比较详细,可配置性很高.在这里在简单啰嗦几句使用方式: 使用步骤 ...

  9. WPF做12306验证码点击效果

    一.效果 和12306是一样的,运行一张图上点击多个位置,横线以上和左边框还有有边框位置不允许点击,点击按钮输出坐标集合,也就是12306登陆的时候,需要向后台传递的参数. 二.实现思路 1.获取验证 ...

随机推荐

  1. 重启标志log

    01) fatal error : 如下: [ >.()[:swapper/][name:disp_lcm&][DISP]disp_lcm_probe [ >.()[:swappe ...

  2. Netlink通信机制【转】

    本文转载自:http://www.cnblogs.com/wenqiang/p/6306727.html 一.什么是Netlink通信机制  Netlink套接字是用以实现用户进程与内核进程通信的一种 ...

  3. WebView播放H5课件时，锁屏解锁后，页面重新绘制的问题

    难题描述:H5页面播放 ,锁屏,解锁后,重新加载了页面,三星不会出现(onpause onstop ,onresume),但在小米.魅族会调用 onpause onstop ondestroy,onr ...

  4. akka设计模式系列-Aggregate模式

    所谓的Aggregate模式,其实就是聚合模式,跟masterWorker模式有点类似,但其出发点不同.masterWorker模式是指master向worker发送命令,worker完成某种业务逻辑 ...

  5. vue2.0 引入font-awesome

    网上的大部分教程复杂而且难看懂,其实两步就能搞定. 先cnpm install font-awesome --save引入依赖 然后在main.js引入 font-awesome/css/font-a ...

  6. Android内存管理（7）在AS中查看内存和cpu情况

    Memory and CPU monitor Android Studio provides a memory and CPU monitor view so you can more easily ...

  7. mysql使用出现错误：mysqld dead but subsys locked

    现象: 登陆时候出现如下信息 [root@localhost home]# mysql -uroot -p123456mysql: [Warning] Using a password on the ...

  8. 通过HTTP协议实时获取微信聊天记录

    第一步:登陆 1.get访问微信首页https://wx.qq.com 提供session.headers 用途:获取cookie 后续访问必须带session.headers.cookie这三个参数 ...

  9. 生成错误：对路径".dll"的访问被拒绝

    第一步:检查dll所在的目录的访问权限,右键文件夹>属性>安全>设置添加EveryOne用户并将完全控制的权限赋给它. 如果问题还没有解决,请不要一遍遍的重启,看第二步: 第二步:右 ...

  10. layer实现在前台删除前确认弹出框，并回调后台删除事件

    最近遇到一些问题,用layer提示消息框,比如删除时,提示消息确定后 return false时,则不管用了,因为layer不支持阻塞,下面就解决一下这个问题:(本文使用Xcode,如要学习,请复下面 ...