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

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. Linux：文件类型和权限

    一个目录要同时具有读权限和执行权限才可以打开,而一个目录要有写权限才允许在其中创建其它文件.

  2. [Python] 中文编码问题：raw_input输入、文件读取、变量比较等str、unicode、utf-8转换问题

    最近研究搜索引擎.知识图谱和Python爬虫比较多,中文乱码问题再次浮现于眼前.虽然市面上讲述中文编码问题的文章数不胜数,同时以前我也讲述过PHP处理数据库服务器中文乱码问题,但是此处还是准备简单做下 ...

  3. python数据采集与多线程效率分析

    以前一直使用PHP写爬虫,用Snoopy配合simple_html_dom用起来也挺好的,至少能够解决问题. PHP一直没有一个好用的多线程机制,虽然可以使用一些trick的手段来实现并行的效果(例如 ...

  4. atitit.解决struts2 SpringObjectFactory.getClassInstance NullPointerException

    atitit.解决struts2 SpringObjectFactory.getClassInstance NullPointerException #--现象 java.lang.NullPoint ...

  5. paip.python ide 总结最佳实践o4.

    paip.python ide 总结最佳实践o4. ====2个重要的标准 1.可以自动补全 2.可以断点调试 =======选型使用报告 Komodo正好儿俄机器上有,使用累挂,自动补全还凑火.就是 ...

  6. Leetcode 263 Ugly Number 数论 类似质因数分解

    Ugly Number的质因数仅为2,3,5 将输入的数分别除以2,3,5直到不能除,看是否为1,为1的是Ugly Number,其他则不是. class Solution { public: boo ...

  7. mysql优化之表建设

    就拿常见的用户表.文章类的表.日志表来分析如下 CREATE TABLE `user` (   `id` int(11) unsigned NOT NULL AUTO_INCREMENT COMMEN ...

  8. 使用Facebook的SDK判斷來訪者是否已經按讃并成為本站粉絲團的成員

    今天公司裡要做活動,其中有一項活動內容是要求來訪者按一下facebook粉絲團的讃,按了讃之後贈送現金.Facebook被墻大家眾所周知,在百度搜了一下發現因為被墻的原因導致國內涉及到Facebook ...

  9. iOS10 相机相册等权限的使用、检测并引导用户开启权限

    <!-- 相册 --> <key>NSPhotoLibraryUsageDescription</key> <string>App需要您的同意,才能访问 ...

  10. ios app 实现热更新（无需发新版本实现app添加新功能）

    目前能够实现热更新的方法,总结起来有以下三种 1. 使用FaceBook 的开源框架 reactive native,使用js写原生的iOS应用 ios app可以在运行时从服务器拉取最新的js文件到 ...