首页>>表单>>php jquery 验证码 输入后验证表单(2013-10-16)

php jquery 验证码 输入后验证表单

 可以刷新验证码，提交验证是否输入正确

php jquery 验证码 输入后验证表单
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

PHP Code
  1. <?php  
  2. session_start();  
  3. $cap = 'notEq';  
  4. if ($_SERVER['REQUEST_METHOD'] == 'POST') {  
  5.     if ($_POST['captcha'] == $_SESSION['cap_code']) {  
  6.         // Captcha verification is Correct. Do something here!  
  7.         $cap = 'Eq';  
  8.     } else {  
  9.         // Captcha verification is wrong. Take other action  
  10.         $cap = '';  
  11.     }  
  12. }  
  13. ?>  
  14. <form action="index.php" method="post">  
  15.             <div id="form">  
  16.                 <table border="0" width="100%">  
  17.                     <tr>  
  18.                         <td colspan="2"><label>Name:</label><label class="mandat"> *</label><br/>  
  19.                             <input type="text" name="name" id="name"/></td>  
  20.                     </tr>  
  21.                     <tr>  
  22.                         <td colspan="2"><label>Message:</label><label class="mandat"> *</label><br/>  
  23.                             <textarea  name="msg" id="msg"></textarea></td>  
  24.                     </tr>  
  25.                     <tr>  
  26.                         <td colspan="2"><label>Enter the contents of image</label><label class="mandat"> *</label></td>  
  27.                     </tr>  
  28.                     <tr>  
  29.                         <td width="60px">                             
  30.                             <input type="text" name="captcha" id="captcha" maxlength="6" size="6"/></td>  
  31.                         <td><img id="captcha-image-new" name="captcha-image-new" src="captcha.php"/>  
  32.                                                   
  33.                         </td>  
  34.                     </tr>  
  35.                     <tr>  
  36.                         <td><input type="submit" value="Submit" id="submit"/></td>  
  37.                         <td><a href="#" onClick="javascript:refresh();"  id="change-image">看不清,换一个</a> </td>  
  38.                     </tr>  
  39.                 </table>  
  40.             </div>  
  41.         </form>  
  42.         <div class="cap_status"></div>  
  43.         </div>  

js文件

 

JavaScript Code
  1.       <script type="text/javascript">  
  2.           $(document).ready(function(){  
  3.               $('#submit').click(function(){  
  4.                   var name = $('#name').val();  
  5.                   var msg = $('#msg').val();  
  6.                   var captcha = $('#captcha').val();  
  7.                     
  8.                   if( name.length == 0){  
  9.                       $('#name').addClass('error');  
  10.                   }  
  11.                   else{  
  12.                       $('#name').removeClass('error');  
  13.                   }  
  14.   
  15.                   if( msg.length == 0){  
  16.                       $('#msg').addClass('error');  
  17.                   }  
  18.                   else{  
  19.                       $('#msg').removeClass('error');  
  20.                   }  
  21.   
  22.                   if( captcha.length == 0){  
  23.                       $('#captcha').addClass('error');  
  24.                   }  
  25.                   else{  
  26.                       $('#captcha').removeClass('error');  
  27.                   }  
  28.                     
  29.                   if(name.length != 0 && msg.length != 0 && captcha.length != 0){  
  30.                       return true;  
  31.                   }  
  32.                   return false;  
  33.               });  
  34.   
  35.               var capch = '<?php echo $cap; ?>';  
  36.               if(capch != 'notEq'){  
  37.                   if(capch == 'Eq'){  
  38.                       $('.cap_status').html("Your form is successfully Submitted ").fadeIn('slow').delay(3000).fadeOut('slow');  
  39.                   }else{  
  40.                       $('.cap_status').html("Human verification Wrong!").addClass('cap_status_error').fadeIn('slow');  
  41.                   }  
  42.               }  
  43.                 
  44.                 
  45.   
  46.           });  
  47.       
  48. function refresh()  
  49. {  
  50.       document.getElementById('captcha-image-new').src='captcha.php?'+Math.random();  
  51.      document.getElementById('captcha').focus();  
  52. }  
  53.       </script>  
  54.  

 captcha.php

 

PHP Code
  1. <?php  
  2. session_start();  
  3. $ranStr = md5(microtime());  
  4. $ranStr = substr($ranStr, 0, 6);  
  5. $_SESSION['cap_code'] = $ranStr;  
  6. $newImage = imagecreatefromjpeg("cap_bg.jpg");  
  7. $txtColor = imagecolorallocate($newImage, 0, 0, 0);  
  8. imagestring($newImage, 5, 5, 5, $ranStr, $txtColor);  
  9. header("Content-type: image/jpeg");  
  10. imagejpeg($newImage);  
  11. ?>  

 


原文地址:http://www.freejs.net/article_biaodan_65.html