vuejs验证码
<!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验证码的更多相关文章
- VueJs(1)---快速上手VueJs
[VueJs入门] 版权声明 首先申明:此篇博客不是本人原创,只是最近开始学习vue.jS,看到有作者写的很不错,我仅在它的基础上仅仅是修改了样式 原文博客地址:https://blog.csdn.n ...
- golang包快速生成base64验证码
base64Captcha快速生成base64编码图片验证码字符串 支持多种样式,算术,数字,字母,混合模式,语音模式. Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一.Base6 ...
- .net点选验证码实现思路分享
哈哈好久没冒泡了,最进看见点选验证码有点意思,所以想自己写一个. 先上效果图 如果你被这个效果吸引了就请继续看下去. 贴代码前先说点思路: 1.要有一个汉字库,并按字形分类.(我在数据库里是安部首分类 ...
- 【探索】无形验证码 —— PoW 算力验证
先来思考一个问题:如何写一个能消耗对方时间的程序? 消耗时间还不简单,休眠一下就可以了: Sleep(1000) 这确实消耗了时间,但并没有消耗 CPU.如果对方开了变速齿轮,这瞬间就能完成. 不过要 ...
- TODO：Laravel增加验证码
TODO:Laravel增加验证码1. 先聊聊验证码是什么,有什么作用?验证码(CAPTCHA)是"Completely Automated Public Turing test to te ...
- TODO：搭建Laravel VueJS SemanticUI
TODO:搭建Laravel VueJS SemanticUI Laravel是一套简洁.优雅的PHP开发框架(PHP Web Framework).可以让你从面条一样杂乱的代码中解脱出来:它可以帮你 ...
- PHP-解析验证码类--学习笔记
1.开始 在 网上看到使用PHP写的ValidateCode生成验证码码类,感觉不错,特拿来分析学习一下. 2.类图 3.验证码类部分代码 3.1 定义变量 //随机因子 private $char ...
- 随手记_C#验证码
前言 最近在网上偶然看见一个验证码,觉得很有意思,于是搜了下,是使用第三方实现的,先看效果: 总体来说效果还是可以的,官方提供的SDK也比较详细,可配置性很高.在这里在简单啰嗦几句使用方式: 使用步骤 ...
- WPF做12306验证码点击效果
一.效果 和12306是一样的,运行一张图上点击多个位置,横线以上和左边框还有有边框位置不允许点击,点击按钮输出坐标集合,也就是12306登陆的时候,需要向后台传递的参数. 二.实现思路 1.获取验证 ...
随机推荐
- ubuntu多版本jdk安装及切换
系统:ubuntu14.04 一.安装openjdk1.7 sudo apt-get install openjdk-7-jre openjdk-7-jdk 安装完成后找到其安装路径: dpkg -L ...
- 【POJ 1275】 Cashier Employment
[题目链接] 点击打开链接 [算法] 设Ti为第i小时有多少个出纳员开始工作,Vi表示第i小时有多少个来应聘的出纳员 那么,有 : 1. 0 <= Ti <= Vi 2. Ti + Ti- ...
- 洛谷 P1498 南蛮图腾 —— 模拟
题目:https://www.luogu.org/problemnew/show/P1498 大约一年前该做的题...现在来填一下坑: 然而不怎么会模拟!还滚去看TJ了: 就是翻倍复制: \ 这个符号 ...
- 为什么要使用XHTML？
XHTML 是什么? XHTML 指可扩展超文本标签语言(EXtensible HyperText Markup Language). XHTML 的目标是取代 HTML. XHTML 与 HTML ...
- Flink之Window Operation
目录 Configuring Time Characteristics Process Functions Window Operators Applying Functions on Windows ...
- D. Toy Sum(cf)
http://codeforces.com/problemset/problem/405/D 题意:已知集合S={1,2,3......1000000},s=1000000,从集合S中选择n个数,X= ...
- IE版本的判断
var Sys = {};var ua = navigator.userAgent.toLowerCase(); var s;(s = ua.match(/msie ([\d.]+)/)) ? Sys ...
- 51nod 1577 线性基
思路: http://blog.csdn.net/yxuanwkeith/article/details/53524757 //By SiriusRen #include <bits/stdc+ ...
- Appium Appium 链接夜神模拟器
在此之前,已经安装Appium,参考第一部分在 Windows7 搭建 Appium (一) https://testerhome.com/topics/8004 第一步安装Android开发环境 下 ...
- Ubuntu下搭建repo服务器（三）: 搭建Android repo服务器
1. 配置repo 1.1 下载git-repo.git(B端) mkdir -p ~/gitCfg cd ~/gitCfg git clone https://gerrit.googlesourc ...