<script language="javascript" src="jquery-1.4.1.min.js"></script>
<link href="jquery.realperson.css" type="text/css" rel="Stylesheet" />
<script language="javascript" src="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 包见附件