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

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实现提交表单时验证码自动验证演示

源码下载地址：Ajax实现提交表单时验证码自动验证

转载请附带本文原文地址：Ajax实现提交表单时验证码自动验证，首发自 Zjmainstay学习笔记

Ajax实现提交表单时验证码自动验证（原创自Zjmainstay）的更多相关文章

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

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

  2. ASP.NET MVC 网站开发总结（五）——Ajax异步提交表单之检查验证码

    首先提出一个问题:在做网站开发的时候,用到了验证码来防止恶意提交表单,那么要如何实现当验证码错误时,只是刷新一下验证码,而其它填写的信息不改变? 先说一下为什么有这个需求:以提交注册信息页面为例,一般 ...

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

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

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

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

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

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

  6. POST方式提交表单时，后台接受实体如果继承了父类，将无法映射表单对应数据

    引言 刚才在做一个post提交表单时,我在表单里放了几个隐藏域用来存放数据,表单name属性和后台实体属性签名保持一致.只是后台Action参数包含继承关系,所以无法获取到表单对应的值.刚开始一直纳闷 ...

  7. php提交表单时判断 if($_POST[submit])与 if(isset($_POST[submit])) 的区别

    if(isset($_POST['submit'])) 它的意思是不是判断是否配置了$_POST['submit'] 这个变量呢?如果有这个变量 在执行其它代码 应该这样用if(isset($_POS ...

  8. submit()提交表单时，显示警示框

    我同事在实现submit()提交表单时,想要页面弹出警示框. 但是折腾了几小时后发现,submit()始终不执行. 她的代码如下: $(document).ready(function(){ $(&q ...

  9. 只有设置了 name 属性的表单元素才能在提交表单时传递它们的值

    $(function () { var wait = $("<img src=\"\" alt=\"正在上传\"/>"); $( ...

随机推荐

  1. missing locales

    原文地址:http://codewut.de/content/missing-locales-under-debian This drives me crazy! Every time I deboo ...

  2. Linux：多文件编辑

    多文件编辑 1.使用vim编辑多个文件 编辑多个文件有两种形式,一种是在进入vim前使用的参数就是多个文件.另一种就是进入vim后再编辑其他的文件. 同时创建两个新文件并编辑 $ vim 1.txt ...

  3. 让你的CI跑起来-《持续集成》读书总结

    持续集成已经被公认为极具价值的一项工程实践.在初始化一个项目时一个重要的任务就是搭建持续集成服务器,编写构建脚本.在我工作的所有项目中都引入了持续集成机制.它已经像氧气一样成为软件开发过程中的一项工程 ...

  4. GPU---并行计算利器

    转载请引用:GPU---并行计算利器 源于阿里巴巴CCO<猿来如此>分享 1 GPU是什么 如图1所示,这台PC机与普通PC机不同的是这里插了7张显卡,左下角是显卡,在中间的就是GPU芯片 ...

  5. Linux安装snmp

    1.yum安装 yum -y install net-snmp* 2.修改配置文件/etc/snmp/snmpd.conf com2sec notConfigUser default public 默 ...

  6. atitit.元编程总结 o99

    atitit.元编程总结 o99.doc 1. 元编程(Metaprogramming) 1 2. 元编程的历史and发展 1 3. 元类型and元数据 1 4. 元编程实现方式 2 4.1. 代码生 ...

  7. chrome浏览器扩展的事件处理

    关于chrome扩展开发的栗子已经有很多了,问问度娘基本能满足你的欲望, 我想说的是扩展和页面间的数据传递问题. 我们知道写扩展有个必须的文件就是“manifest.json”, 这个里面定义了一个和 ...

  8. DataWindow.Net 2.5 配置

    在用过的所有的开发工具中,感觉最简单好用的就数PB了,他的DataWindow最方便,拖拖拽拽就把报表做好了,可惜现在很少人有用了.现在C/S系统一般用C#来做,但是做报表的时候总感觉没有DataWi ...

  9. 进度的Block在子线程调用

    [_pictureView sd_setImageWithURL:[NSURL URLWithString:item.image2] placeholderImage:nil options:SDWe ...

  10. 关于iphone6安装了727个应用后，更新app 导致一些app无法更新，无法删除，重启后消失，但是却还是占用空间的解决办法

    我的iphone6 苹果手机,64GB的,存储空间最近一直很吃紧,很捉急,昨天,终于下定决心 解决下这个问题. 由于 空间大,我又随便安装许多APP,现在有727个app,常用的其实就是那个几十个而已 ...