<!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. 【转】Intent传递数据时，可以传递哪些类型数据？

    在Android应用的开发中,如果我们需要在不同的模块(比如不同的Activity之间)之间传递数据,通常有以下两种方法:1. 利用Intent对象携带数据通过查询Intent/Bundle的API文 ...

  2. Android开发：setAlpha()方法

    paint.setAlpha() 即透明度.其取值范围是0---255,数值越小,越透明,颜色上表现越淡. 实际上当设成10以下就会有透明的效果了.

  3. luoguP2939 [USACO09FEB]改造路Revamping Trails

    约翰一共有N)个牧场.由M条布满尘埃的小径连接.小径可 以双向通行.每天早上约翰从牧场1出发到牧场N去给奶牛检查身体. 通过每条小径都需要消耗一定的时间.约翰打算升级其中K条小径,使之成为高 速公路. ...

  4. E20170705-hm

    bubble   n. 泡,水泡; 冒泡,起泡; 泡影,妄想; (欲表达的) 一点感情;

  5. robotframework - 介绍&应用

    一.参考简书链接 :https://www.jianshu.com/p/c3a9d20db4e5 二.介绍 Robot Framework是一个基于Python的,可扩展的关键字驱动的测试自动化框架, ...

  6. 大圆那些事 LIBRARY_PATH和LD_LIBRARY_PATH环境变量的区别

    LIBRARY_PATH和LD_LIBRARY_PATH环境变量的区别 LIBRARY_PATH和LD_LIBRARY_PATH是Linux下的两个环境变量,二者的含义和作用分别如下: LIBRARY ...

  7. C# 针对文件夹的操作

    //创建文件夹Directory.CreateDirectory(Server.MapPath("a"));Directory.CreateDirectory(Server.Map ...

  8. $CF1141C Polycarp Restores Permutation$

    \(problem\) 这题的大致意思就是已知数值差值 求1-n的排列 如果能构成排列 则输出这个排列.如果不能则输出-1 排列的值都是 大于1 而小于n的 而且没有相同的数字. 这题最关键的是 怎么 ...

  9. HTML--文本输入框、密码输入框

    当用户要在表单中键入字母.数字等内容时,就会用到文本输入框.文本框也可以转化为密码输入框. 语法: <form> <input type="text/password&qu ...

  10. 题解报告：hdu 1213 How Many Tables

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1213 Problem Description Today is Ignatius' birthday. ...