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

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. 数据库优化实践【TSQL篇】

    在前面我们介绍了如何正确使用索引,调整索引是见效最快的性能调优方法,但一般而言,调整索引只会提高查询性能.除此之外,我们还可以调整数据访问代码和TSQL,本文就介绍如何以最优的方法重构数据访问代码和T ...

  2. [ACM_水题] UVA 11292 Dragon of Loowater [勇士斗恶龙 双数组排序 贪心]

    Once upon a time, in the Kingdom of Loowater, a minor nuisance turned into a major problem. The shor ...

  3. [WinAPI] API 4 [注册][创建][消息][第一个框架类窗口]

    首先注册了窗口类,然后创建了一个窗口,创建窗口时指定的窗口的属性和窗口消息的处理函数.函数消息的处理函数大多调用系统默认函数来处理. #include<windows.h> /*全局变量* ...

  4. 秀才提笔忘了字：javascript使用requestAnimationFrame实现动画

    requestAnimationFrame优于setTimeout/setInterval的地方在于它是由浏览器专门为动画提供的API,在运行时浏览器会自动优化方法的调用,并且如果页面不是激活状态下的 ...

  5. clientHeight,offsetHeight与scrollHeight的相关知识

    在html里,width与height是最常用也是最基础的两个属性,因此,在js里,我们也经常需要操作这两个属性.js关于这两个属性提供了client*,offset*与scroll*,很多同学搞不清 ...

  6. paip.环境配置整合 ibatis mybatis proxool

    paip.环境配置整合 ibatis mybatis proxool  索引: ///////////1.调用 ///////////////2. ibatis 主设置文件  com/mijie/ho ...

  7. javaweb学习总结(十九)——JSP标签

    一.JSP标签介绍 JSP标签也称之为Jsp Action(JSP动作)元素,它用于在Jsp页面中提供业务逻辑功能,避免在JSP页面中直接编写java代码,造成jsp页面难以维护. 二.JSP常用标签 ...

  8. Struts2入门2 Struts2深入

    Struts2入门2 Struts2深入 链接: http://pan.baidu.com/s/1rdCDh 密码: sm5h 前言: 前面学习那一节,搞得我是在是太痛苦了.因为在Web项目中确实不知 ...

  9. centos 6.4 /var/log/secure 不记录日志的問題

    先确保日志服务开启:不妨重启下日志服务:由于目前RHEL 6/centos 6已经使用rsyslog替换了syslog.,所以不要在找/etc/syslog.conf了:重启命令:/etc/init. ...

  10. Docker实践(4)—network namespace与veth pair

    network namespace 创建network namespace # ip netns add blue # ip netns list blue   添加网口到namespace 先创建v ...