JS 验证码功能的三种实现方式


Posted in Javascript onNovember 26, 2018

摘要:

我们在做一些后台系统的登录验证的时候。难免会用到验证码功能,来辅助进行验证,提高安全性,在我们日常生活中,验证方式无处不在,最多的是短信验证码的方式,通过点击发送验证码,然后手机接收短信,填写验证码才能登陆成功,但是也有一些其他验证码功能也在使用,所以,我就想着来集中记录一下,希望对大家有所帮助...

一.数字短信验证码

思路:

a.两个文本框+一个获取验证码按钮,文本框用来输入手机号和获取到的验证码,按钮负责点击和记录倒计时;

b.js书写定时器setTimeout,进行60秒验证码失效时间记录;

c.后台提供短信获取验证的接口,我们把手机号作为参数上传,后台获取到后给该手机号下发验证码;

效果图展示:

JS 验证码功能的三种实现方式

例1.0:点击按钮发送验证码效果图

JS 验证码功能的三种实现方式

例2.0:短信接收截图

代码展示:

html

<input type="text" name="phone" id="phone" value="" placeholder="请输入手机号" maxlength="11" />
<input type="" name="verCode" id="verCode" value="" placeholder="请输入验证码" maxlength="6"/>
<input type="button" name="" id="verCodeBtn" value="获取验证码" onclick="settime(this);"/>

css

<--博主偷点小懒,省略,看不惯就关注我啊-->

倒计时js

//验证码
var counts = 60;

function settime(val) {
 if(counts == 0) {
  val.removeAttribute("disabled");
  val.value = "获取验证码";
  counts = 60;
  return false;
 } else {
  val.setAttribute("disabled", true);
  val.value = "重新发送(" + counts + ")";
  counts--;
 }
 setTimeout(function() {
  settime(val);
 }, 1000);
}

Ajax接口代码js

$(function(){
 //获取验证码
 $("#verCodeBtn").click(function() {
  var userinfo = {
   "UserPhoneNum": '86//' + $("input[name='phone']").val()
  }
  $.ajax({
   url: "https://www.xxxxx.cn/user/sendcode/",
   data: userinfo,
   type: "get",
   success: function(data) {
    if(JSON.parse(data).state === 404 || JSON.parse(data).state === 202 || userinfo.UserPhoneNum === '86//') {
     alert("验证码发送失败")
    } else {
     alert("验证码发送成功,请耐心等待")
    }
   },
   error: function() {
    alert("发送失败");
   }
  });
 });
})

二.图形验证码

概要:一般的图形验证码就像上方的短信验证码一样,就是后台生成的验证码图片返回给前端的,那样的话就比较简单,因为复杂的都让后台解决了,我在这里主要说的是另一种,就是不调用后台接口,通过canvas画布来解决图形验证码。

思路:

a.一个文本框用来输入由数字和字母组合的验证码+一个画布标签来显示图形验证码+一个提交按钮;

b.提交按钮进行表单验证,输入正确或者错误进行相应的提示;

c.用画布生成并渲染出验证码图形,并且得到随机的颜色值;

效果图展示:

JS 验证码功能的三种实现方式

例3.0基础图片展示

JS 验证码功能的三种实现方式

例4.0提交成功效果展示

JS 验证码功能的三种实现方式

例5.0提交失败效果展示

代码展示:

HTML

<div class="code">
  <input type="text" value="" placeholder="请输入验证码(不区分大小写)" class="input-val">
  <canvas id="canvas" width="100" height="30"></canvas>
  <button class="btn">提交</button>
 </div>

css

<style>
  .input-val {
  width: 200px;
  height: 32px;
  border: 1px solid #ddd;
  box-sizing: border-box;
  }
  #canvas {
  vertical-align: middle;
  box-sizing: border-box;
  border: 1px solid #ddd;
  cursor: pointer;
  }
  .btn {
  display: block;
  margin-top: 20px;
  height: 32px;
  width: 100px;
  font-size: 16px;
  color: #fff;
  background-color: #457adb;
  border: none;
  border-radius: 50px;
  }
 </style>

js

<script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>
<script>
 $(function(){
  var show_num = [];
  draw(show_num);
  $("#canvas").on('click',function(){
   draw(show_num);
  })
  $(".btn").on('click',function(){
   var val = $(".input-val").val().toLowerCase();
   var num = show_num.join("");
   if(val==''){
    alert('请输入验证码!');
   }else if(val == num){
    alert('提交成功!');
    $(".input-val").val('');
    // draw(show_num);
   }else{
    alert('验证码错误!请重新输入!');
    $(".input-val").val('');
    // draw(show_num);
   }
  })
 })
 //生成并渲染出验证码图形
 function draw(show_num) {
  var canvas_width=$('#canvas').width();
  var canvas_height=$('#canvas').height();
  var canvas = document.getElementById("canvas");//获取到canvas的对象,演员
  var context = canvas.getContext("2d");//获取到canvas画图的环境,演员表演的舞台
  canvas.width = canvas_width;
  canvas.height = canvas_height;
  var sCode = "a,b,c,d,e,f,g,h,i,j,k,m,n,p,q,r,s,t,u,v,w,x,y,z,A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
  var aCode = sCode.split(",");
  var aLength = aCode.length;//获取到数组的长度
  for (var i = 0; i < 4; i++) { //这里的for循环可以控制验证码位数(如果想显示6位数,4改成6即可)
   var j = Math.floor(Math.random() * aLength);//获取到随机的索引值
   // var deg = Math.random() * 30 * Math.PI / 180;//产生0~30之间的随机弧度
   var deg = Math.random() - 0.5; //产生一个随机弧度
   var txt = aCode[j];//得到随机的一个内容
   show_num[i] = txt.toLowerCase();
   var x = 10 + i * 20;//文字在canvas上的x坐标
   var y = 20 + Math.random() * 8;//文字在canvas上的y坐标
   context.font = "bold 23px 微软雅黑";
   context.translate(x, y);
   context.rotate(deg);
   context.fillStyle = randomColor();
   context.fillText(txt, 0, 0);
   context.rotate(-deg);
   context.translate(-x, -y);
  }
  for (var i = 0; i <= 5; i++) { //验证码上显示线条
   context.strokeStyle = randomColor();
   context.beginPath();
   context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
   context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
   context.stroke();
  }
  for (var i = 0; i <= 30; i++) { //验证码上显示小点
   context.strokeStyle = randomColor();
   context.beginPath();
   var x = Math.random() * canvas_width;
   var y = Math.random() * canvas_height;
   context.moveTo(x, y);
   context.lineTo(x + 1, y + 1);
   context.stroke();
  }
 }
 //得到随机的颜色值
 function randomColor() {
  var r = Math.floor(Math.random() * 256);
  var g = Math.floor(Math.random() * 256);
  var b = Math.floor(Math.random() * 256);
  return "rgb(" + r + "," + g + "," + b + ")";
 }
</script>

三.滑动验证码

摘要:博客园登录的时候就用到了这个滑块登录,是完成拼图形式的,我下面这个原理是一样的,逻辑是根据鼠标滑动轨迹,坐标位置,计算拖动速度等等来判断是否人为操作,如果小伙伴想做和博客园效果一样的,那么可以用来做参考。

思路:

a.由三个div组成,构成了滑块和底部进度条的效果;

b.书写js,注册鼠标按下,悬浮,松开事件;

c.记录滑块移动的距离和状态进行判断是否成功;

效果图展示:

JS 验证码功能的三种实现方式

例6.0:滑动验证码初始状态

JS 验证码功能的三种实现方式

例7.0:滑动状态

JS 验证码功能的三种实现方式

例8.0:成功状态

代码展示:

html

<div class="drag">
  <div class="bg"></div>
  <div class="text" onselectstart="return false;">请拖动滑块解锁</div>
  <div class="btn">>></div>
</div>

css

<style>
  .drag{
   width: 300px;
   height: 40px;
   line-height: 40px;
   background-color: #e8e8e8;
   position: relative;
   margin:0 auto;
  }
  .bg{
   width:40px;
   height: 100%;
   position: absolute;
   background-color: #75CDF9;
  }
  .text{
   position: absolute;
   width: 100%;
   height: 100%;
   text-align: center;
   user-select: none;
  }
  .btn{
   width:40px;
   height: 38px;
   position: absolute;
   border:1px solid #ccc;
   cursor: move;
   font-family: "宋体";
   text-align: center;
   background-color: #fff;
   user-select: none;
   color:#666;
  }
</style>

js

<script>
  //一、定义一个获取DOM元素的方法
  var $ = function(selector){
    return document.querySelector(selector);
   },
   box = $(".drag"),//容器
   bg = $(".bg"),//背景
   text = $(".text"),//文字
   btn = $(".btn"),//滑块
   success = false,//是否通过验证的标志
   distance = box.offsetWidth - btn.offsetWidth;//滑动成功的宽度(距离)
  //二、给滑块注册鼠标按下事件
  btn.onmousedown = function(e){
   //1.鼠标按下之前必须清除掉后面设置的过渡属性
   btn.style.transition = "";
   bg.style.transition ="";
   //说明:clientX 事件属性会返回当事件被触发时,鼠标指针向对于浏览器页面(或客户区)的水平坐标。
   //2.当滑块位于初始位置时,得到鼠标按下时的水平位置
   var e = e || window.event;
   var downX = e.clientX;
   //三、给文档注册鼠标移动事件
   document.onmousemove = function(e){
    var e = e || window.event;
    //1.获取鼠标移动后的水平位置
    var moveX = e.clientX;
    //2.得到鼠标水平位置的偏移量(鼠标移动时的位置 - 鼠标按下时的位置)
    var offsetX = moveX - downX;
    //3.在这里判断一下:鼠标水平移动的距离 与 滑动成功的距离 之间的关系
    if( offsetX > distance){
     offsetX = distance;//如果滑过了终点,就将它停留在终点位置
    }else if( offsetX < 0){
     offsetX = 0;//如果滑到了起点的左侧,就将它重置为起点位置
    }
    //4.根据鼠标移动的距离来动态设置滑块的偏移量和背景颜色的宽度
    btn.style.left = offsetX + "px";
    bg.style.width = offsetX + "px";
    //如果鼠标的水平移动距离 = 滑动成功的宽度
    if( offsetX == distance){
     //1.设置滑动成功后的样式
     text.innerHTML = "验证通过";
     text.style.color = "#fff";
     btn.innerHTML = "√";
     btn.style.color = "green";
     bg.style.backgroundColor = "lightgreen";
     //2.设置滑动成功后的状态
     success = true;
     //成功后,清除掉鼠标按下事件和移动事件(因为移动时并不会涉及到鼠标松开事件)
     btn.onmousedown = null;
     document.onmousemove = null;
     //3.成功解锁后的回调函数
     setTimeout(function(){
      alert('解锁成功!');
     },100);
    }
   }
   //四、给文档注册鼠标松开事件
   document.onmouseup = function(e){
    //如果鼠标松开时,滑到了终点,则验证通过
    if(success){
     return;
    }else{
     //反之,则将滑块复位(设置了1s的属性过渡效果)
     btn.style.left = 0;
     bg.style.width = 0;
     btn.style.transition = "left 1s ease";
     bg.style.transition = "width 1s ease";
    }
    //只要鼠标松开了,说明此时不需要拖动滑块了,那么就清除鼠标移动和松开事件。
    document.onmousemove = null;
    document.onmouseup = null;
   }
  }
</script>

总结

以上所述是小编给大家介绍的验证码功能的三种实现方式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
兼容Mozilla必须知道的知识。
Jan 09 Javascript
js 实现无干扰阴影效果 简单好用(附文件下载)
Dec 27 Javascript
通过判断JavaScript的版本实现执行不同的代码
May 11 Javascript
jsp网页搜索结果中实现选中一行使其高亮
Feb 17 Javascript
基于jQuery Tipso插件实现消息提示框特效
Mar 16 Javascript
对Js OOP编程 创建对象的一些全面理解
Jul 26 Javascript
jquery 动态增加,减少input表单的简单方法(必看)
Oct 12 Javascript
vue.js如何将echarts封装为组件一键使用详解
Oct 10 Javascript
基于D3.js实现时钟效果
Jul 17 Javascript
react实现移动端下拉菜单的示例代码
Jan 16 Javascript
深入了解JavaScript词法作用域
Jul 29 Javascript
微信小程序实现轮播图指示器
Jun 25 Javascript
trackingjs+websocket+百度人脸识别API实现人脸签到
Nov 26 #Javascript
tracking.js页面人脸识别插件使用方法
Apr 16 #Javascript
详解Node.js 中使用 ECDSA 签名遇到的坑
Nov 26 #Javascript
Vue.js的动态组件模板的实现
Nov 26 #Javascript
解决Vue开发中对话框被遮罩层挡住的问题
Nov 26 #Javascript
Vue项目部署在Spring Boot出现页面空白问题的解决方案
Nov 26 #Javascript
electron制作仿制qq聊天界面的示例代码
Nov 26 #Javascript
You might like
php实现的读取CSV文件函数示例
2017/02/07 PHP
laravel admin实现分类树/模型树的示例代码
2020/06/10 PHP
Javascript实现的分页函数
2007/02/07 Javascript
把html页面的部分内容保存成新的html文件的jquery代码
2009/11/12 Javascript
javascript 系统文件夹文件操作及参数介绍
2013/01/08 Javascript
jq选项卡鼠标延迟的插件实例
2013/05/13 Javascript
jquery和javascript中如何将一元素的内容赋给另一元素
2014/01/09 Javascript
JavaScript中双叹号!!作用示例介绍
2014/09/21 Javascript
Javascript实现Web颜色值转换
2015/02/05 Javascript
JQuery鼠标移到小图显示大图效果的方法
2015/06/10 Javascript
javascript中的正则表达式使用详解
2015/08/30 Javascript
JS与jQuery遍历Table所有单元格内容的方法
2015/12/07 Javascript
Window.Open打开窗体和if嵌套代码
2016/04/15 Javascript
jQuery实现的淡入淡出图片轮播效果示例
2018/08/29 jQuery
用Vue.js在浏览器中实现裁剪图像功能
2019/06/18 Javascript
js实现数字滚动特效
2019/12/16 Javascript
vue中使用v-for时为什么不能用index作为key
2020/04/04 Javascript
javascript实现评分功能
2020/06/24 Javascript
[03:57]2016完美“圣”典风云人物:rOtk专访
2016/12/09 DOTA
[54:28]EG vs OG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
使用Python编写一个最基础的代码解释器的要点解析
2016/07/12 Python
对python中for、if、while的区别与比较方法
2018/06/25 Python
详解python中的Turtle函数库
2018/11/19 Python
Python基于百度AI实现OCR文字识别
2020/04/02 Python
Python Opencv轮廓常用操作代码实例解析
2020/09/01 Python
什么叫应用程序域?什么是托管代码?什么是强类型系统?什么是装箱和拆箱?什么是重载?CTS、CLS和CLR分别作何解释?
2012/05/23 面试题
建筑公司文秘岗位职责
2013/11/29 职场文书
前台接待员岗位职责
2014/01/02 职场文书
高二学年自我鉴定范文(2篇)
2014/09/26 职场文书
品质保证书格式
2015/02/28 职场文书
幼儿园中班个人总结
2015/02/28 职场文书
财务部岗位职责范本
2015/04/14 职场文书
合同审查法律意见书
2015/06/04 职场文书
2016年学习雷锋精神广播稿
2015/12/17 职场文书
2019开业庆典剪彩仪式主持词!
2019/07/22 职场文书
详解Oracle数据库中自带的所有表结构(sql代码)
2021/11/20 Oracle