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里的正则表达式说明
Aug 03 Javascript
js通过八个点 拖动改变div大小的实现方法
Mar 05 Javascript
JavaScript中的Math.atan2()方法使用详解
Jun 15 Javascript
JS面试题---关于算法台阶的问题
Jul 26 Javascript
常用原生js自定义函数总结
Nov 20 Javascript
JS实现合并json对象的方法
Oct 10 Javascript
vue.js提交按钮时进行简单的if判断表达式详解
Aug 08 Javascript
在vue中解决提示警告 for循环报错的方法
Sep 28 Javascript
ES6 class的应用实例分析
Jun 27 Javascript
精读《Vue3.0 Function API》
May 20 Javascript
在vue项目中promise解决回调地狱和并发请求的问题
Nov 09 Javascript
浅谈vue2的$refs在vue3组合式API中的替代方法
Apr 18 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
用php将任何格式视频转为flv的代码
2009/09/03 PHP
简单的php文件上传(实例)
2013/10/27 PHP
Yii实现多数据库主从读写分离的方法
2014/12/29 PHP
PHP读书笔记整理_结构语句详解
2016/07/01 PHP
php 截取utf-8格式的字符串实例代码
2016/10/30 PHP
PHP7.1实现的AES与RSA加密操作示例
2018/06/15 PHP
PHP开发的文字水印,缩略图,图片水印实现类与用法示例
2019/04/12 PHP
完美解决JS中汉字显示乱码问题(已解决)
2006/12/27 Javascript
window.js 主要包含了页面的一些操作
2009/12/23 Javascript
更优雅的事件触发兼容
2011/10/24 Javascript
JQuery触发radio或checkbox的change事件
2012/12/18 Javascript
JS打印gridview实现原理及代码
2013/02/05 Javascript
jQuery之日期选择器的深入解析
2013/06/19 Javascript
jquery中each方法示例和常用选择器
2014/07/08 Javascript
JS版元素周期表实现方法
2015/08/05 Javascript
JS实现兼容各种浏览器的获取选择文本的方法【测试可用】
2016/06/21 Javascript
微信小程序自定义弹窗滚动与页面滚动冲突的解决方法
2019/07/16 Javascript
layer.alert回调函数执行关闭弹窗的实例
2019/09/11 Javascript
Vue学习之常用指令实例详解
2020/01/06 Javascript
electron 如何将任意资源打包的方法步骤
2020/04/16 Javascript
Vue使用v-viewer实现图片预览
2020/10/21 Javascript
Ant design vue table 单击行选中 勾选checkbox教程
2020/10/24 Javascript
[02:03]《现实生活中的DOTA2》—林书豪&DOTA2职业选手出演短片
2015/08/18 DOTA
Python实现迭代时使用索引的方法示例
2018/06/05 Python
Python 3.x 判断 dict 是否包含某键值的实例讲解
2018/07/06 Python
Python模拟自动存取款机的查询、存取款、修改密码等操作
2018/09/02 Python
python3的print()函数的用法图文讲解
2019/07/16 Python
django 简单实现登录验证给你
2019/11/06 Python
解决pandas展示数据输出时列名不能对齐的问题
2019/11/18 Python
在python里创建一个任务(Task)实例
2020/04/25 Python
详细分析Python可变对象和不可变对象
2020/07/09 Python
聊聊python在linux下与windows下导入模块的区别说明
2021/03/03 Python
瑞士图书网站:Weltbild.ch
2019/09/17 全球购物
婚前保证书
2014/04/29 职场文书
2014年教育教学工作总结
2014/11/13 职场文书
上课讲话检讨书范文
2015/05/07 职场文书