<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>
一.好了現(xiàn)在可以實(shí)現(xiàn)神奇的客戶端驗(yàn)證框架了,如下:
<input id="loginRealperson" type="text" />
<script language="javascript" type="text/javascript">
$(function(){
$("#loginRealPerson").realPerson(
{
length:6,//設(shè)定驗(yàn)證碼字符長(zhǎng)度
includerNumbers:true, //是否引入數(shù)字格式
regenerate:"點(diǎn)擊刷新驗(yàn)證碼!" //提示語(yǔ)
}
);
});
</script>
運(yùn)行你的html頁(yè)面,會(huì)出現(xiàn)驗(yàn)證碼。
加入需要在客戶端進(jìn)行比對(duì)驗(yàn)證碼,建議自己方法
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;
}
利用以上方法返回值與生成驗(yàn)證碼號(hào)碼——var generateNum = $(".realperson-hash").val();進(jìn)行比對(duì)。
頁(yè)面驗(yàn)證碼文本框內(nèi)容
var loginRealPerson = $("#loginRealperson").val();
作為參數(shù)傳遞到服務(wù)器端進(jìn)行比對(duì)
服務(wù)器端需要?jiǎng)?chuàng)造一個(gè)算法與loginRealPerson 進(jìn)行比對(duì)。
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 對(duì)IE6 不兼容,建議有在使用IE6的童鞋選擇其它方案。——IE6會(huì)將打印出來(lái)的“*”拉的很寬,超級(jí)難看的。除非你可以對(duì)realPerson框架進(jìn)行修改。)
希望對(duì)大家有幫助。
jquery real person 包見(jiàn)附件