这里所要讲到的jquery real person plugin,就是一个完全由javascript编写而成的jquery验证码插件。
jquery real person plugin主要实现了字母和字母数字混合两种验证方式,可以有效地防止自动提交表单。其外观展示提供了定制功能,默认是6位字母,如图1所示。
根据需要,也可以定制8位长度的验证码,如图2所示。
或者是字母数字混合式的验证码,如图3所示。
此外,用户也可以对底部的文字进行定制,如图4所示。
看到这些各具特色而且功能强大的验证界面,我们能否自己也来实现呢?答案是肯定的。下面,通过循序渐进的讲解,对jquery real person plugin的验证过程进行分析。
第1步,使用这个验证功能之前,引入javascript、css文件。
在上面的代码中,第1行引入jquery类库,可以到官方网站载最新jquery类库。第2行引入验证码插件类库jquery.realperson.js。第3行引入验证码样式文件jquery.realperson.css。网站界面如图5所示。
第2步,页面中放入文本框元素,也就是html部分。
在上面的代码中,第1行使用两行一列进行布局,一行用于存放文本框,一行用于存放登录按钮。第3行定义id=”txtvalidate”的文本框,用于输入验证码。第6行定义id=”btnsubmit”的提交按钮,用于触发后台事件,从而登录系统。
第3步,页面初始化时,调用验证码插件,以便于初始化验证码显示。
在上面的代码中,第2行为页面加载时所进行的操作,相当于页面的onload事件。第3行调用验证码控件的接口,用于显示验证码。
第4步,核心代码分析。
/* 核心代码@param target (jquery) the input field@param inst (object) the current instance settings@return (string) the additional content */_generatehtml: function(target, inst) {var text = '';for (var i = 0; i < inst.settings.length; i++) {text += chars.charat(math.floor(math.random() *(inst.settings.includenumbers ? 36 : 26)));} var html = ''; for (var i = 0; i < dots[0].length; i++) { for (var j = 0; j < text.length; j++) { html += dots[chars.indexof(text.charat(j))][i] + ' ';}html += '\n';}html += '
' + inst.settings.regenerate +'
';return html;
在上面的代码中,第7~9行用于生成验证码随机字符。第12~22行用于把背景字符和随机字符组装成html代码,输出到浏览器。
通过上述剖析,可以看到,验证码对于密码安全具有十分重要的作用。联想到银行账户的安全问题,比如黑客通过其他途径获得了银行账户,然后打开其网上银行的登录界面。使用浏览器中查看源代码的方式,分析登录界面html代码,发现页面中没有验证码,也没有其他的安全设置,只使用了http协议;黑客窃喜,于是就可以使用程序来模拟浏览器向银行服务器提交账户和密码。密码一般是6位的阿拉伯数字,正确密码的可能性就是10的6次方,也就是100万次。黑客会找一台高性能、高带宽的电脑,运行套取银行密码程序,假设这台电脑1秒钟能测试10个密码,10万秒钟(也就是27小时,一天左右)的时间就可以把所有的密码运行一遍,实际上黑客用不了那么长时间就已经窃取到了密码,银行帐号的钱也就会被转走。也就是说,若没有验证码,黑客使用套取银行密码程序,在一天左右的时间就能轻而易举地获得非法收入。
在实际应用中,汉字验证码也是比较常见的验证码,它的原理是:从一个汉字集合中随机抽选出几个汉字,生成图片以http输出流到页面。如果客户端输入正确的汉字,则可以继续操作,否则禁制登录。中国上下五千年,文化博大精深,汉字数量达9万多,相对只有10个位数的数字验证码和26个字符的字母验证码,汉字验证码更具有安全性。因此,通过对验证码安全的研究,可以更加领略到中华文化的博大精深,原来密码验证也可以这样玩!
以上就是本文的全部内容,希望对大家的学习有所帮助。