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

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. mysql的字符串函数

    From: http://www.cnblogs.com/xiaochaohuashengmi/archive/2010/12/13/1904330.html 对于针对字符串位置的操作,第一个位置被标 ...

  2. Yii2 cache的用法（1）

    数据缓存需要缓存组件提供支持,它代表各种缓存存储器, 例如内存,文件,数据库. 'components' => [ 'cache' => [ 'class' => 'yii\cach ...

  3. 设置时间同步（Linux,Solaris）

    经过网上各种搜索,将LINUX平台及solaris平台的时间同步整理如下: 主机情况:应用:2台LINUX服务器 redhat 5.5 内网数据库:2台Solaris服务器 Solaris 10 内网 ...

  4. 分页功能实现之通过ajax实现表单内容刷新

    拿代码来说话 我们的需求就是点击翻页功能,实现表格内容局部刷新且能够翻到对应的页面上,不明白? 那么就看看下面的图,需要达到的效果如下所示: 现在要实现的功能就是把红线框起来的表单内容 在点击翻页的时 ...

  5. 6 云计算系列之Nova安装与配置

    preface 上面安装好了glance,下面就开始部署nova计算服务了. nova组件介绍 首先介绍下nova各个组件. api 用来接收和响应外部的请求唯一途径,支持Openstack api, ...

  6. CorelDRAW中关于锁定与解锁对象的操作

    在编辑复制的图形时,有时为了避免对象受到操作的影响,可以使用“锁定与解锁对象”功能键对已经编辑好的对象进行锁定.被锁定的对象将不能进行任何编辑操作,本教程将详解CorelDRAW中关于锁定与解锁对象的 ...

  7. nano-sql.js的基本操作

    nano-sql是一个小而快的数据库引擎, 他支持联合查询, 分组, 事务, ORM等功能, 支持 内存, indeedDB, Local Storage, WebSQL, Level DB 注意第一 ...

  8. maven打包 jar

    最后更新时间: 2014年11月23日 1. maven-shade-plugin 2. maven-assembly-plugin 3. maven-onejar-plugin maven-shad ...

  9. 7代CPU安装win7的方法

    7代CPU安装win7会遇到的问题: 32位的win7不支持uefi启动,64位win7理论上支持uefi启动,但实际上需要开启兼容模式才能启动,并且启动速度并没有变快. 根据不同型号的主板,需要解决 ...

  10. DATAGUARD的搭建

    ORACLE Data Guard 理论知识 请查看此blog :http://blog.csdn.net/haibusuanyun/article/details/11519241 Oracle D ...