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


Posted in PHP onJuly 20, 2016

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

PHP 相关文章推荐
修改php.ini实现Mysql导入数据库文件最大限制的修改方法
Dec 11 PHP
PHP 多维数组排序(usort,uasort)
Jun 30 PHP
PHP写的资源下载防盗链类分享
May 12 PHP
php采用curl实现伪造IP来源的方法
Nov 21 PHP
php返回当前日期或者指定日期是周几
May 21 PHP
php基于Snoopy解析网页html的方法
Jul 09 PHP
深入浅析php中sprintf与printf函数的用法及区别
Jan 08 PHP
twig里使用js变量的方法
Feb 05 PHP
PHP数组内存利用率低和弱类型详细解读
Aug 10 PHP
PHP文件系统管理(实例讲解)
Sep 19 PHP
PHP去除空数组且数组键名重置的讲解
Feb 28 PHP
Thinkphp 框架扩展之数据库驱动常用方法小结
Apr 23 PHP
php使用get_class_methods()函数获取分类的方法
Jul 20 #PHP
PHP+Ajax验证码验证用户登录
Jul 20 #PHP
PHP+Ajax实现验证码的实时验证
Jul 20 #PHP
php+ajax注册实时验证功能
Jul 20 #PHP
PHP实现的随机IP函数【国内IP段】
Jul 20 #PHP
Zend Framework教程之Zend_Helpers动作助手ViewRenderer用法详解
Jul 20 #PHP
php+flash+jQuery多图片上传源码分享
Jul 27 #PHP
You might like
《五等分的花嫁》漫画完结!2020年10月第2期TV动画制作组换血!
2020/03/06 日漫
php单例模式实现(对象只被创建一次)
2012/12/05 PHP
使用PHP导出Word文档的原理和实例
2013/10/21 PHP
php中删除数组的第一个元素和最后一个元素的函数
2015/03/07 PHP
thinkphp框架下404页面设置 仅三步
2016/05/14 PHP
微信公众号实现扫码获取微信用户信息(网页授权)
2019/04/09 PHP
基于jQuery的倒计时插件代码
2011/05/07 Javascript
jquery、js操作checkbox全选反选
2014/03/12 Javascript
js中confirm实现执行操作前弹出确认框的方法
2014/11/01 Javascript
node.js实现BigPipe详解
2014/12/05 Javascript
JS实现超过长度限制后自动跳转下一款文本框的方法
2015/02/23 Javascript
jQuery AjaxUpload 上传图片代码
2016/02/02 Javascript
vue2.0 循环遍历加载不同图片的方法
2018/03/06 Javascript
jQuery解析json格式数据示例
2018/09/01 jQuery
实例详解带参数的 npm script
2019/05/28 Javascript
JavaScript中Dom操作实例详解
2019/07/08 Javascript
layui table 表格上添加日期控件的两种方法
2019/09/28 Javascript
[05:08]2014DOTA2国际邀请赛 Hao专访复仇的胜利很爽
2014/07/15 DOTA
[01:07:41]IG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
使用Python的内建模块collections的教程
2015/04/28 Python
python数据类型_元组、字典常用操作方法(介绍)
2017/05/30 Python
Python探索之静态方法和类方法的区别详解
2017/10/27 Python
Python3 使用selenium插件爬取苏宁商家联系电话
2019/12/23 Python
Keras:Unet网络实现多类语义分割方式
2020/06/11 Python
德国、奥地利和瑞士最大的旅行和度假门户网站:HolidayCheck
2019/11/14 全球购物
国税会议欢迎词
2014/01/16 职场文书
乳制品整治工作方案
2014/05/29 职场文书
2014年学校工会工作总结
2014/12/06 职场文书
售后服务承诺函格式
2015/01/21 职场文书
商务代表岗位职责
2015/02/15 职场文书
实习单位推荐信
2015/03/27 职场文书
员工离职通知函
2015/04/25 职场文书
学前教育见习总结
2015/06/23 职场文书
幽默导游词应该怎么写?
2019/08/26 职场文书
nginx location优先级的深入讲解
2021/03/31 Servers
解决numpy和torch数据类型转化的问题
2021/05/23 Python