自己做的一个点击选择的验证码

最近在开发一个社交网站，中间想找个验证码功能，网上找来找去，都是需要输入的，这样很烦啊。。好吧，无意间想起百度贴吧的验证码方式还不错，省的自己输入，只要弄个9宫格点击几下就好了，但网上没有资源啊，只能望洋兴叹。

以前更多专注于桌面程序的开发，对JS了解不多，最近正好，自己做个选择的验证码练练手，也学学JS的相关知识。有分享才有进步哈，就把这个小东西作为我入园的纪念吧。

首先这个验证码的基本逻辑是  随机取出一个成语/短语=》将这4个字的顺序打乱显示=》用户以正确的顺序单击这个四个字，这几个字将会显示在下面一行方框里，点错可以点击下面方框撤销=》四个字顺序正确则让button启用=否则依然为默认的禁用  如图

当点击“螳臂挡车”四个字，那么就会在下面显示出 点击的顺序 正确 右侧的按钮就可以使用 否则禁用。

此时右侧按钮即可使用。  点击下面的某一个字，即可清除这个方框，重新选择。

这里并没有对第一行方框进行图片化处理，需要的同学可以在园子里找找相关方法，我已经看到了许多不错的博客。

下面看看代码实现，这里主要是JS的相关知识。我因为以前没有接触过 带有浓烈的新手气息，谅解。

首先页面上要准备8个label

其实最好放在一个panel上，或者是div里面，用的时候跳出来应该更好吧。。。

然后给label添加 onclick 事件 

C#  aspx.cs页面里的代码如下：

 protected void Page_Load(object sender, EventArgs e)
    {
        //给label添加 onclick 事件
        Label1.Attributes.Add("onclick", "display1()");
        Label2.Attributes.Add("onclick", "display2()");
        Label3.Attributes.Add("onclick", "display3()");
        Label4.Attributes.Add("onclick", "display4()");

        Label5.Attributes.Add("onclick", "clearTex5()");
        Label6.Attributes.Add("onclick", "clearTex6()");
        Label7.Attributes.Add("onclick", "clearTex7()");
        Label8.Attributes.Add("onclick", "clearTex8()");
    }

下面是JS代码  页面加载部分

var arrySession;//用于存放随机取得的成语/短语  此时顺序尚未打乱
window.onload = function () {
    //定义一个数组 存放待验证的成语
    var _TheArray = new Array("螳臂挡车", "七手八脚", "八面玲珑", "五光十色", "七嘴八舌", "荣辱与共", "推心置腹","驾轻就熟", "相貌堂堂", "斗志昂扬", "口若悬河");
    var index = Math.floor((Math.random() * _TheArray.length));
    arrySession = _TheArray[index];
    //罗列4个字的排列顺序  这里我就不用算法了嘿嘿。如果你使用大于个字的验证，建议用算法将他们的组合罗列出来
    var arryInd = new Array("1324", "1423", "2341", "2134", "2413", "3124", "3241", "3142", "3412", "2143", "4123", "4213", "4231", "4312");
    var ind = Math.floor((Math.random() * arryInd.length));
    var putText = _TheArray[index].substr(parseInt(arryInd[ind].substr(0, 1)) - 1, 1);
    //将随机取得的4个字显示到label 这里注意 substring() 和substr() 的区别，不同于C#
    document.getElementById('Label1').innerText = _TheArray[index].substr(parseInt(arryInd[ind].substr(0, 1)) - 1, 1);
    document.getElementById('Label2').innerText = _TheArray[index].substr(parseInt(arryInd[ind].substr(1, 1)) - 1, 1);
    document.getElementById('Label3').innerText = _TheArray[index].substr(parseInt(arryInd[ind].substr(2, 1)) - 1, 1);
    document.getElementById('Label4').innerText = _TheArray[index].substr(parseInt(arryInd[ind].substr(3, 1)) - 1, 1);
}

到这里，第一行的4个字已经已随机的顺序显示出来了，而且一定没有正确的顺序。下面就是点击事件，获取对应点击的字然后显示在下面的label上。

function display1() {//第一个字
    for (var i = 5; i < 9; i++) {
        if (document.getElementById('Label' + i).innerText == "") {
            document.getElementById('Label' + i).innerText = document.getElementById("Label1").innerText; break;
        }
    }
   
    if (document.getElementById('Label5').innerText + document.getElementById('Label6').innerText + document.getElementById('Label7').innerText + document.getElementById('Label8').innerText == arrySession) {//4个字拼接在一起 和上面随机生成的成语/短语 一样 即为正确，通过验证，设置button可用。
         document.getElementById("Button1").removeAttribute("disabled");
     } 
}

这里就贴出第一个字的代码，因为后面3个都一样，不做重复。这时候，点击第一行的字，已可以显示到第二行上面。 那么如果我点击错了，怎么撤销呢?且往下看。

function clearTex5() {//撤销，即清空第二行被点击的字
    document.getElementById('Label5').innerText = "";
    document.getElementById("Button1").setAttribute("disabled","enable");
}

哈哈，只需要直接清空label的内容就可以了。到这里，验证码的基本功能就实现了。但是这里并没有“换一张”的功能，需要的同学，自己去拓展吧。下面说说几个注意点。

截取字符串，这里的方法和C#有点出入，在此废了不少时间

JS中substring有两个参数时，第一个参数表示从字符串的第几位开始截取，第二个参数表示截取到字符串的第几位。这点是个C#中字符截取不同的一点。

如：var str="lifeges";       str.substring(3,5); 结果是 "eg"  这里的“5”指的是源字符串里面的第5位，不是substr和C#中的共截取5位。

下面上源码 欢迎指导指正和交流

http://pan.baidu.com/s/1kTvGBCN