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+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合
Mar 10 Javascript
MooTools 页面滚动浮动层智能定位实现代码
Aug 23 Javascript
jquery实现手机号码选号的方法
Jul 31 Javascript
基于jQuery仿淘宝产品图片放大镜代码分享
Jun 23 Javascript
JavaScript学习笔记之数组去重
Mar 23 Javascript
JavaScript中定义对象原型的两种使用方法
Dec 15 Javascript
浅谈Vue.js
Mar 02 Javascript
JS实现静态页面搜索并高亮显示功能完整示例
Sep 19 Javascript
JS 正则表达式验证密码、邮箱格式的实例代码
Oct 28 Javascript
微信头像地址失效踩坑记附带解决方案
Sep 23 Javascript
vue实现lodop打印功能的示例
Nov 11 Javascript
字节飞书面试promise.all实现示例
Jun 16 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+AJAX实现无刷新注册(带用户名实时检测)
2007/01/02 PHP
在项目中寻找代码的坏命名
2012/07/14 PHP
CI(CodeIgniter)框架配置
2014/06/10 PHP
详解PHP PDO简单教程
2019/05/28 PHP
整理8个很棒的 jQuery 倒计时插件和教程
2011/12/12 Javascript
利用js动态添加删除table行的示例代码
2013/12/16 Javascript
jquery插件star-rating.js实现星级评分特效
2015/04/15 Javascript
编写高性能Javascript代码的N条建议
2015/10/12 Javascript
javascript产生随机数方法汇总
2016/01/25 Javascript
Vuejs 组件——props数据传递的实例代码
2017/03/07 Javascript
NodeJS 实现手机短信验证模块阿里大于功能
2017/06/19 NodeJs
jQuery实现拖动效果的实例代码
2017/06/25 jQuery
node.js中使用Export和Import的方法
2017/09/18 Javascript
jquery animate动画持续运动的实例
2017/11/29 jQuery
基于Vue+element-ui 的Table二次封装的实现
2018/07/20 Javascript
javascript实现的字符串转换成数组操作示例
2019/06/13 Javascript
Vue 动态添加路由及生成菜单的方法示例
2019/06/20 Javascript
vue 实现路由跳转时更改页面title
2019/11/05 Javascript
详解Python3中yield生成器的用法
2015/08/20 Python
python利用标准库如何获取本地IP示例详解
2017/11/01 Python
python放大图片和画方格实现算法
2018/03/30 Python
Python爬虫之正则表达式的使用教程详解
2018/10/25 Python
python多进程并行代码实例
2019/09/30 Python
python set集合使用方法解析
2019/11/05 Python
使用Jupyter notebooks上传文件夹或大量数据到服务器
2020/04/14 Python
意大利在线大学图书馆:Libreria universitaria
2019/07/16 全球购物
法学毕业生自我鉴定
2013/11/08 职场文书
餐饮业创业计划书范文
2014/01/06 职场文书
公积金单位接收函
2014/01/11 职场文书
2014基层党员干部学习全国两会心得体会
2014/03/17 职场文书
收入证明范本
2015/06/12 职场文书
2015年中学团委工作总结
2015/07/22 职场文书
分享3个非常实用的 Python 模块
2022/03/03 Python
Go语言实现一个简单的并发聊天室的项目实战
2022/03/18 Golang
关于Python使用turtle库画任意图的问题
2022/04/01 Python
Mysql 如何合理地统计一个数据库里的所有表的数据量
2022/04/18 MySQL