layUI的验证码功能及校验实例


Posted in Javascript onOctober 25, 2019

用layUI的伙伴一定发现了:

layUI的验证码是长死图!!!

没错,是死图~~~~

什么倒霉框架。

下面代码是canvas验证码及校验。稍微修改及可用。

我嵌套到项目里的效果如图:

layUI的验证码功能及校验实例

<!DOCTYPE html>
<html>
<!-- head -->
<head>
 <meta charset="utf-8">
 <title>图片登录验证</title>
 <meta name="renderer" content="webkit">
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 
 <style>
  body{margin: 10px;}
  .demo-carousel{height: 200px; line-height: 200px; text-align: center;}
  .code {
    width: 400px;
    margin: 0 auto;
  }
  .input-val {
    width: 295px;
    background: #ffffff;
    height: 2.8rem;
    padding: 0 2%;
    border-radius: 5px;
    border: none;
    border: 1px solid rgba(0,0,0,.2);
    font-size: 1.0625rem;
  }
  #canvas {
    float: right;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
  }
  .btn {
    width: 100px;
    height: 40px;
    background: #f1f1f1;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin: 20px auto 0;
    display: block;
    font-size: 1.2rem;
    color: #e22e1c;
    cursor: pointer;
  }
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
 </style>
</head>
 
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
 
  <body cz-shortcut-listen="true" class="layui-layout-body">
    <div class="layui-layer-move">
    
    <div class="code">
      <input type="text" value="" placeholder="请输入验证码(不区分大小写)" class="input-val">
      <canvas id="canvas" width="100" height="43"></canvas>
      <button class="btn">提交</button>
    </div>
    
    </div>
  </body>
<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,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 <= 3; i++) {
      var j = Math.floor(Math.random() * aLength);//获取到随机的索引值
      var deg = Math.random() * 30 * Math.PI / 180;//产生0~30之间的随机弧度
      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>
</html>

以上这篇layUI的验证码功能及校验实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用js获取电脑信息(是使用与IE浏览器)
Jan 15 Javascript
解决css和js的{}与smarty定界符冲突问题的两种方法
Sep 10 Javascript
js获取及修改网页背景色和字体色的方法
Dec 29 Javascript
JavaScript基础知识之方法汇总结
Jan 24 Javascript
jquery实现下拉框功能效果【实例代码】
May 06 Javascript
jQuery通用的全局遍历方法$.each()用法实例
Jul 04 Javascript
jQuery的Each比JS原生for循环性能慢很多的原因
Jul 05 Javascript
用jmSlip编写移动端顶部日历选择控件
Oct 24 Javascript
vue学习笔记之vue1.0和vue2.0的区别介绍
May 17 Javascript
微信小程序使用template标签实现五星评分功能
Nov 03 Javascript
vue实现移动端悬浮窗效果
Dec 01 Javascript
基于JS实现视频上传显示进度条
May 12 Javascript
layui点击按钮页面会自动刷新的解决方案
Oct 25 #Javascript
详解node登录接口之密码错误限制次数(含代码)
Oct 25 #Javascript
Vue 用Vant实现时间选择器的示例代码
Oct 25 #Javascript
vue登录以及权限验证相关的实现
Oct 25 #Javascript
vue-next/runtime-core 源码阅读指南详解
Oct 25 #Javascript
JS实现简单tab选项卡切换
Oct 25 #Javascript
vue项目从node8.x升级到12.x后的问题解决
Oct 25 #Javascript
You might like
两个开源的Php输出Excel文件类
2010/02/08 PHP
具有时效性的php加密解密函数代码
2013/06/19 PHP
Jquery作者John Resig自己封装的javascript 常用函数
2009/11/09 Javascript
调试Javascript代码(浏览器F12及VS中debugger关键字)
2013/01/25 Javascript
js弹出确认是否删除对话框
2014/03/27 Javascript
ext combobox动态加载数据库数据(附前后台)
2014/06/17 Javascript
动态载入js提高网页打开速度的方法
2014/07/04 Javascript
js监控IE火狐浏览器关闭、刷新、回退、前进事件
2014/07/23 Javascript
JS回调函数的应用简单实例
2014/09/17 Javascript
基于javascript制作微博发布栏效果
2016/04/04 Javascript
jQuery操作cookie
2016/08/08 Javascript
Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法
2016/10/13 Javascript
jQuery select自动选中功能实现方法分析
2016/11/28 Javascript
完美解决input[type=number]无法显示非数字字符的问题
2017/02/28 Javascript
Vuejs在v-for中,利用index来对第一项添加class的方法
2018/03/03 Javascript
Layui组件Table绑定行点击事件和获取行数据的方法
2018/08/19 Javascript
vue通过style或者class改变样式的实例代码
2018/10/30 Javascript
vue中eslintrc.js配置最详细介绍
2018/12/21 Javascript
从0到1搭建Element的后台框架的方法步骤
2019/04/10 Javascript
NodeJs 实现简单WebSocket即时通讯的示例代码
2019/08/05 NodeJs
react 原生实现头像滚动播放的示例
2020/04/21 Javascript
jquery实现穿梭框功能
2021/01/19 jQuery
[11:12]2018DOTA2国际邀请赛寻真——绿色长城OpTic
2018/08/10 DOTA
简单介绍Python中的floor()方法
2015/05/15 Python
Linux下使用python自动修改本机网关代码分享
2015/05/21 Python
举例详解Python中threading模块的几个常用方法
2015/06/18 Python
python实现音乐下载的统计
2018/06/20 Python
Python将string转换到float的实例方法
2019/07/29 Python
南非最受欢迎的时尚品牌:MRP
2016/09/18 全球购物
英国高街奥特莱斯:Highstreet Outlet
2019/11/21 全球购物
opencv实现图像平移效果
2021/03/24 Python
个人求职信范文分享
2013/12/13 职场文书
化妆品活动策划方案
2014/05/23 职场文书
音乐教师个人总结
2015/02/06 职场文书
大学生敬老院活动总结
2015/05/07 职场文书
处理canvas绘制图片模糊问题
2022/05/11 Javascript