<!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. vim g 和 % 区别

    vim中的g(global)和%的区别: g:全局的 s/pattern/replacement/  : 替换行中出现的每一个pattern g/pattern/s/pattern/replaceme ...

  2. SoapUI项目书写自我规范

    -->Assertions 判断某个节点存在(_input_name, _button_name) -->Resource 文件夹命名 值去掉红色部分信息 https://mercury- ...

  3. ios15--综合小例子

    // // XMGViewController.m,控制器类 #import "XMGViewController.h" #import "XMGShop.h" ...

  4. 【转】Android进阶2之 阴影制作（Shadow）

    阴影制作:包括各种形状(矩形,圆形等等),以及文字等等都能设置阴影. 阴影制作是什么原理呢? 其实很简单,你需要设置阴影的东西被看作一个主层.然后在主层下面画一个阴影层. 阴影制作涉及到一个重要函数: ...

  5. git分支的合并和冲突解决【转】

    本文转载自:http://blog.csdn.net/Kingson_Wu/article/details/39227611 http://gitbook.liuhui998.com/3_3.html ...

  6. Makefile 实际用例分析（三） ------- 是用GUN automake 处理自己的工程

    前面两篇已经说过了自己怎么去为一个工程写makefile: 第一篇 第二篇 现在这一篇说的是怎么使用GNU的工具去写一个符合开源标准的Makefile呢! 首先我觉你应该参考: Automake Au ...

  7. Grunt环境搭建及使用

    jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前端开发人员,如果你现在还不知道grunt或者听说过 ...

  8. redis取经之路

    redis基本数据结构 Redis使用的是自己构建的简单动态字符串(SDS)[simple dynamic string,SDS]的抽象类型,并将SDS用做Rdis的默认字符串表示 redis> ...

  9. sql case when 用法

    sql语言中有没有类似C语言中的switch case的语句?? 没有,用case   when   来代替就行了.            例如,下面的语句显示中文年月         select  ...

  10. Log4J2的 PatternLayout

    Log4J2 PatternLayout 参考 日志样例 : 2018-10-21 07:30:05,184 INFO - DeviceChannelServiceImpl.java:434[defa ...