JavaScript实现页面动态验证码的实现示例

现在很多在用户登陆或注册的时候为了防止程序攻击,加入了动态验证的技术,一般是让用户输入随即生成的验证码来实现。我自己写了一个没有跟后台交互的,就在前端验证,发出来给大家看看。

Posted in Javascript onMarch 23, 2021

效果图:

JavaScript实现页面动态验证码的实现示例

 实现思路:

  • 把数字和字母放到一个数组中,通过随机的方式取得数组下标,总共取4个组成验证码;
  • 把验证码渲染出来(一个一个的渲染);
  • 绘制一定数量的干扰线,随机颜色;
  • 输入验证码,输入4位以后去验证,正确显示钩,错误显示叉并且刷新验证码。

编写构造函数

文本构造函数

//文字的构造函数
    function Text(o){
        this.x=0,//x坐标
        this.y=0,//y坐标
        this.text='',//内容
        this.font=null;//字体
        this.textAlign=null;//对齐方式
         
        this.init(o);
    }
     
    Text.prototype.init=function(o){
        for(var key in o){
            this[key]=o[key];
        }
    }
    Text.prototype.render=function(context){
        this.ctx=context;
        innerRender(this);
             
        function innerRender(obj){
            var ctx=obj.ctx;
            ctx.save()
            ctx.beginPath();
            ctx.translate(obj.x,obj.y);
             
            if(obj.font){
                ctx.font=obj.font;
            }
            if(obj.textAlign){
                ctx.textAlign=obj.textAlign;
            }
            if(obj.fill){//是否填充
                obj.fillStyle?(ctx.fillStyle=obj.fillStyle):null;
                ctx.fillText(obj.text,0,0);
            }
            ctx.restore();
        }
        return this;
    }

线段构造函数

//直线的构造
function Line(ctx,o){
    this.x=0,//x坐标
    this.y=0,//y坐标
    this.startX=0,//开始点x位置
    this.startY=0, //开始点y位置
    this.endX=0,//结束点x位置
    this.endY=0;//结束点y位置
    this.thin=false;//设置变细系数
    this.ctx=ctx;
     
    this.init(o);
}
Line.prototype.init=function(o){
    for(var key in o){
        this[key]=o[key];
    }
}
Line.prototype.render=function(){
    innerRender(this);
     
    function innerRender(obj){
        var ctx=obj.ctx;
        ctx.save()
        ctx.beginPath();
        ctx.translate(obj.x,obj.y);
        if(obj.thin){
            ctx.translate(0.5,0.5);
        }
        if(obj.lineWidth){//设定线宽
            ctx.lineWidth=obj.lineWidth;
        }
        if(obj.strokeStyle){
            ctx.strokeStyle=obj.strokeStyle;
        }
        //划线
        ctx.moveTo(obj.startX, obj.startY);
        ctx.lineTo(obj.endX, obj.endY);
        ctx.stroke();
        ctx.restore();
    }
     
    return this;
}

按长度获取验证码

//根据指定长度生成随机字母数字
Verifiable.prototype.randomWord=function(range){
 var str = "",pos,
   arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
 for(var i=0; i<range; i++){
  pos = Math.round(Math.random() * (arr.length-1));
  str += arr[pos];
 }
 return str;
}

绘制文字

//绘制文字
Verifiable.prototype.drawText=function(){
    var that=this;
    var count = 4;//文字个数
    var textW = 40;//文字所占宽
    var code=this.code = this.randomWord(count);
    var codeArr = code.split("");
    var text,x ;
    codeArr.forEach(function(c,i){
        x = that.w/count*i+textW/2;
        //绘制文字
        text = new Text({
            x:x,
            y:textW-10,
            text:c,
            font:'30px ans-serif',
            textAlign:'center',
            fill:true,
            fillStyle:'#412D6A'
        });
        that.renderArr.push(text);
    })      
}

此时效果:

JavaScript实现页面动态验证码的实现示例

绘制干扰线

//绘制干扰线
    Verifiable.prototype.interfering=function(){
        var count = this.lineCount=20,line,ctx=this.ctx;
        var startX,
            startY,
            endX,
            endY,
            color;
             
        for(var i=0;i<count;i++){
            //随机开始坐标,结束坐标、颜色
            startX = _.getRandom(0,140);
            startY = _.getRandom(0,40);
            endX = _.getRandom(0,140);
            endY = _.getRandom(0,40);
            color = _.getRandomColor();
            //定义一条直线
            line = new Line(ctx,{
                x:0,
                y:0,
                startX:startX,
                startY:startY,
                endX:endX,
                endY:endY,
                strokeStyle:color
            })
             
            this.renderArr.push(line);
        }
    }

此时效果如下:

JavaScript实现页面动态验证码的实现示例

加入页面布局

<!DOCTYPE html>
<html lang="zh">
  
<head>
  <meta charset="UTF-8">
  <title>verifiable</title>
  <style>
   #box{
        width:140px;
        height:40px;
        position:absolute;
         
    }
    #inputDiv{
        width:220px;
        position:absolute;
        margin:0 auto;
        left:0;
        top:30px;
        right:0;
        bottom:0;
    }
    #container{
        width:220px;
        height:60px;
        position:absolute;
        margin:0 auto;
        left:0;
        top:60px;
        right:0;
        bottom:0;
    }
    .refresh{
        position:absolute;
        left:140px;
    }
  </style>
</head>
  
<body>
    <div id='inputDiv'>
    验证码:<input size=10 id='codeInput'><img id='stateImg' style="vertical-align: middle;width:20px"></img>
  </div>
  <div id="container">
    <div id='box'></div>
    <a href="javascript:void 0" class="refresh" onclick="refresh()">换一张</a>
  </div>
</body>
    <script type="text/javascript" src='verifiable.js'></script>
  <script type="text/javascript">
    var box = document.getElementById('box');
    var stateImg = document.getElementById('stateImg');
    var codeInput = document.getElementById('codeInput');
     
    verifiable.init(box,codeInput,stateImg);
     
    //换一张
    function refresh(){
        verifiable.renderArr.length=0;
        verifiable.draw();
    }
  </script>
</html>

加入输入框事件

//输入框事件
Verifiable.prototype.inputValid=function(input){
    var val = input.value;
    if(val.length<4) return ;
     
    if(this.code==val){
        console.log('suc');
        this.result(0);
    }else{
        this.result(1);
    }
}

加入成功、失败验证

//处理结果
    Verifiable.prototype.result=function(result){
        var codeInput = this.codeInput;
        var stateImg = this.stateImg;
        if(result==0){//成功
            stateImg.src="./images/suc.jpeg";
            codeInput.readOnly=true;
        }else {//失败
            codeInput.readOnly=false;
            stateImg.src="./images/fail.jpeg";
            this.renderArr.length=0;
            this.draw();
        }
    }

完成

JavaScript实现页面动态验证码的实现示例

 

 

Javascript 相关文章推荐
JS Jquery 遍历,筛选页面元素 自动完成(实现代码)
Jul 08 Javascript
判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解
Nov 07 Javascript
js+css实现的简单易用兼容好的分页
Dec 30 Javascript
js获取通过ajax返回的map型的JSONArray的方法
Jan 09 Javascript
javascript图片滑动效果实现
Jan 28 Javascript
JavaScript模块化开发之SeaJS
Dec 13 Javascript
JavaScript中三种异步上传文件方式
Mar 06 Javascript
JavaScript图片处理与合成总结
Mar 04 Javascript
微信小程序实现留言功能
Oct 31 Javascript
js 解析 JSON 数据简单示例
Apr 21 Javascript
vue动画—通过钩子函数实现半场动画操作
Aug 09 Javascript
原生js实现点击按钮复制内容到剪切板
Nov 19 Javascript
使用Vue.js和MJML创建响应式电子邮件
JS原生实现轮播图的几种方法
几款主流好用的富文本编辑器(所见即所得常用编辑器)介绍
vue+flask实现视频合成功能(拖拽上传)
Mar 04 #Vue.js
React服务端渲染原理解析与实践
Mar 04 #Javascript
vue打开新窗口并实现传参的图文实例
Mar 04 #Vue.js
Vue-router编程式导航的两种实现代码
Mar 04 #Vue.js
You might like
第五节--克隆
2006/11/16 PHP
刚才在简化php的库,结果发现很多东西
2006/12/31 PHP
PHP中将数组转成XML格式的实现代码
2011/08/08 PHP
php后台如何避免用户直接进入方法实例
2013/10/15 PHP
CI框架(CodeIgniter)实现的数据库增删改查操作总结
2018/05/23 PHP
PHP简单验证码功能机制实例详解
2019/03/27 PHP
javascript支持firefox,ie7页面布局拖拽效果代码
2007/12/20 Javascript
js null,undefined,字符串小结
2010/08/21 Javascript
jQuery学习笔记 更改jQuery对象
2012/09/19 Javascript
JavaScript实现自己的DOM选择器原理及代码
2013/03/04 Javascript
文本框只能选择数据到文本框禁止手动输入
2013/11/22 Javascript
用js闭包的方法实现多点标注冒泡示例
2014/05/29 Javascript
jQuery简单实现日历的方法
2015/05/04 Javascript
JS实现的竖向折叠菜单代码
2015/10/21 Javascript
初步了解javascript面向对象
2015/11/09 Javascript
JS中如何实现复选框全选功能
2016/12/19 Javascript
JS操作xml对象转换为Json对象示例
2017/03/25 Javascript
Nodejs调用WebService的示例代码
2017/09/29 NodeJs
nodejs 简单实现动态html的方法
2018/05/12 NodeJs
在React项目中使用Eslint代码检查工具及常见问题
2018/10/10 Javascript
javascript中关于类型判断的一些疑惑小结
2018/10/14 Javascript
vue draggable resizable gorkys与v-chart使用与总结
2019/09/05 Javascript
vue excel上传预览和table内容下载到excel文件中
2019/12/10 Javascript
Vue路由守卫及页面登录权限控制的设置方法(两种)
2020/03/31 Javascript
Python基础教程之正则表达式基本语法以及re模块
2016/03/25 Python
windows上安装Anaconda和python的教程详解
2017/03/28 Python
python实现决策树分类算法
2017/12/21 Python
python实现屏保计时器的示例代码
2018/08/08 Python
利用python读取YUV文件 转RGB 8bit/10bit通用
2019/12/09 Python
利用css3画个同心圆示例代码
2017/07/03 HTML / CSS
美体小铺英国官网:The Body Shop英国
2017/01/24 全球购物
物理教师自荐信范文
2013/12/28 职场文书
安全责任书范文
2014/03/12 职场文书
2014年会策划方案
2014/05/11 职场文书
政审证明材料
2015/06/19 职场文书
MySQL主从切换的超详细步骤
2022/06/28 MySQL