最近在开发一个社交网站,中间想找个验证码功能,网上找来找去,都是需要输入的,这样很烦啊。。好吧,无意间想起百度贴吧的验证码方式还不错,省的自己输入,只要弄个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