jQuery插件实现静态HTML验证码校验_jquery-js教程-PHP中文网

jQuery插件实现静态HTML验证码校验_jquery

WBOY

发布： 2016-05-16 15:33:25

原创

1724 人浏览过

jQuery由美国人John Resig创建，它是一个快速、简洁的JavaScript库，提供了很多遍历函数，如each(fn)。jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。正是这些操作上的特点，用户可以方便地处理HTML文档、事件、实现动画效果，并且方便地为网站提供交互。如今，jQuery已经吸引了来自世界各地的众多JavaScript高手加入。

这里所要讲到的jQuery Real Person Plugin，就是一个完全由JavaScript编写而成的jQuery验证码插件。

jQuery Real Person Plugin主要实现了字母和字母数字混合两种验证方式，可以有效地防止自动提交表单。其外观展示提供了定制功能，默认是6位字母，如图1所示。

根据需要，也可以定制8位长度的验证码，如图2所示。

或者是字母数字混合式的验证码，如图3所示。

此外，用户也可以对底部的文字进行定制，如图4所示。

看到这些各具特色而且功能强大的验证界面，我们能否自己也来实现呢？答案是肯定的。下面，通过循序渐进的讲解，对jQuery Real Person Plugin的验证过程进行分析。
第1步，使用这个验证功能之前，引入JavaScript、CSS文件。

<script type="text/JavaScript" src="Scripts/jquery-1.3.2.js"></script>
<script type="text/JavaScript" src="Scripts/jquery.realperson.js"></script>
<style type="text/css">@import "Styles/jquery.realperson.css";</style>

登录后复制

在上面的代码中，第1行引入jQuery类库，可以到官方网站载最新jQuery类库。第2行引入验证码插件类库jquery.realperson.js。第3行引入验证码样式文件jquery.realperson.css。网站界面如图5所示。

第2步，页面中放入文本框元素，也就是HTML部分。

<table>
<tr>
<td><input type="text" id="txtValidate" name="defaultReal"></td>
</tr>
<tr>
<td><asp:Button ID="btnSubmit" runat="server" Text="登录" /></td>
</tr>
</table>

登录后复制

在上面的代码中，第1行使用两行一列进行布局，一行用于存放文本框，一行用于存放登录按钮。第3行定义id=”txtValidate”的文本框，用于输入验证码。第6行定义id=”btnSubmit”的提交按钮，用于触发后台事件，从而登录系统。
第3步，页面初始化时，调用验证码插件，以便于初始化验证码显示。

<script>
$(document).ready(function () {
$("#txtValidate").realperson({ length: 5 });
}
);
</script>

登录后复制

在上面的代码中，第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 &#63; 36 : 26)));
}
 var html = '<div class="realperson-challenge"><div class="realperson-text">';
 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 += '</div><div class="realperson-regen">' + inst.settings.regenerate +
'</div></div><input type="hidden" class="realperson-hash" name="' +
inst.settings.hashName.replace(/\{n\}/, target.attr('name')) +
'" value="' + this._hash(text) + '">';
return html;

登录后复制

在上面的代码中，第7～9行用于生成验证码随机字符。第12～22行用于把背景字符和随机字符组装成HTML代码，输出到浏览器。

通过上述剖析，可以看到，验证码对于密码安全具有十分重要的作用。联想到银行账户的安全问题，比如黑客通过其他途径获得了银行账户，然后打开其网上银行的登录界面。使用浏览器中查看源代码的方式，分析登录界面HTML代码，发现页面中没有验证码，也没有其他的安全设置，只使用了HTTP协议；黑客窃喜，于是就可以使用程序来模拟浏览器向银行服务器提交账户和密码。密码一般是6位的阿拉伯数字，正确密码的可能性就是10的6次方，也就是100万次。黑客会找一台高性能、高带宽的电脑，运行套取银行密码程序，假设这台电脑1秒钟能测试10个密码，10万秒钟（也就是27小时，一天左右）的时间就可以把所有的密码运行一遍，实际上黑客用不了那么长时间就已经窃取到了密码，银行帐号的钱也就会被转走。也就是说，若没有验证码，黑客使用套取银行密码程序，在一天左右的时间就能轻而易举地获得非法收入。

在实际应用中，汉字验证码也是比较常见的验证码，它的原理是：从一个汉字集合中随机抽选出几个汉字，生成图片以HTTP输出流到页面。如果客户端输入正确的汉字，则可以继续操作，否则禁制登录。中国上下五千年，文化博大精深，汉字数量达9万多，相对只有10个位数的数字验证码和26个字符的字母验证码，汉字验证码更具有安全性。因此，通过对验证码安全的研究，可以更加领略到中华文化的博大精深，原来密码验证也可以这样玩！

以上就是本文的全部内容，希望对大家的学习有所帮助。