canvas生成背景图和文字 设置字体样式和大小
String的fromCharCode(code码)生成大小写字母和数字 str.toLowerCase()转小写
随机抽取不重复的6位数字组成验证码字符串
效果图:
<div class="wraper">
<input type="text" maxlength="6" placeholder="请输入验证码,不区分大小写" class="input">
<span class="icon"></span>
<p class="error">验证码输入有误,请重新输入</p>
<div class="canvas-box">
<canvas id="myCanvas" width="200" height="50"></canvas>
<input type="button" class="refresh">
</div>
<div class="btn">
<button class="submit">提交</button>
</div>
</div>
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
background: hotpink;
display: flex;
justify-content: center;
align-items: center;
}
.wraper {
width: 345px;
margin: 30px;
padding: 15px;
border-radius: 5px;
border: 1px solid #ccc;
background: #fff;
}
.input {
width: 300px;
padding: 15px;
border-radius: 5px;
border: 1px solid #ccc;
box-sizing: border-box;
}
.icon {
float: right;
width: 20px;
height: 20px;
margin-top: 13px;
background: url('./img/yes.png') no-repeat;
background-size: 100% 100%;
display: none;
}
.error {
margin-top: 10px;
color: red;
font-size: 12px;
display: none;
}
.canvas-box {
margin-top: 15px;
position: relative;
}
#myCanvas {
width: 300px;
height: 60px;
}
.canvas-box .refresh {
position: absolute;
right: 0;
top: 50%;
margin-top: -10px;
display: inline-block;
width: 20px;
height: 20px;
background: url('./img/refresh.png') no-repeat;
background-size: 100% 100%;
border: none;
outline: none;
cursor: pointer;
}
.btn {
margin-top: 15px;
}
.btn .submit {
width: 80px;
height: 40px;
border-radius: 5px;
background: blue;
color: #fff;
border: none;
outline: none;
cursor: pointer;
}
var arr = []; //筛选验证码的数组
var value = '';
//48-57 数字 65-90 大写字母 97-122 小写字母
for (var i = 48; i <= 57; i++) {
arr.push(String.fromCharCode(i));
}
for (let i = 65; i <= 90; i++) {
arr.push(String.fromCharCode(i));
}
for (let i = 97; i <= 122; i++) {
arr.push(String.fromCharCode(i));
}
//生成随机验证码
function getVerification() {
var codeStr = '';
var codeArr = [];
value = '';
while (true) {
let a = Math.floor(Math.random() * arr.length);
if (codeArr.indexOf(a) == -1) {
codeArr.push(arr[a]);
}
if (codeArr.length == 6) {
break;
}
}
codeStr = codeArr.join(' ');
value = codeArr.join('').toLowerCase();
console.log(value)
var myCanvas = document.getElementById('myCanvas');
var ctx = myCanvas.getContext('2d');
var img = new Image();
img.src = './img/bg_pic.jpg';
img.onload = function() {
var pat = ctx.createPattern(img, 'no-repeat');
ctx.fillStyle = pat;
ctx.fillRect(0, 0, myCanvas.width, myCanvas.height);
ctx.textAlign = 'center';
ctx.fillStyle = '#ccc';
ctx.font = '30px Roboto Slab';
ctx.setTransform(1, -0.12, 0.3, 1, 0, 12);
ctx.fillText(codeStr, myCanvas.width / 2, 35);
}
}
getVerification();
//事件
var refresh = document.getElementsByClassName('refresh')[0];
var submit = document.getElementsByClassName('submit')[0];
var inputValue = document.getElementsByClassName('input')[0];
var icon = document.getElementsByClassName('icon')[0];
var error = document.getElementsByClassName('error')[0];
refresh.onclick = function() {
getVerification();
}
submit.onclick = function() {
if (inputValue.value.toLowerCase() === value) {
icon.style.display = 'inline-block';
icon.style.background = "url('./img/yes.png') no-repeat";
icon.style.backgroundSize = "100% 100%";
error.style.display = 'none';
getVerification();
} else {
icon.style.display = 'inline-block';
icon.style.background = "url('./img/error.png') no-repeat";
icon.style.backgroundSize = "100% 100%";
error.style.display = 'block';
inputValue.value = '';
}
}
参考至腾讯课堂渡一教育
原文来自:https://www.cnblogs.com/sgs123/archive/2019/04/27/10780216.html
Validate常用的一些参数和方法:errorElement,errorClass,errorPlacement,errorLabelContainer,errorContainer,wrapper,success,debug
在前端开发中,JavaScript并没有提供直接操作Email邮箱的功能方法,但是遇到这样的需求,我们应该如何实现js发送邮件至指定邮箱功能呢?
当点击完按钮时,倒计时还没到60s过完时,刷新浏览器,验证码按钮又可以重新点击;就需要把时间都写到localstorage里面去,当打开页面的时候,就去localstorage里面去取,我这里就贴上我的解决方法,因为前几天有个vue的项目用到该方法
陆时需要发送短信验证码或者其他的验证方式来校验是否是本人操作,达到安全性的目的。点击获取验证码时,倒计时,暂时设定倒计时的时间为180秒....
滑动解锁应该是有两张图片,一张正常的,一张上面有解锁区域的(后端给),然后前端只用把用户释放鼠标后,滑动模块在图片上的xy轴传给后端,后端做成功与否的判断。如果只是纯前端js验证,不具备高安全性。
目前的社会发展得非常快,互联网产业的发展更是让很多人惊奇,平台越来越多也导致了搭载程序的要求必须高,服务平台完善性还体现于短信验证码是否具备,只有在具备的前提下才能有着更大的保证
早期的互联网是没有验证码的,随着后来计算机程序的发展,黑客编写了模仿登录、恶意破解密码、刷票、论坛灌水等恶意程序,破坏了整个网络的平衡性。介绍目前常用验证码的分类有哪些:Gif动画验证码、手机短信验证码、手机语音验证码、视频验证码、滑动验证码
滑动验证码在很多网站逐步流行起来,一方面对用户体验来说,比较新颖,操作简单,另一方面相对图形验证码来说,安全性并没有很大的降低。常见验证码是需要输入图中字符的,是因为机器识别字符比较困难,以此来防止机器自动的行为。
业务需求,需要在系统登陆的时候,使用“滑动图片验证码”,来验证操作的不是机器人。在一般的页面组件引用即可。onReload这个函数一般是用来请求后台图片的。
Vue项目中实现用户登录及token验证,先说一下我的实现步骤:使用easy-mock新建登录接口,模拟用户数据;使用axios请求登录接口,匹配账号和密码,账号密码验证后, 拿到token,将token存储到sessionStorage中,并跳转到首页
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!