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

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提交表单时验证码自动验证 php后端验证码检测的更多相关文章

  1. KindEditor：Ajax提交表单时获取不到HTML内容

    当用Ajax提交表单时,KindEditor的内容获取不到,HTML数据获取不了 原因:当ajax提交时,KindEdito的HTML数据还没有同步到表单中来,那怎么去获取HTML数据呢? ----- ...

  2. Dwz/Jquery--使用Ajax提交表单时调用表单设置的校验

    案例 今天有一个需求就是点击按钮时,使用ajax方式提交表单,而且不是直接用form表单下的submit按钮提交,表单中用的校验是dwz 自带的校验方式,表单模板如下: <li><d ...

  3. Ajax实现提交表单时验证码自动验证（原创自Zjmainstay）

    本文通过源码展示如何实现表单提交前,验证码先检测正确性,不正确则不提交表单,更新验证码. 1.前端代码 index.html <!DOCTYPE html> <html> &l ...

  4. Validator验证Ajax提交表单的方法

    Validator验证Ajax提交表单的方法 转自:http://hunanpengdake.iteye.com/blog/1671360 当我们在一些稍微复杂的业务时,可能会遇到需要多个表单form ...

  5. JQuery ajax提交表单及表单验证

    JQuery ajax提交表单及表单验证 博客分类: jsp/html/javascript/ajax/development Kit 开源项目   注:经过验证,formValidator只适合一个 ...

  6. ajax提交表单、ajax实现文件上传

    ajax提交表单.ajax实现文件上传,有需要的朋友可以参考下. 方式一:利用from表单的targer属性 + 隐藏的iframe 达到类似效果, 支持提交含有文件和普通数据的复杂表单 方式二:使用 ...

  7. JavaWeb网上图书商城完整项目--day02-4.regist页面提交表单时对所有输入框进行校验

    1.现在我们要将table表中的输入的参数全部提交到后台进行校验,我们提交我们是按照表单的形式提交,所以我们首先需要在table表外面添加一个表单 <%@ page language=" ...

  8. Jquery ajax提交表单几种方法

    在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$('#表单ID').serialize();就行了,下面我来介绍两个提交表单数据的方法. ...

  9. Jquery ajax提交表单几种方法详解

    [导读] 在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$( 表单ID) serialize();就行了,下面我来介绍两个提交表单数据的 ...

随机推荐

  1. log4net 日志配置及使用

    一.log4net按照不同的[LEVEL]级别输出到不同文件 <log4net> <!--错误日志:::记录错误日志--> <!--按日期分割日志文件 一天一个--> ...

  2. 近期全国各地联通线路无法访问OA的解决方案

    最近有多地区使用联通线路的用户无法访问easyradius控制台,即oa.ooofc.com,其主要的原因是由于联通的DNS解析错误,导致的 oa.ooofc.com的解析IP是115.239.252 ...

  3. vue的安装

    第一步:环境的搭建 : vue推荐开发环境: Node.js: javascript运行环境(runtime),不同系统直接运行各种编程语言(https://nodejs.org/zh-cn/down ...

  4. 多个table 相同col 的 设置相同width

    不同table 中的col 虽然设置了width 相同,但在IE8.9中长度仍不统一.经检查是不同table使用了不同的colspan ,删除colspan全部使用<td></td& ...

  5. 腾讯大湘网某处csrf(city.hn.qq.com)可投诉刷留言

    触发点: http://city.hn.qq.com http://city.hn.qq.com/auto/c=shop&m=bbs&id=668 POST /msgboard/mes ...

  6. 156 UIImageView 和 CADisplayLink 实现 Tom 汤姆猫动画效果的区别（扩展知识：分组（黄色文件夹）和文件夹引用（蓝色文件夹）区别）

    (1)UIImageView 的动画操作,来自定义循环播放动画(不建议使用,内存消耗大) (2)CADisplayLink 是一个计时器,但是同 NSTimer 不同的是,CADisplayLink ...

  7. How to make an HTTP request in Swift

    from: http://stackoverflow.com/questions/24016142/how-to-make-an-http-request-in-swift You can use N ...

  8. 11gR2 RAC：更换OCR、votedisk

    要点: ocrconfig 备份-恢复 ocrconfig 导出-导入 crsctl querry css votedisk crsctl replace votedisk {+dsikgroup|s ...

  9. 解决webStorm没有cesium代码自动提示的方法

    Webstorm中默认是没有cesium代码提示的,但是可以通过设置让它有智能提示 File -> Settings -> Languages&Frameworks -> J ...

  10. 关于python单方法的类

    1.大部分情况下,你拥有一个单方法类的原因是需要存储某些额外的状态来给方法使用. 此种情况下可以使用闭包代替,参考 javascript的闭包计数器实现,python实现各种方法来实现计数器 关于这个 ...