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 相关文章推荐
Javascript中eval函数的使用方法与示例
Apr 09 Javascript
JScript中使用ADODB.Stream判断文件编码的代码
Jun 09 Javascript
Jquery 常用方法经典总结
Jan 28 Javascript
使用PHP+JQuery+Ajax分页的实现
Apr 23 Javascript
Mac地址验证的javascript代码
Nov 09 Javascript
jquery实现模拟百分比进度条渐变效果代码
Oct 29 Javascript
javascript实现的网站访问量统计代码
Dec 20 Javascript
js正则表达式注册页面表单验证
Oct 11 Javascript
在Vant的基础上封装下拉日期控件的代码示例
Dec 05 Javascript
vuex 中插件的编写案例解析
Jun 10 Javascript
微信小程序登录对接Django后端实现JWT方式验证登录详解
Jul 29 Javascript
如何使JavaScript休眠或等待
Apr 27 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 is_file 判断给定文件名是否为一个正常的文件
2010/05/10 PHP
基于php socket(fsockopen)的应用实例分析
2013/06/02 PHP
ThinkPHP中自定义错误页面和提示页面实例
2014/11/22 PHP
phpstorm激活码2020附使用详细教程
2020/09/25 PHP
在IE6下发生Internet Explorer cannot open the Internet site错误
2010/06/21 Javascript
jQuery 遍历- 关于closest() 的方法介绍以及与parents()的方法区别分析
2013/04/26 Javascript
js 单击式的下拉菜单效果实例
2013/08/13 Javascript
页面图片浮动左右滑动效果的简单实现案例
2014/02/10 Javascript
原生javascript实现DIV拖拽并计算重复面积
2015/01/02 Javascript
jQuery 选择器详解
2015/01/19 Javascript
JS动态加载当前时间的方法
2015/02/09 Javascript
JavaScript实现SHA-1加密算法的方法
2015/03/11 Javascript
js实现键盘Enter键提交表单的方法
2015/05/27 Javascript
javascript设计简单的秒表计时器
2020/09/05 Javascript
jQuery 如何给Carousel插件添加新的功能
2016/04/18 Javascript
JS多文件上传的实例代码
2017/01/11 Javascript
jQuery EasyUI Draggable拖动组件
2017/03/01 Javascript
React如何将组件渲染到指定DOM节点详解
2017/09/08 Javascript
AngularJS集合数据遍历显示的实例
2017/12/27 Javascript
Vue 实现双向绑定的四种方法
2018/03/16 Javascript
详解Nuxt.js部署及踩过的坑
2018/08/07 Javascript
javascript实现遮罩层动态效果实例
2019/05/14 Javascript
vue element-ui el-date-picker限制选择时间为当天之前的代码
2019/11/07 Javascript
vue路由缓存的几种实现方式小结
2020/02/02 Javascript
简单了解Vue + ElementUI后台管理模板
2020/04/07 Javascript
浅谈python中scipy.misc.logsumexp函数的运用场景
2016/06/23 Python
python区块及区块链的开发详解
2019/07/03 Python
python2.7实现复制大量文件及文件夹资料
2019/08/31 Python
python GUI库图形界面开发之PyQt5信号与槽多窗口数据传递详细使用方法与实例
2020/03/08 Python
Html5之title吸顶功能
2018/06/04 HTML / CSS
摩托车和ATV零件、配件和服装的首选在线零售商:MotoSport
2017/12/22 全球购物
美国在线家具网站:GDFStudio
2021/03/13 全球购物
编程用JAVA解析XML的方式
2013/07/07 面试题
《蚕姑娘》教学反思
2014/04/15 职场文书
国际商贸专业自荐信
2014/06/09 职场文书
使用Python开发贪吃蛇游戏 SnakeGame
2022/04/30 Python