php后端验证码检测,基于ajax实现验证码功能

<%@ page contentType="image/jpeg; charset=utf-8" 
  language="java" import="java.util.*,java.awt.*,java.awt.image.*,javax.imageio.*" 
  pageEncoding="UTF-8"%> 
<!-- 以上导入awt和awt.image包 --> 
<%! 
  //获取随机颜色 
  public Color getColor(){ 
   Random random = new Random(); 
   //使用rgb()随机产生颜色 
   int r = random.nextInt(256); 
   int g = random.nextInt(256); 
   int b = random.nextInt(256); 

   return new Color(r,g,b); 
  } 

  //获取随机数字 产生一个4位数 
  public String getNum(){ 
   String str = ""; 
   Random random = new Random(); 
   for(int i = 0;i < 4;i++){ 
    str += random.nextInt(10); //0-9 
   } 
   return str; 
  } 
%> 

<% 
  /* 清除缓存 */ 
  response.setHeader("pragma", "mo-cache"); 
  response.setHeader("cache-control", "no-cache"); 
  response.setDateHeader("expires", 0); 
  //产生矩形框 
  BufferedImage image = new BufferedImage(80,30,BufferedImage.TYPE_INT_RGB); 
  //获取画笔工具 
  Graphics g = image.getGraphics(); 
  //设置矩形框的颜色 
  g.setColor(new Color(200,200,200)); 
  //设置坐标和宽高 
  g.fillRect(0, 0, 80, 30); 

  //随机产生干扰线 
  for(int i = 0;i < 30;i++){ 
   Random random = new Random(); 
   int x = random.nextInt(80); 
   int y = random.nextInt(30); 
   int x1 = random.nextInt(x + 10); 
   int y1 = random.nextInt(y + 10); 
   //设置随机颜色 
   g.setColor(getColor()); 
   //画出来 
   g.drawLine(x, y, x1, y1); 
  } 

  //字的颜色和数字 
  g.setFont(new Font("Microsoft YaHei",Font.BOLD,16)); 
  g.setColor(Color.BLACK); 
  //获取随机数字 
  String checkNum = getNum(); 

  //给字拼接空格 
  StringBuffer sb = new StringBuffer(); 
  for(int i = 0;i < checkNum.length();i++){ 
   sb.append(checkNum.charAt(i) + " "); 
  } 
  //画出数字 
  g.drawString(sb.toString(), 15, 20); 
  //存入session域中 
  session.setAttribute("CHECKNUM", checkNum); //例如1010 
  //将图像以jpeg的形式通过字节流输出 
  ImageIO.write(image, "jpeg", response.getOutputStream()); 
  //清除缓存 
  out.clear(); 
  //放入body中 
  out = pageContext.pushBody(); 
%> 

1、前端代码 index.html

PHP生成验证码图片

您可能感兴趣的文章:

  • asp.net
    ajax实现无刷新验证码
  • 基于Ajax用户名验证、服务条款加载、验证码生成的实现方法
  • Ajax实现带有验证码的局部刷新登录界面
  • Ajax和PHP正则表达式验证表单及验证码
  • PHP+Ajax验证码验证用户登录
  • thinkphp验证码的实现(form、ajax实现验证)
  • jsp+ajax实现的局部刷新较验验证码(onblur事件触发较验)
  • PHP生成各种常见验证码和Ajax验证过程
  • Ajax提交表单时验证码自动验证
    php后端验证码检测
  • PHP+Ajax实现验证码的实时验证

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

5.把产生的每个字符调整旋转角度和位置画到png图片上;

图片 1

 <!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

session_start(); 
$code = trim($_POST['code']); 
if($code==$_SESSION["helloweba_num"]){ 
echo '1'; 
}

将验证码压缩成图片,在checkcode.jsp中引用,并在该页面中利用ajax向服务器发送数据

 <?php
/**
* 用户验证码验证文件
* @Author:Zjmainstay
* @version : 1.0
* @creatdate: 2013-10-4
*/
session_start();
echo json_encode(array('status'=>(int)($_SESSION["CHECKCODE"] == $_POST['code'])));
exit; 

PHP生成验证码的大致流程有:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 
<% 
String path = request.getContextPath(); 
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 
%> 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
 <head> 
 <base href="<%=basePath%>" rel="external nofollow" > 

 <title>验证码</title> 

 <meta http-equiv="pragma" content="no-cache"> 
 <meta http-equiv="cache-control" content="no-cache"> 
 <meta http-equiv="expires" content="0">  
 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 
 <meta http-equiv="description" content="This is my page"> 
 <style type="text/css"> 
  table{ 
   margin: 100px auto; 
  } 

 </style> 
 </head> 

 <body> 
  <table border="0" align="center"> 
   <tr> 
    <td>验证码</td> 
    <td><input type="text" name="checkcode" id="checkcodeID" maxlength="4" size="4"></td> 
    <td><img alt="加载失败" src="image.jsp"></td> 
    <td id="show">√√√</td> 
   </tr> 
  </table> 
 </body> 
 <script type="text/javascript"> 
  //去除空格 
  function trim(str){ 
   //从左侧开始替换空格 
   str = str.replace(/^\s*/,""); 
   //从左侧开始替换空格 
   str = str.replace(/\s$/,""); 
   return str; 
  } 

 </script> 

 <script type="text/javascript"> 
  //创建ajax对象 
  function createAjax(){ 
   var ajax = null; 
   try{ 
    ajax = new ActiveXObject("microsoft.xmlhttp"); 
   }catch(e){ 
    try{ 
     ajax = new XMLHttpRequest(); 
    }catch(e1){ 
     alert("请更换浏览器"); 
    } 
   } 
   return ajax; 
  } 
 </script> 


 <script type="text/javascript"> 
  document.getElementById("checkcodeID").onkeyup = function(){ 
   var checkcode = this.value; 
   //去除空格 
   checkcode = trim(checkcode); 
   if(checkcode.length == 4){ 
    //获取ajax对象 
    var ajax = createAjax(); 
    //获取去空格的内容 

    var method = "POST"; 
    var url = "${pageContext.request.contextPath}/CheckcodeServlet?time="+new Date().getTime(); 
    //准备发送异步请求 
    ajax.open(method, url); 
    //设置请求头POST提交方式才需要 
    ajax.setRequestHeader("content-type", "application/x-www-form-urlencoded"); 
    //拼接实体内容 
    var content = "checkcode=" + checkcode;     
    //发送请求 
    ajax.send(content); 

    //监听服务器状态变化 
    ajax.onreadystatechange = function(){ 
     if(ajax.readyState == 4){ 
      if(ajax.status == 200){ 
       //获取服务器内容 
       var tip = ajax.responseText; 
       //获取图片路径 然后进行放入td中 
       var img = document.createElement("img"); 
       img.src = tip; 
       img.style.width = "14px"; 
       img.style.height = "14px"; 
       var td = document.getElementById("show"); 
       td.innerHTML = ""; 
       td.appendChild(img); 
      } 
     } 
    } 

   } 

  } 
 </script> 
</html> 

 源码下载地址:Ajax实现提交表单时验证码自动验证.rar)

您可能感兴趣的文章:

  • asp.net
    ajax实现无刷新验证码
  • 基于Ajax用户名验证、服务条款加载、验证码生成的实现方法
  • Ajax实现带有验证码的局部刷新登录界面
  • Ajax和PHP正则表达式验证表单及验证码
  • PHP+Ajax验证码验证用户登录
  • thinkphp验证码的实现(form、ajax实现验证)
  • jsp+ajax实现的局部刷新较验验证码(onblur事件触发较验)
  • Ajax提交表单时验证码自动验证
    php后端验证码检测
  • PHP+Ajax实现验证码的实时验证
  • 基于ajax实现验证码功能

然后编写服务端,接收输入的信息,判断是否与验证码相互匹配,将对应的图片的路径以输出流的方式输出

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

对于其他几种验证的生成和使用,其原理一样,开发者可以根据需要,产生多种样式的随机验证码,本文演示demo中提供了数字验证码、数字+字母验证码、中文验证码、仿google验证码,算术验证码等。限于篇幅,其他几种验证码的生成代码略过,敬请谅解。

当输入第4个数字的时候就会出现提示
运行结果:

您可能感兴趣的文章:

  • asp.net
    ajax实现无刷新验证码
  • 基于Ajax用户名验证、服务条款加载、验证码生成的实现方法
  • Ajax实现带有验证码的局部刷新登录界面
  • Ajax和PHP正则表达式验证表单及验证码
  • PHP+Ajax验证码验证用户登录
  • thinkphp验证码的实现(form、ajax实现验证)
  • jsp+ajax实现的局部刷新较验验证码(onblur事件触发较验)
  • PHP生成各种常见验证码和Ajax验证过程
  • PHP+Ajax实现验证码的实时验证
  • 基于ajax实现验证码功能

我们建立一个前端页面index.html,载入jquery,同时在body中加入验证码表单元素:

public class CheckcodeServlet extends HttpServlet { 
 @Override 
 protected void doPost(HttpServletRequest req, HttpServletResponse resp) 
   throws ServletException, IOException { 
  req.setCharacterEncoding("utf-8"); 
  resp.setContentType("text/html;charset=utf-8"); 
  //图片路径 
  String tip = "images/MsgError.gif"; 

  String checkcode = req.getParameter("checkcode"); 
  //测试 
  System.out.println(checkcode); 
  //获取session域中的数字 
  String checkcodeService = (String) req.getSession().getAttribute("CHECKNUM"); 
  //判断 
  if (checkcode.equals(checkcodeService)) { 
   tip = "images/MsgSent.gif"; 
  } 
  //输出路径 
  PrintWriter pw = resp.getWriter(); 
  pw.write(tip); 
  pw.flush(); 
  pw.close(); 
 } 
} 
session_start(); 
getCode(4,60,20); 
function getCode($num,$w,$h) { 
$code = ""; 
for ($i = 0; $i < $num; $i++) { 
$code .= rand(0, 9); 
} 
//4位验证码也可以用rand(1000,9999)直接生成 
//将生成的验证码写入session,备验证时用 
$_SESSION["helloweba_num"] = $code; 
//创建图片,定义颜色值 
header("Content-type: image/PNG"); 
$im = imagecreate($w, $h); 
$black = imagecolorallocate($im, 0, 0, 0); 
$gray = imagecolorallocate($im, 200, 200, 200); 
$bgcolor = imagecolorallocate($im, 255, 255, 255); 
//填充背景 
imagefill($im, 0, 0, $gray); 
//画边框 
imagerectangle($im, 0, 0, $w-1, $h-1, $black); 
//随机绘制两条虚线,起干扰作用 
$style = array ($black,$black,$black,$black,$black, 
$gray,$gray,$gray,$gray,$gray 
); 
imagesetstyle($im, $style); 
$y1 = rand(0, $h); 
$y2 = rand(0, $h); 
$y3 = rand(0, $h); 
$y4 = rand(0, $h); 
imageline($im, 0, $y1, $w, $y3, IMG_COLOR_STYLED); 
imageline($im, 0, $y2, $w, $y4, IMG_COLOR_STYLED); 
//在画布上随机生成大量黑点,起干扰作用; 
for ($i = 0; $i < 80; $i++) { 
imagesetpixel($im, rand(0, $w), rand(0, $h), $black); 
} 
//将数字随机显示在画布上,字符的水平间距和位置都按一定波动范围随机生成 
$strx = rand(3, 8); 
for ($i = 0; $i < $num; $i++) { 
$strpos = rand(1, 6); 
imagestring($im, 5, $strx, $strpos, substr($code, $i, 1), $black); 
$strx += rand(8, 12); 
} 
imagepng($im);//输出图片 
imagedestroy($im);//释放图片所占内存 
}

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

html代码中,<img
src=”code_num.php”即调用了生成的验证码,当点击验证码时,刷新生成新的验证码:

本文实例为大家分享了ajax实现验证码功能的具体代码,供大家参考,具体内容如下

Ajax刷新和验证

8.释放图片所占内存。

验证码生成后,我们要在实际的项目中应用,通常我们使用ajax可以实现点击验证码时刷新生成新的验证码(有时生成的验证码肉眼很难识别),即“看
不清换一张”。填写验证码后,还需要验证所填验证码是否正确,验证的过程是要后台程序来完成,但是我们也可以通过ajax来实现无刷新验证。

图片 2

2.为图片设置背景色;

后台chk_code.php验证:

<p>验证码:<input type="text" class="input" id="code_num" name="code_num" maxlength="4" /> 
<img src="code_num.php" id="getcode_num" title="看不清,点击换一张" align="absmiddle"></p> 
<p><input type="button" class="btn" id="chk_num" value="提交" /></p>

imagecreate() :创建一个新图像
imagecolorallocate() :为图像分配颜色
imagefill() :填充图像
imagerectangle() :画一个矩形(边框)
imagesetstyle() :设置画线风格
imageline() :画一条线段
imagesetpixel() :画点像素
imagepng() :以PNG格式将图像输出到浏览器或文件
imagedestroy() :释放图片所占内存
将上述代码保存为code_num.php,以便调用。

刷新验证码,其实就是重新请求了验证码生成程序,这里要注意的是调用code_num.php时要带上随机参数防止缓存。接下来填写好验证码之后,点“提交”按钮,通过$.post(),前端向后台chk_code.php发送ajax请求。

1.产生一张png的图片;

3.设置字体颜色和样式;

验证码在WEB应用中非常重要,通常用来防止用户恶意提交表单,如恶意注册和登录、论坛恶意灌水等。本文将通过实例讲解使用PHP生成各种常见的验证码包括数字验证码、数字+字母验证码、中文验证码、算术验证码等等以及其Ajax验证过程。

$(function(){ 
... 
$("#chk_num").click(function(){ 
var code_num = $("#code_num").val(); 
$.post("chk_code.php?act=num",{code:code_num},function(msg){ 
if(msg==1){ 
alert("验证码正确!"); 
}else{ 
alert("验证码错误!"); 
} 
}); 
}); 
});

6.加入噪点和干扰线防止注册机器分析原图片来恶意破解验证码;

7.输出图片;

代码中,自定义函数getCode()诠释了验证码的生成过程。运用PHP
GD库自带的图像处理函数,能轻松生成各种想要的图片效果。

$(function(){ 
//数字验证 
$("#getcode_num").click(function(){ 
$(this).attr("src",'code_num.php?' + Math.random()); 
}); 
... 
});

PHP生成验证码的原理:使用PHP的GD库,生成一张带验证码的图片,并将验证码保存在Session中。

后台根据提交的验证码与保存在session中的验证码比对,完成验证。

4.产生4位数的随机的验证码;