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

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. jq dom不存在时绑定事件

    $( "a.offsite" ).live( "click", function() { alert( "Goodbye!" ); // j ...

  2. 让小区运营再智能一点，EasyRadius正式向WayOs用户提供到期弹出式提示充值页面

    其实一直没向用户提供到期弹出式页面,主要是给VIP群的用户一点优越感,随着这次EasyRadius的更新,海哥就免费向普通easyRadius用户提供这两个模板下载. 有些人会问,什么样的模板.有什么 ...

  3. springboot+shiro+redis(集群redis版)整合教程

    相关教程: 1. springboot+shiro整合教程 2. springboot+shiro+redis(单机redis版)整合教程 3.springboot+shiro+redis(单机red ...

  4. CentOS 65 安装vmware tools 杂记

    CentOS 65中安装vmware tools时出现如下错误, centos vmware tools install failure ,no default label for /tmp/vmwa ...

  5. php public,static,private,protected,final,const，abstract

    public:权限是最大的,可以内部调用,实例调用等. protected: 受保护类型,用于本类和继承类调用. private: 私有类型,只有在本类中使用. final:PHP 5:不被改,不被继 ...

  6. MySQL死锁分析

    死锁问题背景 做MySQL代码的深入分析也有些年头了,再加上自己10年左右的数据库内核研发经验,自认为对于MySQL/InnoDB的加锁实现了如指掌,正因如此,前段时间,还专门写了一篇洋洋洒洒的文章, ...

  7. ecshop安装

    ECSHOP开发中心(www.68ecshop.com) 1.下载ecshop程序包,下载地址: http://download.ecshop.com/2.7.3/ECShop_V2.7.3_UTF8 ...

  8. mybatis启动报错Mapped Statements collection already contains value for com.autoyol.mapper.trans.TransDispatchingMapper解决

    1.检查sqlsession配置,在applicationContext文件中.检查mybatis配置文件. 2.检查TransDispatchingMapper.java 是接口类,无注解. 3.T ...

  9. 利用flask将opencv实时视频流输出到浏览器

    opencv通过webcam可以获取本地实时视频流,但是如果需要将视频流共享给其他机器调用,就可以将利用flask框架构建一个实时视频流服务器,然后其他机器可以通过向这个服务器发送请求来获取这台机器上 ...

  10. yum 安装mysql, yum安装指定版本的mysql

    yum安装mysql: 1. 查看有没有安装过     yum list installed MySQL* (有存在要卸载yum remove MySQL*)     rpm -qa | grep m ...