JavaScript编写带旋转+线条干扰的验证码脚本实例

基础版

从我们平时上网的经验来看,验证码一般是四位,由数字和字母组成。
那么接下来楼主将带领大家一步步用Javascript做出一个验证码脚本!
先给出成品，方便大家理解：

  
   
    #securityCode{
      background-color: #008000;
      width:70px;
      height:30px;
      font-family: '楷体', serif;
      font-size: 20px;
      color:white;
    }
  
  
    


   

   
   看不清楚

   

1.既然是四位验证码,我们的思路就要打开一些了,首先我们需要一个数组来储存字母和数字。

 var code=new Array(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');

2.然后我们需要让它随机显示数组中的元素，这里我们建立一个codeNumber变量来随机显示的数字,但我们需要的是四位验证码，而现在数组中的元素都是单个的，怎么办呢？简单！我们再建立一个securityCode变量来储存数组中的元素不就得了。代码如下：

 var codeNumber;
      securityCode="";//全局变量,方便后续验证
      for(var i=0;i<4;i++){
 codeNumber=Math.floor(Math.random()*36);
 securityCode+=code[codeNumber];
      }

可以看出此时securityNumber变量储存的就是一个四位随机验证码
3.好了，经过简单的两步，我们就得到了四位验证码。我们将它放在一个createCode函数中。

function createCode(){
      var code=new Array(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');
      var codeNumber;
      securityCode="";//全局变量,方便后续验证
      for(var i=0;i<4;i++){
 codeNumber=Math.floor(Math.random()*36);
 securityCode+=code[codeNumber];
      }
      document.getElementById("securityCode").value=securityCode;
    }

4.接下来我们创建一个验证机制：

 function verify(){
      var enterCode=document.getElementById("enterCode").value;
      if(enterCode.toUpperCase()==securityCode){
 alert("输入正确,通过验证!");
      }
      else{
 enterCode.value="";
 createCode();
      }
    }

5.小小修饰下验证码：

 
    #securityCode{
      background-color: #008000;
      width:70px;
      height:30px;
      font-family: '楷体', serif;
      font-size: 20px;
      color:white;
    }
  

进阶：进一步阻止机器人的高级技巧
接触的大部分项目中，验证码一直都是后台干的事，这两天正好有一个页面需要验证码，第时间想着后台实现，但突然转念一想大部分项目貌似对安全性要求不是很高，又要求有点阻止机器人的技巧，于是就用前端写了一个验证码。并利用CSS3的transform属性里的rotate设置旋转，再随机弄点干扰线，最后为了在所有DOM节点的上边加一层opacity=0的DIV，一个前端验证码就出来了。

vCode代码：

(function(){
  var randstr = function(length){
    var key = {
 
      str : [
 'a','b','c','d','e','f','g','h','i','j','k','l','m',
 'o','p','q','r','s','t','x','u','v','y','z','w','n',
 '0','1','2','3','4','5','6','7','8','9'
      ],
 
      randint : function(n,m){
 var c = m-n+1;
 var num = Math.random() * c + n;
 return Math.floor(num);
      },
 
      randStr : function(){
 var _this = this;
 var leng = _this.str.length - 1;
 var randkey = _this.randint(0, leng);
 return _this.str[randkey];
      },
 
      create : function(len){
 var _this = this;
 var l = len || 10;
 var str = '';
 
 for(var i = 0 ; i

用法：

//container 为 验证码的DOM节点
var code = new vCode(container);
 
// 验证是否正确
// inputCode为用户输入的验证码
code.verify(inputCode); // return true or false