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

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. C# 线程池执行操作例子

    public partial class Form1 : Form { CountdownEvent hander = ); public static object lock_action = ne ...

  2. windows版mysql配置--my.ini

    完整配置如下: # power by phpStudy 2014 www.phpStudy.net 官网下载最新版 [client] port=3306 [mysql] [mysqld] port=3 ...

  3. Yii2 cache的用法（1）

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

  4. 微信小程序使用阿里图标

    微信小程序不支持外联阿里图标,必须下载放入小程序的本地文件中. 步骤一:下载项目图标 步骤二:转换iconfont.ttf文件(小程序的wxss文件的font-face的url不接受http地址作为参 ...

  5. 简单理解AOP（面向切面编程）

    AOP为Aspect Oriented Programming的缩写,意为:面向切面编程,通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术. AOP与OOP是面向不同领域的两种设计思想. ...

  6. DWZ主从表界面唯一性验证（后台验证）（三）

    之前的博客介绍了前台自写js来验证主动表的唯一性,除了前台的验证,我也学习了后台的一些判断. 再次介绍一下背景需求: 利用DWZ的主从表结构批量添加课程信息,在提交表单后,触发Action事件 1.是 ...

  7. Java学习之——JavaBeans

    1.什么是JavaBeans? JavaBeans是Java语言中可以重复使用的软件组件,它们是一种特殊的Java类,将很多的对象封装到了一个对象(bean)中.特点是 可序列化, 提供无参构造器, ...

  8. Android四大组件之——ContentProvider（二）

    Content Resolver介绍: 开发者文档中这么定义的: This class provides applications access to the content model. 这个类为应 ...

  9. workerman定时器使用 php定时任务

    add int \Workerman\Lib\Timer::add(float $time_interval, callable $callback [,$args = array(), bool $ ...

  10. 既使用maven又使用lib下的Jar包

    maven 使用本地包 lib jar包 依赖一个lib目录 解决方法: # 把本地的lib加入maven编译时的依赖路径 From:http://blog.chinaunix.net/uid-231 ...