<!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. linux设备驱动模型二【转】

    本文转载自:http://blog.csdn.net/u013904227/article/details/51167886 版权声明:本文为博主原创文章,未经博主允许不得转载.   目录(?)[+] ...

  2. Spark 机器学习 ---Word2Vec

    package Spark_MLlib import org.apache.spark.ml.feature.Word2Vec import org.apache.spark.sql.SparkSes ...

  3. printf的实型

    参  数 说  明 %f 按实数格式输出,整数部分按实际位数输出,6位小数 %m.nf 总位数m(含小数点),其中有n位小数 %-m.nf 同上,左对齐 %0.xf 输出小数点后x位   %f 后面如 ...

  4. 安装git，创建本地版本库

    安装 由于我使用的是Ubuntu,因此安装很简单,输入:sudo apt-get install git 如果是其他Linux版本,可以直接通过源码安装.先从Git官网下载源码,然后解压,依次输入:. ...

  5. BZOJ 2829 凸包

    思路: 把信用卡周围去掉  只剩下中间的长方形 最后的答案加上一个圆 //By SiriusRen #include <bits/stdc++.h> using namespace std ...

  6. DataFrame入门案例（集团公司对人事信息处理场景）

    我用一个集团公司对人事信息处理场景的简单案例,来作为入门,详细分析DataFrame上的各种常用操作,包括集团子公司的职工人事信息的合并,职工的部门相关信息查询.职工信息的统计.关联职工与部门信息的统 ...

  7. Flume 是什么？

    Flume是一个分布式.可靠.和高可用的海量日志聚合的系统,支持在系统中定制各类数据发送方,用于收集数据:同时,Flume提供对数据进行简单处理,并写到各种数据接受方(可定制)的能力. 收集.聚合事件 ...

  8. 一篇文章告诉你如何使用EF CodeFirst做增删改查

    一.修改数据 其实修改涉及的内容挺多的,是相对于其他操作来说比较繁琐.也是本文的重头戏. 虽然都是基础内容,但是也是值得细细品味的. 1.最简单直接的修改数据就是从数据库里检索出数据修改相应的字段即可 ...

  9. JS高级——面向对象方式解决歌曲管理问题

    需要注意的问题: 1.其他模块若是使用构造函数MP3创建对象,唯一不同的就是他们传入的音乐库是不一样的,所以构造函数中存在一个songList属性,其他一样的就被添加到了构造函数的原型对象之中 2.原 ...

  10. CSS——盒子居中显示

    嵌套中个的子盒子使用了绝对定位,父盒子使用了相对定位.那么子盒子如何居中显示: 1.距离左偏离50% 2.margin-right子盒子宽度的一半 <!DOCTYPE html> < ...