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

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。