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 相关文章推荐
jQuery 1.0.4 - New Wave Javascript(js源文件)
Jan 15 Javascript
Jqyery中同等与js中windows.onload的应用
May 10 Javascript
调用DOM对象的focus使文本框获得焦点
Feb 19 Javascript
jQuery实现菜单式图片滑动切换
Mar 14 Javascript
JavaScript中用于四舍五入的Math.round()方法讲解
Jun 15 Javascript
AngularJS实现表单验证功能详解
Oct 12 Javascript
完美解决axios在ie下的兼容性问题
Mar 05 Javascript
js获取对象,数组所有属性键值(key)和对应值(value)的方法示例
Jun 19 Javascript
谈谈IntersectionObserver懒加载的具体使用
Oct 15 Javascript
JS实现简单tab选项卡切换
Oct 25 Javascript
Vue全局使用less样式,组件使用全局样式文件中定义的变量操作
Oct 21 Javascript
vue-drawer-layout实现手势滑出菜单栏
Nov 19 Vue.js
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
espresso double下 咖啡粉超细时 饼压力对咖啡的影响
2021/03/03 冲泡冲煮
PHP截取汉字乱码问题解决方法mb_substr函数的应用
2008/03/30 PHP
Yii2前后台分离及migrate使用(七)
2016/05/04 PHP
js option删除代码集合
2008/11/12 Javascript
javascript利用初始化数据装配模版的实现代码
2010/11/17 Javascript
JavaScript里实用的原生API汇总
2015/05/14 Javascript
javascript实现控制的多级下拉菜单
2015/07/05 Javascript
jQuery幻灯片特效代码分享--鼠标滑过按钮时切换(2)
2020/11/18 Javascript
Bootstrap所支持的表单控件实例详解
2016/05/16 Javascript
jQuery实现移动端Tab选项卡效果
2017/03/15 Javascript
Bootstrap Table使用整理(二)
2017/06/09 Javascript
Vue入门之animate过渡动画效果
2018/04/08 Javascript
代码整洁之道(重构)
2018/10/25 Javascript
图片文字识别(OCR)插件Ocrad.js教程
2018/11/26 Javascript
javascript canvas实现简易时钟例子
2020/09/05 Javascript
Python 深入理解yield
2008/09/06 Python
python搭建虚拟环境的步骤详解
2016/09/27 Python
python中的break、continue、exit()、pass全面解析
2017/08/05 Python
详解将Pandas中的DataFrame类型转换成Numpy中array类型的三种方法
2019/07/06 Python
解决在pycharm运行代码,调用CMD窗口的命令运行显示乱码问题
2019/08/23 Python
浅析python中while循环和for循环
2019/11/19 Python
Tensorflow 卷积的梯度反向传播过程
2020/02/10 Python
Python列表嵌套常见坑点及解决方案
2020/09/30 Python
深入浅析css3 border-image边框图像详解
2015/11/24 HTML / CSS
用canvas显示验证码的实现
2020/04/10 HTML / CSS
Monnier Frères美国官网:法国知名奢侈品网站
2016/11/22 全球购物
黑猩猩商店:The Chimp Store
2020/02/12 全球购物
师范生自我鉴定范文
2013/10/05 职场文书
偷看我的初中毕业鉴定
2014/01/29 职场文书
党员志愿者活动方案
2014/08/28 职场文书
2014领导班子四风问题对照检查材料思想汇报
2014/09/21 职场文书
专项资金申请报告
2015/05/15 职场文书
工资证明格式模板
2015/06/12 职场文书
与Windows10相比Windows11有哪些改进?值不值得升级?
2021/11/21 数码科技
Apache POI操作批量导入MySQL数据库
2022/06/21 Servers
MySQL主从切换的超详细步骤
2022/06/28 MySQL