jQuery Real Person驗證碼外掛程式防止表單自動提交

jQuery Real Person驗證碼外掛程式防止表單自動提交_jquery

WBOY

發布： 2016-05-16 15:33:27

原創

1302 人瀏覽過

本文介紹的jQuery外掛有點特殊，防自動提交表單的驗證工具，就是我們常用到的驗證碼工具，先給大家看看效果。

效果圖如下：

使用說明
需要使用jQuery庫檔案和Real Person庫檔案
同時需要自訂驗證碼顯示的CSS樣式

使用實例

1、包含文件部分

2、HTML部分

3、Javascript部分
$("#biuuu").realperson();
如上實例，就可以實作一個防自動提交表單的驗證碼工具，同時可指定驗證碼字元的長度，如下：
$("#biuuu").realperson({length: 5});

今天所講到的jQuery Real Person Plugin，就是一個完全由JavaScript編寫而成的jQuery驗證碼插件。

jQuery插件Real Person 點選可刷新實例解說

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="jquery.realperson.js"></script> 
<link href="jquery.realperson.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript"> 
  $(function(){ 
    $('#Gideon').realperson({length: 5}); 
  }) 
</script> 
</head> 
 
<body> 
 
<input type="text" id="Gideon" name="defaultReal"> 
</body> 
</html>

登入後複製

註：如果持續無法驗證成功的話，請嘗試下面的方法：

<&#63;php 
function rpHash($value) { 
  $hash = 5381; 
  $value = strtoupper($value); 
  for($i = 0; $i < strlen($value); $i++) { 
    $hash = (($hash << 5) + $hash) + ord(substr($value, $i)); 
  } 
  return $hash; 
} 
&#63;>

登入後複製

替換為：

<&#63; 
  function rpHash($value)  
  { 
    $hash = 5381; 
    $value = strtoupper($value); 
    for($i = 0; $i < strlen($value); $i++) $hash = (leftShift32($hash, 5) + $hash) + ord(substr($value, $i)); 
    return $hash;  
  } 
 
  function leftShift32($number, $steps)  
  { 
    $binary = decbin($number); 
    $binary = str_pad($binary, 32, "0", STR_PAD_LEFT); 
    $binary = $binary.str_repeat("0", $steps); 
    $binary = substr($binary, strlen($binary) - 32); 
    return ($binary{0} == "0" &#63; bindec($binary) : -(pow(2, 31) - bindec(substr($binary, 1))));  
  } 
&#63;>

登入後複製

以上就是為大家介紹了jQuery驗證碼插件Real Person的使用方法，小編整理的可能有些不全面，希望大家多多諒解。