Ajax提交表单时验证码自动验证 php后端验证码检测

前端技术 2023/09/01 PHP

本文通过源码展示如何实现表单提交前，验证码先检测正确性，不正确则不提交表单，更新验证码。

1、前端代码 index.html

 <!DOCTYPE html>
<html>
<head>
 <title>验证码提交自验证</title>
 <meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
 <meta http-equiv=\"Content-Language\" content=\"zh-CN\" />
</head>
<body>
 <form action=\"doPost.php\" method=\"POST\">
  
  <div class=\"row\">
   <label for=\"username\">用户名</label>
   <input type=\"text\" name=\"username\" id=\"username\" />
  </div>
  <div class=\"row\">
   <label for=\"mod-captcha-code\">验证码</label>
   <input name=\"code\" id=\"mod-captcha-code\" size=\"6\" class=\"zjcaptcha\" style=\"width:80px\" type=\"text\"/>
   <img class=\"code-img\" style=\"height:30px;width:80px;\" src=\"createcode.php?t=0\" onclick=\"this.src=this.src.substring(0,this.src.indexOf(\'?\')+1)+Math.random();return false;\" />
   <script type=\"text/javascript\" src=\"http://www.zjmainstay.cn/jquery/jquery-1.8.2.min.js\"></script>
   <div class=\"yzmtips\" style=\"color:red\"></div>
  </div>
  <div class=\"row\">
   <input type=\"submit\" value=\"提交\" class=\"submitBtn\"/>
  </div>
 </form>
<script>
(function($){
 $(document).ready(function(){
  $(\".submitBtn\").click(function() {
   var obj = $(this);
   $.ajax({
    url:\'checkcode.php\',
    type:\'POST\',
    data:{code:$.trim($(\"input[name=code]\").val())},
    dataType:\'json\',
    async:false,
    success:function(result) {
     if(result.status == 1) {
      obj.parents(\'form\').submit(); //验证码正确提交表单
     }else{
      $(\".code-img\").click();
      $(\".yzmtips\").html(\'验证码错误！\');
      setTimeout(function(){
       $(\".yzmtips\").empty();
      },3000);
     }
    },
    error:function(msg){
     $(\".yzmtips\").html(\'Error:\'+msg.toSource());
    }
   })
   return false;
  })
 });
})(jQuery);
</script>
</body>
</html>

 2、后端验证码检测 checkcode.php

 <?php
/**
* 用户验证码验证文件
* @Author:Zjmainstay
* @version : 1.0
* @creatdate: 2013-10-4
*/
session_start();
echo json_encode(array(\'status\'=>(int)($_SESSION[\"CHECKCODE\"] == $_POST[\'code\'])));
exit;

 源码下载地址：Ajax实现提交表单时验证码自动验证

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持phpstudy。

本文地址：https://www.stayed.cn/item/2148

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案