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

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

赞 (0)

相关推荐

  • PHP+Ajax异步通讯实现用户名邮箱验证是否已注册( 2种方法实现)

    PHP+Ajax异步通讯实现用户名邮箱验证是否已注册( 2种方法实现)

    前 言 直接上代码有点不厚道.于是按照天朝传统,整段描述吧....(本人语言表达能力有限,大家忍着看) 功 能 在网站注册用户时使用,主要为了无刷新异步验证用户输入的用户名或者Email是否已注册. 这功能大家肯定见过,大多数网站都有的,我一直对这个功能很感兴趣,所以这几天研究了下 jQuery + Ajax 整了一个功能不算完善,但足以应付普通使用的代码 (更牛的功能大家自己去发掘) 文 件 说 明 reg.php //为注册页面 check_user.php //为用户验证页面 (GET,P

  • PHP生成各种常见验证码和Ajax验证过程

    PHP生成各种常见验证码和Ajax验证过程

    验证码在WEB应用中非常重要,通常用来防止用户恶意提交表单,如恶意注册和登录.论坛恶意灌水等.本文将通过实例讲解使用PHP生成各种常见的验证码包括数字验证码.数字+字母验证码.中文验证码.算术验证码等等以及其Ajax验证过程. PHP生成验证码图片 PHP生成验证码的原理:使用PHP的GD库,生成一张带验证码的图片,并将验证码保存在Session中. PHP生成验证码的大致流程有: 1.产生一张png的图片: 2.为图片设置背景色: 3.设置字体颜色和样式: 4.产生4位数的随机的验证码: 5.

  • PHP与Ajax相结合实现登录验证小Demo

    AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 不是新的编程语言,而是一种使用现有标准的新方法. AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下. 设计一个用户注册页面,当用户输入注册名的时候,检测用户名是否已存在

  • Ajax和PHP正则表达式验证表单及验证码

    模式匹配符: \:转义字符 例如:\b转义了b ^:正则表达式开始符号 $:正则表达式结束符号 *:匹配前面的字符出现0次或者n次 +:匹配前面的字符出现1次或者n次 ?:匹配前面的字符出现0次或者1次 .:匹配除了换行符以外的所有单个字符 |:或者的意思,例如x|y 匹配x或者y {n}:匹配前面的n个字符 {n,m}:匹配至少n个最多m个前面字符 [xyz]:匹配中括号里的任意一个字符 [^xyz]:匹配除了中括号里的任意一个字符等价于[0-9] \w:匹配任意一个数字或字母或下划线 等价于

  • thinkphp验证码的实现(form、ajax实现验证)

    两种验证码验证实现,一种直接在form表单提交按钮实现验证,一种使用ajax传递参数实现验证: 1.直接在form表单提交按钮实现验证,在控制器VerifyController.class.php中写入如下代码: namespace Home\Controller; use Think\Controller; class VerifyController extends Controller { public function index() { $this->display(); } publ

  • 基于PHP+Ajax实现表单验证的详解

    一,利用键盘响应,在不刷新本页面的情况下验证表单输入是否合法用户通过onkeydown和onkeyup事件来触发响应事件.使用方法和onclick事件类似.onkeydown表示当键盘上的键被按下时触发,onkeyup和它正好相反,当键盘上的键被按下又抬起时触发.两种常用调用方法:(1)将事件添加到页面元素中,当用户输入完信息后,单击任意键,onkeydown事件被触发,并调用refer()函数.这种方法最简单,最直接,格式如下: 复制代码 代码如下: <script type="text

  • PHP+Ajax实现验证码的实时验证

    PHP的图像处理功能强大,做一张验证码图片也是非常简单的,但是,在实现实时验证时,确遇到了一个难题: 我用nat123对我的电脑上的网站进行端口映射,实现了在外网访问,本来是采用cookie的方式用js对验证码进行验证,但是经检验发现nat123虽然使我的网站可以通过一个自定义的网址进行访问,但是产生验证码的php文件在网络上的位置竟然和其它页面不在一个域,经查询得知,因为输出图片的缘故,被作为缓存文件映射在了某个文件夹内,所以--其他页面在我的网址下,产生验证码的页面又在另一个网址里,所以它们

  • php注册系统和使用Xajax即时验证用户名是否被占用

    php注册系统和使用Xajax即时验证用户名是否被占用

    在php中使用Xajax能够即时与数据库发生交互 带给用户更好的体验 主要的应用有网页的即时.不刷新的登录系统 也可以利用于注册系统中 即时验证用户名是否被占用 一.基本目标 首先在mysql中有一张用户信息表user 编写一个用户注册系统,一开始注册按钮是禁用的状态 当用户输入用户名完毕时,马上检查这个用户名是否被占用,如果是,禁用注册按钮,并弹出对话框 如果用户输入的用户名没有被占用,则解锁注册按钮,但如果用户输入两次输入的密码不一致,同样不允许用户注册 直到用户满足所有注册条件的时候,才放

  • PHP+Ajax验证码验证用户登录

    用AJAX 验证用户登录的一个好处是不刷新跳转页面,外加用到验证码就更安全了,摸索的写了下.一共用到三个文件: yz.php:  生成验证码的PHP 文件,将验证码将在SESSION 里,供登录时对比调用 index.php: 用户登录的HTML 文件 loginCheck.php: 验证用户登录的文件 下面一一解析: yz.php 文件 <?php session_start(); //生成验证码图 Header("Content-type: image/PNG"); //长与

  • php+ajax注册实时验证功能

    ajax的实时验证技术已经很成熟了,在一些规范的网站上,如果有注册验证的模板,必定会涉及到ajax的无刷新验证,这在用户注册的体验中是很棒的,对比一个不能及时和后台无刷新对接的验证模式,要重新返回来刷新,这对于用户来说,体验上是很不友好的. ajax的模式几乎是所有站点应用的需求,ajax作为前端无刷新验证,可以和所有后台语言进行组合使用,比如asp+ajax,php+ajax,.net+ajax等等组合,这里主要讲解的是php+ajax的注册验证. 下面的验证是一个完整的实例,我们在网站上面注

随机推荐