小言_互联网的博客

JavaScript实现页面动态验证码

382人阅读  评论(0)

引言:

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

效果图:

 

实现思路:

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

编写构造函数

文本构造函数


  
  1. //文字的构造函数
  2. function Text(o){
  3. this.x= 0, //x坐标
  4. this.y= 0, //y坐标
  5. this.text= '', //内容
  6. this.font= null; //字体
  7. this.textAlign= null; //对齐方式
  8. this. init(o);
  9. }
  10. Text.prototype. init=function(o){
  11. for( var key in o){
  12. this[key]=o[key];
  13. }
  14. }
  15. Text.prototype.render=function(context){
  16. this.ctx=context;
  17. innerRender( this);
  18. function innerRender(obj){
  19. var ctx=obj.ctx;
  20. ctx.save()
  21. ctx.beginPath();
  22. ctx.translate(obj.x,obj.y);
  23. if(obj.font){
  24. ctx.font=obj.font;
  25. }
  26. if(obj.textAlign){
  27. ctx.textAlign=obj.textAlign;
  28. }
  29. if(obj.fill){ //是否填充
  30. obj.fillStyle?(ctx.fillStyle=obj.fillStyle): null;
  31. ctx.fillText(obj.text, 0, 0);
  32. }
  33. ctx.restore();
  34. }
  35. return this;
  36. }

线段构造函数


  
  1. //直线的构造
  2. function Line(ctx,o){
  3. this.x= 0, //x坐标
  4. this.y= 0, //y坐标
  5. this.startX= 0, //开始点x位置
  6. this.startY= 0, //开始点y位置
  7. this.endX= 0, //结束点x位置
  8. this.endY= 0; //结束点y位置
  9. this.thin= false; //设置变细系数
  10. this.ctx=ctx;
  11. this. init(o);
  12. }
  13. Line.prototype. init=function(o){
  14. for( var key in o){
  15. this[key]=o[key];
  16. }
  17. }
  18. Line.prototype.render=function(){
  19. innerRender( this);
  20. function innerRender(obj){
  21. var ctx=obj.ctx;
  22. ctx.save()
  23. ctx.beginPath();
  24. ctx.translate(obj.x,obj.y);
  25. if(obj.thin){
  26. ctx.translate( 0.5, 0.5);
  27. }
  28. if(obj.lineWidth){ //设定线宽
  29. ctx.lineWidth=obj.lineWidth;
  30. }
  31. if(obj.strokeStyle){
  32. ctx.strokeStyle=obj.strokeStyle;
  33. }
  34. //划线
  35. ctx.moveTo(obj.startX, obj.startY);
  36. ctx.lineTo(obj.endX, obj.endY);
  37. ctx.stroke();
  38. ctx.restore();
  39. }
  40. return this;
  41. }

按长度获取验证码


  
  1. //根据指定长度生成随机字母数字
  2. Verifiable.prototype.randomWord= function(range){
  3. var str = "",pos,
  4. 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'];
  5. for( var i= 0; i<range; i++){
  6. pos = Math.round( Math.random() * (arr.length -1));
  7. str += arr[pos];
  8. }
  9. return str;
  10. }

绘制文字


  
  1. //绘制文字
  2. Verifiable.prototype.drawText= function(){
  3. var that= this;
  4. var count = 4; //文字个数
  5. var textW = 40; //文字所占宽
  6. var code= this.code = this.randomWord(count);
  7. var codeArr = code.split( "");
  8. var text,x ;
  9. codeArr.forEach( function(c,i){
  10. x = that.w/count*i+textW/ 2;
  11. //绘制文字
  12. text = new Text({
  13. x:x,
  14. y:textW -10,
  15. text:c,
  16. font: '30px ans-serif',
  17. textAlign: 'center',
  18. fill: true,
  19. fillStyle: '#412D6A'
  20. });
  21. that.renderArr.push(text);
  22. })
  23. }

此时效果:

绘制干扰线


  
  1. //绘制干扰线
  2. Verifiable.prototype.interfering= function(){
  3. var count = this.lineCount=20,line,ctx=this.ctx;
  4. var startX,
  5. startY,
  6. endX,
  7. endY,
  8. color;
  9. for(var i=0;i<count;i++){
  10. //随机开始坐标,结束坐标、颜色
  11. startX = _.getRandom(0,140);
  12. startY = _.getRandom(0,40);
  13. endX = _.getRandom(0,140);
  14. endY = _.getRandom(0,40);
  15. color = _.getRandomColor();
  16. //定义一条直线
  17. line = new Line(ctx,{
  18. x: 0,
  19. y: 0,
  20. startX: startX,
  21. startY: startY,
  22. endX: endX,
  23. endY: endY,
  24. strokeStyle: color
  25. })
  26. this.renderArr.push(line);
  27. }
  28. }

此时效果如下:

加入页面布局


  
  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>verifiable </title>
  6. <style>
  7. #box{
  8. width: 140px;
  9. height: 40px;
  10. position:absolute;
  11. }
  12. #inputDiv{
  13. width: 220px;
  14. position:absolute;
  15. margin: 0 auto;
  16. left: 0;
  17. top: 30px;
  18. right: 0;
  19. bottom: 0;
  20. }
  21. #container{
  22. width: 220px;
  23. height: 60px;
  24. position:absolute;
  25. margin: 0 auto;
  26. left: 0;
  27. top: 60px;
  28. right: 0;
  29. bottom: 0;
  30. }
  31. .refresh{
  32. position:absolute;
  33. left: 140px;
  34. }
  35. </style>
  36. </head>
  37. <body>
  38. <div id='inputDiv'>
  39. 验证码: <input size=10 id='codeInput'> <img id='stateImg' style="vertical-align: middle;width:20px"> </img>
  40. </div>
  41. <div id="container">
  42. <div id='box'> </div>
  43. <a href="javascript:void 0" class="refresh" onclick="refresh()">换一张 </a>
  44. </div>
  45. </body>
  46. <script type="text/javascript" src='verifiable.js'> </script>
  47. <script type="text/javascript">
  48. var box = document.getElementById( 'box');
  49. var stateImg = document.getElementById( 'stateImg');
  50. var codeInput = document.getElementById( 'codeInput');
  51. verifiable.init(box,codeInput,stateImg);
  52. //换一张
  53. function refresh(){
  54. verifiable.renderArr.length= 0;
  55. verifiable.draw();
  56. }
  57. </script>
  58. </html>

加入输入框事件


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

加入成功、失败验证


  
  1. //处理结果
  2. Verifiable.prototype.result=function(result){
  3. var codeInput = this.codeInput;
  4. var stateImg = this.stateImg;
  5. if(result== 0){ //成功
  6. stateImg.src= "./images/suc.jpeg";
  7. codeInput.readOnly= true;
  8. } else { //失败
  9. codeInput.readOnly= false;
  10. stateImg.src= "./images/fail.jpeg";
  11. this.renderArr.length= 0;
  12. this.draw();
  13. }
  14. }

完成

 

给个三连吧兄弟们!

源码下载

方式1:完整代码下载

方式2:关注下方公众号,回复 【111】 下载代码

 


转载:https://blog.csdn.net/dkm123456/article/details/114990229
查看评论
* 以上用户言论只代表其个人观点,不代表本网站的观点或立场