<!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. 全面解析布局(Grid & Canvas &StackPanel &Wrappanel) 转

    写这篇文章前,特意在百度搜索了一下,发现目前网上介绍布局的文章不多,质量也不是很高.拿grid和canvas来讲,这两个布局容器还是有许多小细节值得讲的,如果你不了解的话,开发中经常会遇到一些让人匪夷 ...

  2. Scala 返回多个值

    class A{ var c var d def return={ (c,d,"soyo") //以元组形式返回 }}调用: val s=new A var(a1,a2,a3)=s ...

  3. leetcode快排相关

    leetcode:75颜色分类(3way).215数组中的第K个最大元素(normal) 3way private static void quick3waySort(int[] arr, int l ...

  4. 【WIP】Rails Client Side Document

    创建: 2017/09/15 更新: 2019/04/14 删除其他语言的表述 更新: 2017/10/14 标题加上[WIP]  引入JavaScrpit/CSS  manifesto  n. 货单 ...

  5. 微信小程序调用微信支付

    1,首先我们先缕清支付的整个流程,详见https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_4&index=3,第一 ...

  6. Boost.Build特点(译)

    Boost.Build Boost.Build makes it easy to build C++ projects, everywhere. Boost.Build让构建C++项目在任何地方都很容 ...

  7. Context的正确使用

    一.Context的作用 Context的最大作用就是我们可以通过传递它来获得其他Activity或Application的相关资源和方法,它就相当于它们的引用,我们通过引用来获得对象的封装,这也是我 ...

  8. 【BZOJ2944】[Poi2000]代码(卡特兰数)

    这题在网上找不到题解,硬写一下午终于写出来了-- 题目: BZOJ2944 分析: 首先明确: 比较两棵节点数相同的二叉树时,根节点是第一关键字,左子树是第二关键字,右子树是第三关键字: 然后我们分析 ...

  9. Elasticsearch之CURL命令的UPDATE

    对于,Elasticsearch之CURL命令的UPDATE包括局部更新和全部更新.可以去看我写的另一篇博客. Elasticsearch之更新(全部更新和局部更新) 总结: ES全部更新,使用PUT ...

  10. vue-cli 打包优化

    1. 优化打包体积 先上2个图 (上图A是优化前的各个js大小对比视图,下图B是优化后,还未完全优化完成的,不过也可以看得出来对比) 图A是3个压缩文件,包括部分图片和使用的所有js,体积都偏大 图B ...