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

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. Android资源命名规范

    Android资源命名规范 命名模板为:缩写_主界面_功能部分(一) 缩写:ic ----------------------iconbg---------------------background ...

  2. 修复SharePoint 2013 Search 拓扑错误

    Problem 当创建和配置SharePoint 2013 Search Service Application成功之后,进入详细配置页后,在Search Application Topology节点 ...

  3. java5 ReadWriteLock用法--读写锁实现

    读写锁:分为读锁和写锁,多个读锁不互斥,读锁与写锁互斥,这是由jvm自己控制的,你只要上好相应的锁即可.如果你的代码只读数据,可以很多人同时读,但不能同时写,那就上读锁:如果你的代码修改数据,只能有一 ...

  4. 标签简化Spring-MVC配置

    新填入@RequestMapping标签 和@org.springframework.stereotype.Controller标签 这样做就是通过标签来简化之前,对HandlerMapping的配置 ...

  5. JavaScript 中的 this ,看着一篇就够了

    tip 在 js 中,this 这个上下文总是变化莫测,很多时候出现 bug 总是一头雾水,其实,只要分清楚不同的情况下如何执行就 ok 了. 全局执行 首先,我们在全局环境中看看它的 this 是什 ...

  6. DOM操作（Window.document对象）

    间隔与延迟: 间隔一段代码: window.setInterval("代码",间隔执行秒数) 延迟一段时间后执行一段代码: window.setTimeout("执行代码 ...

  7. paip.元数据驱动的转换-读取文件行到个list理念 uapi java php python总结

    paip.元数据驱动的转换-读取文件行到个list理念 uapi java php python总结 #两个思路 1.思路如下:使用file_get_contents()获取txt文件的内容,然后通过 ...

  8. 建立一个名叫Cat的类

    //属性 成员变量 String name; int age; String color; //方法 函数 成员函数 void name() { System.out.println("名字 ...

  9. FreeCodeCamp 高级算法（个人向）

    freecodecamp 高级算法地址戳这里. freecodecamp的初级和中级算法,基本给个思路就能完成,而高级算法稍微麻烦了一点,所以我会把自己的解答思路写清楚,如果有错误或者更好的解法,欢迎 ...

  10. Bootstrap3.0入门学习系列规划[持续更新]

    详情请看http://aehyok.com/Blog/Detail/5.html 个人网站地址:aehyok.com QQ 技术群号:206058845,验证码为:aehyok 本文文章链接:http ...