使用php和jQuery驗證驗證碼和聯繫表格

Question

我是jQuery的新手。

我有一個帶有驗證碼驗證的html聯繫表單。

表單使用jQuery來驗證名稱，電子郵件地址和消息。

但我在集成captch驗證時遇到了問題。

的驗證碼是使用以下代碼來生成（由verifyimage.php）：

<?php 
session_start(); 
error_reporting(0); 
if(!function_exists("imagecreatefrompng")) 
{ 
    exit("You need to recompile with the GD library included in PHP for this feature to be able to function"); 
} 
$alphanum = "ABCDEFGHIJKLMNPQRSTUVWXYZ123456789"; 
$rand = substr(str_shuffle($alphanum), 0, 6); 
$image = imagecreatefrompng("../images/verify.png"); 
$textColor = imagecolorallocate($image, 150, 150, 150); 
imagestring($image, 5, 14, 22, $rand, $textColor); 
$_SESSION['image_random_value'] = md5($rand); 
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); 
header("Last-Modified: ".gmdate("D, d M Y H:i:s")." GMT"); 
header("Cache-Control: no-store, no-cache, must-revalidate"); 
header("Cache-Control: post-check=0, pre-check=0", false); 
header("Pragma: no-cache"); 
header("Content-type: image/png"); 
imagepng($image); 
imagedestroy($image); 
?> 

爲形式的HTML如下：

<!-- Contact Form --> 
<div id="contactForm"> 
     <form action="/contact.php" method="post"> 
     <div class="oneThird"> 
      <div class="row"> 
       <label for="contactName">Full Name</label> 
       <input id="contactName" name="contactName" type="text" /> 
      </div> 
      <div class="row topMargin"> 
       <label for="contactEmail">Email Address</label> 
       <input id="contactEmail" name="contactEmail" type="text" /> 
      </div> 
         <div class="row topMargin"> 
       <label for="contactVerify">Captcha</label> 
       <input style="background-image: url(/php/verifyimage.php);" id="contactVerify" name="contactVerify" type="text" /> 
      </div> 
        </div> 
     <div class="twoThird lastColumn"> 
      <div class="row"> 
       <label for="contactMessage">Message</label> 
       <textarea id="contactMessage" name="contactMessage" cols="10" rows="9"></textarea> 
      </div> 
     </div> 
     <div class="clearfix"> 
     </div> 
     <button type="submit" class="colorButton">Send Message</button> 
    </form> 
    </div> 

而jQuery包含有關驗證以下代碼表格名稱，電子郵件和消息部分：

// Contact 
    if ($('#contactForm').length != 0) 
    { 
     var labelName = $('#contactForm label[for="contactName"]').text(); 
     var labelEmail = $('#contactForm label[for="contactEmail"]').text(); 
     var labelMessage = $('#contactForm label[for="contactMessage"]').text(); 
     var emailPattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i); 

     if ($('#contactVerify').length != 0) 
     { 
      var labelVerify = $('#contactForm label[for="contactVerify"]').text(); 
     } 

     $('#contactForm button').click(function() 
     { 
      if ($('#contactName').val() == '') 
      { 
       $('#contactForm label[for="contactName"]').addClass('error').text(labelName + ' is required'); 
      } 
      else 
      { 
       $('#contactForm label[for="contactName"]').removeClass('error').text(labelName); 
      } 

      if ($('#contactEmail').val() == '') 
      { 
       $('#contactForm label[for="contactEmail"]').addClass('error').text(labelEmail + ' is required'); 
      } 
      else if (!emailPattern.test($('#contactEmail').val())) 
      { 
       $('#contactForm label[for="contactEmail"]').addClass('error').text(labelEmail + ' is invalid'); 
      } 
      else 
      { 
       $('#contactForm label[for="contactEmail"]').removeClass('error').text(labelEmail); 
      } 

      if ($('#contactMessage').val() == '') 
      { 
       $('#contactForm label[for="contactMessage"]').addClass('error').text(labelMessage + ' is required'); 
      } 
      else 
      { 
       $('#contactForm label[for="contactMessage"]').removeClass('error').text(labelMessage); 
      } 

      if (typeof labelVerify != 'undefined') 
      { 
       if ($('#contactVerify').val() == '') 
       { 
        $('#contactForm label[for="contactVerify"]').addClass('error').text(labelVerify + ' is required'); 
       } 
       else 
       { 
        $('#contactForm label[for="contactVerify"]').removeClass('error').text(labelVerify); 
       } 

      } 

      if ($('#contactForm label.error').length == 0) 
      { 
       $('#contactForm form').append('<input type="hidden" value="1" name="contactValid" />'); 
      } 
      else 
      { 
       return false; 
      } 
     }); 
    } 

我堅持如何實施驗證碼驗證。我是否將它包含在contact.php表單中？

或者我可以在表單發佈之前驗證驗證碼嗎？像電子郵件地址是？

我試着加入：

<?php 
session_start(); 
$cap = 'notEq'; 
if ($_SERVER['REQUEST_METHOD'] == 'POST') { 
    if (md5($_POST['contactVerify']) == $_SESSION['image_random_value']) { 
     // contactVerify verification is Correct. Do something here! 
     $cap = 'Eq'; 
    } else { 
     // contactVerify verification is wrong. Take other action 
     $cap = ''; 
    } 
} 
?> 

到HTML表單的頂部。然後還加入：

var capch = '<?php echo $cap; ?>'; 
       if(capch != 'notEq'){ 
        if(capch == 'Eq'){ 
     // My PHPMailer script // 
        } 
        else{ 
         $('#contactForm label[for="contactVerify"]').addClass('error').text(labelVerify + ' is invalid'); 
        } 
       }     

      }); 

作爲腳本。但沒有任何喜悅。無論驗證碼是否無效，表單都會被髮送。

任何幫助表示讚賞。

Answer 1

您將希望將驗證碼保存到PHP中的$ _SESSION並檢查它是否與本地驗證無關。

接下來，人們很少使用本地驗證碼驗證的原因是因爲它需要對服務器進行「檢查」，腳本會詢問服務器是否正確，然後告訴用戶它是否不正確（否則網絡瀏覽器會知道驗證碼的價值，因爲任何編碼者都可以抓住並利用它）。

我推薦做的是使用異步表單提交（隱藏表單，因爲它是在不刷新頁面的情況下提交的，使用javascript提交表單而不是整頁重新加載到/contact.php。 HTTP響應可以是「成功」，也可以是PHP返回失敗的原因，當客戶端收到失敗響應時，它會再次顯示錶單（請注意，因爲沒有刷新，數據仍然在域中），給一個新的驗證碼，以便有人不能不斷地輪詢相同的驗證碼，並給用戶一些跡象表明他們已經做了失敗。

這個問題在手邊不談，所有這些在Angular JS極其容易。我強烈推薦它

希望這有助於！