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.获取验证 ...
随机推荐
- Codeforces Round #367 (Div. 2) 套题
吐槽:只能说是上分好场,可惜没打,唉 A:Beru-taxi (水题,取最小值) #include <cstdio> #include <cstring> #include & ...
- 利用Spinnaker创建持续交付流水线
在Pivotal Container Service (PKS)上部署软件的方法多种多样,本文重点介绍如何使用Spinnaker在PKS(或任何Kubernetes群集)上进行持续交付. Pivota ...
- 返回Json和XML两种格式
由于项目需要,同一接口支持根据参数不同返回XML和Json两种格式的数据,在网上看了很多大多是加后缀的方式来实现返回不同格式数据的,后来看了一篇http://www.importnew.com/276 ...
- python3+request接口自动化框架
首次书写博客,记录下写的自动化接口框架,框架比较简单,哈哈哈,算是记录下历程把!~~~ 一.本次框架由python3.6 书写 1.准备代码环境,下载python3.6 下载地址:https:/ ...
- 34、JavaScript面向对象（内置构造函数&相关方法|属性|运算符&继承&面向对象）
一.面向对象 1.1 this的指向问题 要看清楚最终的函数调用者是谁. IIFE也被当做函数直接运行,IIFE的this都是window对象 函数的arguments是类数组对象,比如传入的第0项参 ...
- celery定时执行ansible api返回为空的问题
有两种方法解决这个问题,就是关闭assert:1.在celery 的worker启动窗口设置export PYTHONOPTIMIZE=1或打开celery这个参数-O OPTIMIZATION2.注 ...
- 【洛谷4396/BZOJ3236】[AHOI2013]作业（莫队+分块/树状数组/线段树）
题目: 洛谷4396 BZOJ3236(权限) 这题似乎BZOJ上数据强一些? 分析: 这题真的是--一言难尽 发现题面里没说权值的范围,怕出锅就写了离散化.后来经过面向数据编程(以及膜神犇代码)知道 ...
- linux命令大杂烩之网络管理
在Linux中curl是一个利用URL规则在命令行下工作的文件传输工具,可以说是一款很强大的http命令行工具.它支持文件的上传和下载,是综合传输工具,但按传统,习惯称url为下载工具. 作为一款强力 ...
- DataFrame入门案例（集团公司对人事信息处理场景）
我用一个集团公司对人事信息处理场景的简单案例,来作为入门,详细分析DataFrame上的各种常用操作,包括集团子公司的职工人事信息的合并,职工的部门相关信息查询.职工信息的统计.关联职工与部门信息的统 ...
- DAO模式详解
DAO模式 数据访问层(DAO): 数据的增.删.改.查操作: 业务逻辑层(service): 业务来往的操作,需要调用数据访问层则调用数据访问层,传递数据: 表现层(UI): 呈现数据,用户交互. ...