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

5年以前 | 阅读数：262 次 | 编程语言：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实现提交表单时验证码自动验证

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