客户端验证码框架——jquery real person 。
首先需要在先官网站里找到realPerson 框架的jquery库。<script language="javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="jquery-1.4.1.min.js"></script> <link href="jquery.realperson.css" type="text/css" rel="Stylesheet" /> <script language="javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="jquery.realperson.js"></script>一.好了现在可以实现神奇的客户端验证框架了,如下:<input id="loginRealperson" type="text" /><script language="javascript" type="text/javascript">$(function(){$("#loginRealPerson").realPerson( { length:6,//设定验证码字符长度 includerNumbers:true, //是否引入数字格式 regenerate:"点击刷新验证码!" //提示语 });});</script>运行你的html页面,会出现验证码。加入需要在客户端进行比对验证码,建议自己方法jQuery.getHashNumber=function(value){var hash = 5381;value=value.toUpperCase();for (var i = 0; i < value.length; i++) {hash = ((hash << 5) + hash) + value.charCodeAt(i);}return hash;}利用以上方法返回值与生成验证码号码——var generateNum = $(".realperson-hash").val();进行比对。二.如果想提交到服务器端则需要将页面验证码文本框内容var loginRealPerson = $("#loginRealperson").val();作为参数传递到服务器端进行比对服务器端需要创造一个算法与loginRealPerson 进行比对。private String rpHash(String value) {int hash = 5381;value = value.toUpperCase();for(int i = 0; i < value.length(); i++) {hash = ((hash << 5) + hash) + value.charAt(i);}return String.valueOf(hash);}(注意:jquery real person 对IE6 不兼容,建议有在使用IE6的童鞋选择其它方案。——IE6会将打印出来的“*”拉的很宽,超级难看的。除非你可以对realPerson框架进行修改。)
希望对大家有帮助。
jquery real person 包见附件
共同学习,写下你的评论
评论加载中...
作者其他优质文章