<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 包見附件