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实现动画效果的方法
Jul 20 Javascript
jQuery中odd选择器的定义和用法
Dec 23 Javascript
jQuery的ajax下载blob文件
Jul 21 Javascript
BootStrap 动态添加验证项和取消验证项的实现方法
Sep 28 Javascript
js输入框使用正则表达式校验输入内容的实例
Feb 12 Javascript
ES6新特性三: Generator(生成器)函数详解
Apr 21 Javascript
使用Require.js封装原生js轮播图的实现代码
Jun 15 Javascript
解决ionic和angular上拉加载的问题
Aug 03 Javascript
使用p5.js临摹动态图片
Nov 04 Javascript
JS桶排序的简单理解与实现方法示例
Nov 25 Javascript
jQuery弹框插件使用方法详解
May 26 jQuery
解决Vue的项目使用Element ui 走马灯无法实现的问题
Aug 03 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+MySQL 手工注入语句大全 推荐
2009/10/30 PHP
PHP实现二维数组去重功能示例
2017/01/12 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
PHP数据对象映射模式实例分析
2019/03/29 PHP
jquery jqPlot API 中文使用教程(非常强大的图表工具)
2011/08/15 Javascript
js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍
2013/01/24 Javascript
JavaScript动态操作表格实例(添加,删除行,列及单元格)
2013/11/25 Javascript
js与jquery回车提交的方法
2015/02/03 Javascript
jquery.cookie实现的客户端购物车操作实例
2015/12/24 Javascript
JS实现Select的option上下移动的方法
2016/03/01 Javascript
关于JS 预解释的相关理解
2016/06/28 Javascript
JavaScript实现通过select标签跳转网页的方法
2016/09/29 Javascript
JavaScript实现二分查找实例代码
2017/02/22 Javascript
js实现鼠标跟随运动效果
2020/08/02 Javascript
create-react-app 修改为多入口编译的方法
2018/08/01 Javascript
jQuery控制input只能输入数字和两位小数的方法
2019/05/16 jQuery
JavaScript中reduce()的5个基本用法示例
2020/07/19 Javascript
vue + el-form 实现的多层循环表单验证
2020/11/25 Vue.js
python 数据清洗之数据合并、转换、过滤、排序
2017/02/12 Python
在python中利用GDAL对tif文件进行读写的方法
2018/11/29 Python
Python 数据库操作 SQLAlchemy的示例代码
2019/02/18 Python
selenium跳过webdriver检测并模拟登录淘宝
2019/06/12 Python
Python识别快递条形码及Tesseract-OCR使用详解
2019/07/15 Python
Django中URL的参数传递的实现
2019/08/04 Python
Pytho爬虫中Requests设置请求头Headers的方法
2020/09/22 Python
python模拟点击玩游戏的实例讲解
2020/11/26 Python
python+selenium自动化实战携带cookies模拟登陆微博
2021/01/19 Python
python 实现网易邮箱邮件阅读和删除的辅助小脚本
2021/03/01 Python
利用纯CSS3实现文字向右循环闪过效果实例(可用于移动端)
2017/06/15 HTML / CSS
使用phonegap进行提示操作的具体方法
2017/03/30 HTML / CSS
大学生就业求职信
2014/06/12 职场文书
2015年社区妇联工作总结
2015/04/21 职场文书
英语演讲开场白
2015/05/29 职场文书
学习焦裕禄观后感
2015/06/09 职场文书
导游词之无锡梅园
2019/11/28 职场文书
Nginx访问日志及错误日志参数说明
2021/03/31 Servers