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


Posted in Javascript onNovember 06, 2015

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所示。

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

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

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

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

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

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

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

看到这些各具特色而且功能强大的验证界面,我们能否自己也来实现呢?答案是肯定的。下面,通过循序渐进的讲解,对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所示。

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

第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 ? 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个字符的字母验证码,汉字验证码更具有安全性。因此,通过对验证码安全的研究,可以更加领略到中华文化的博大精深,原来密码验证也可以这样玩!

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

Javascript 相关文章推荐
JavaScript 页面坐标相关知识整理
Jan 09 Javascript
通过继承IHttpHandle实现JS插件的组织与管理
Jul 13 Javascript
jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
Oct 06 Javascript
怎么判断js脚本加载完成
Feb 28 Javascript
动态加载js、css的实例代码
May 26 Javascript
特殊日期提示功能的实现方法
Jun 16 Javascript
Node.js获取前端ajax提交的request信息
Feb 20 Javascript
JS传播事件、取消事件默认行为、阻止事件传播详解
Aug 14 Javascript
JavaScript生成简单等差数列
Nov 28 Javascript
VueJs监听window.resize方法示例
Jan 17 Javascript
微信小程序实现YDUI的ScrollTab组件
Feb 02 Javascript
vue 集成 vis-network 实现网络拓扑图的方法
Aug 07 Javascript
jQuery Real Person验证码插件防止表单自动提交
Nov 06 #Javascript
jQuery实现非常实用漂亮的select下拉菜单选择效果
Nov 06 #Javascript
javascript如何实现暂停功能
Nov 06 #Javascript
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
Nov 06 #Javascript
jQuery实现可关闭固定于底(顶)部的工具条菜单效果
Nov 06 #Javascript
JS实现的自定义网页拖动类
Nov 06 #Javascript
js基础知识(公有方法、私有方法、特权方法)
Nov 06 #Javascript
You might like
Phpbean路由转发的php代码
2008/01/10 PHP
phpstorm编辑器乱码问题解决
2014/12/01 PHP
PHP设计模式之工厂模式实例总结
2017/09/01 PHP
PHP常用header头定义代码示例汇总
2020/08/29 PHP
js左侧三级菜单导航实例代码
2013/09/13 Javascript
使用js的replace()方法查找字符示例代码
2013/10/28 Javascript
JS正则表达式获取分组内容的方法详解
2013/11/15 Javascript
js动态添加删除,后台取数据(示例代码)
2013/11/25 Javascript
Javascript核心读书有感之表达式和运算符
2015/02/11 Javascript
js实现tab切换效果实例
2015/09/16 Javascript
jQuery select自动选中功能实现方法分析
2016/11/28 Javascript
js 获取今天以及过去日期
2017/04/11 Javascript
使用重写url机制实现验证码换一张功能
2017/08/01 Javascript
纯javascript前端实现base64图片下载(兼容IE10+)
2018/09/14 Javascript
Vue v-for循环之@click点击事件获取元素示例
2019/11/09 Javascript
vue如何在项目中调用腾讯云的滑动验证码
2020/07/15 Javascript
github配置使用指南
2014/11/18 Python
Django中处理出错页面的方法
2015/07/15 Python
python3+PyQt5图形项的自定义和交互 python3实现page Designer应用程序
2020/07/20 Python
Selenium chrome配置代理Python版的方法
2018/11/29 Python
Django框架搭建的简易图书信息网站案例
2019/05/25 Python
python实现按行分割文件
2019/07/22 Python
Pandas DataFrame中的tuple元素遍历的实现
2019/10/23 Python
Python request操作步骤及代码实例
2020/04/13 Python
Keras 数据增强ImageDataGenerator多输入多输出实例
2020/07/03 Python
Bonami斯洛伐克:购买家具和家居饰品
2019/07/02 全球购物
声明struct x1 { . . . }; 和typedef struct { . . . }x2;有什么不同
2012/06/02 面试题
成人大专生实习期的自我评价
2013/10/02 职场文书
数控专业个人求职信范例
2013/11/29 职场文书
大学校园毕业自我鉴定
2014/01/15 职场文书
房产转让协议书
2014/04/11 职场文书
作风年建设汇报材料
2014/08/14 职场文书
领导班子奢靡之风查摆问题及整改措施
2014/09/27 职场文书
招标保密承诺书
2015/01/20 职场文书
2016年安全生产先进个人事迹材料
2016/02/29 职场文书
经典哲理警句:志不真则心不热,心不热则功不贤
2019/11/14 职场文书