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 相关文章推荐
jQuery ajax 路由和过滤器使用说明
Aug 02 Javascript
ASP.NET jQuery 实例8 (动态添加内容到DropDownList)
Feb 03 Javascript
6款新颖的jQuery和CSS3进度条插件推荐
Mar 05 Javascript
jQuery快速上手:写jQuery与直接写JS的区别详细解析
Aug 26 Javascript
利用jQuery简单实现产品展示图片左右滚动功能(示例代码)
Jan 02 Javascript
jquery解析xml字符串简单示例
Apr 11 Javascript
javascript 定时器工作原理分析
Dec 03 Javascript
jQuery使用Layer弹出层插件闪退问题
Dec 22 Javascript
详解AngularJS脏检查机制及$timeout的妙用
Jun 19 Javascript
详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)
Nov 12 Javascript
JavaScript Math对象和调试程序的方法分析
May 13 Javascript
Layer+Echarts构建弹出层折线图的方法
Sep 25 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
浅析php工厂模式
2014/11/25 PHP
CI框架中类的自动加载问题分析
2016/11/21 PHP
PHP实现多图上传(结合uploadify插件)思路分析
2016/11/30 PHP
PHP 实现人民币小写转换成大写的方法及大小写转换函数
2017/11/17 PHP
jquery之Document元素选择器篇
2008/08/14 Javascript
通过下拉框的值来确定输入框是否可以为空的代码
2011/10/18 Javascript
Javascript实现多彩雪花从天降散落效果的方法
2015/02/02 Javascript
chrome不支持form.submit的解决方案
2015/04/28 Javascript
jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码
2015/08/24 Javascript
JS实现Fisheye效果动感放大菜单代码
2015/10/21 Javascript
JS实现获取键盘按下的按键并显示在页面上的方法
2015/11/04 Javascript
基于jPlayer三分屏的制作方法
2016/12/21 Javascript
详解Vue-基本标签和自定义控件
2017/03/24 Javascript
JS实现仿UC浏览器前进后退效果的实例代码
2017/07/17 Javascript
vue2导航根据路由传值,而改变导航内容的实例
2017/11/10 Javascript
详解vue静态资源打包中的坑与解决方案
2018/02/05 Javascript
代码详解JS操作剪贴板
2018/02/11 Javascript
JavaScript&quot;模拟事件&quot;的注意要点详解
2019/02/13 Javascript
webpack4 从零学习常用配置(小结)
2019/05/28 Javascript
react结合bootstrap实现评论功能
2020/05/30 Javascript
Python打包可执行文件的方法详解
2016/09/19 Python
python实现逻辑回归的方法示例
2017/05/02 Python
Python数据类型中的“冒号“[::]——分片与步长操作示例
2018/01/24 Python
python——全排列数的生成方式
2020/02/26 Python
Python object类中的特殊方法代码讲解
2020/03/06 Python
在Python中用GDAL实现矢量对栅格的切割实例
2020/03/11 Python
以色列的身体护理及家居香薰品牌:Sabon NYC
2018/02/23 全球购物
拉斯维加斯城市观光通行证:Las Vegas Pass
2019/05/21 全球购物
网络、C以及其他硬件方面的面试题
2016/08/23 面试题
最新党员思想汇报
2014/01/01 职场文书
电子信息工程专业推荐信
2014/02/14 职场文书
卫生标语大全
2014/06/21 职场文书
商务英语求职信范文
2015/03/19 职场文书
运动会宣传稿50字
2015/07/23 职场文书
三下乡活动心得体会
2016/01/23 职场文书
儿童诗两首教学反思
2016/02/23 职场文书