最新消息:文章中包含代码时,请遵守代码高亮规范!

php生成验证码及原生js进行ajax验证

JavaScript homer 2711浏览 0评论

博客里已经有3篇此类文章了,我使用的方法里很多都借鉴了这3篇,只是ajax验证尝试使用原生js实现而不是jQuery,如果有错误的地方请指正;

首先生成验证码的页面:ptest.php


<?php
 
 session_start();

$str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890';

$img = imagecreate(60, 30);

$bg_color = imagecolorallocate($img, 255, 255, 255); //背景颜色
 $text_color = imagecolorallocate($img, 0, 0, 0); //文本颜色

$captcha = []; //初始化验证码文本数组
 $x_offset = rand(6, 8); //文本在背景上的水平偏移量
 for ($i = 0; $i <= 3; $i++) { //4个验证码
 $captcha[$i] = $str[mt_rand(0, strlen($str) - 1)]; //为数组中4个元素随机赋值
 $font = 'times.ttf'; //引入字体,增加一点样式。。。
 $y_offset = rand(14, 22); //文本在背景上的垂直偏移量
 imagettftext($img, 14, 0, $x_offset, $y_offset, $text_color, $font, $captcha[$i]); //在背景上写入文本
 $x_offset += rand(12, 14); //每循环一次,改变水平偏移量

}

$_SESSION['captcha_str'] = strtolower(implode($captcha)); //存入session

header('Content-type:image/png');
 imagepng($img); //输出png图片
 imagedestroy($img); //释放与$img相关的内存

 

ajax验证页面:jsajax.html


<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>jsajax</title>
</head>
<body>
 <img src="ptest.php" id="img-btn" style="border:1px solid black;width:60px;height:30px;"> <!--放验证码图片-->
 <input type="text" name="yzm" id="i-captcha" value=""> <!--user输入验证码的框-->
 <input type="submit" name="submit" value="提交验证码" id="sub-btn"> <!--提交按钮-->
 <script>
 var imgBtn = document.getElementById("img-btn"); 
 var imgBtnVal = imgBtn.getAttribute("src"); //获取img中src的路径

var iCaptcha = document.getElementById("i-captcha");
 var iCaptchaVal = null; //验证码输入框的value值

var subBtn = document.getElementById("sub-btn");
 
 iCaptcha.onblur=function(){
 iCaptchaVal = iCaptcha.value; //在输入框输入验证码后,获取value值
 }

imgBtn.onclick=function(){
 this.setAttribute("src", imgBtnVal+"?"+Math.random()); //点击刷新验证码
 }

subBtn.onclick=function(){

var xhr = new XMLHttpRequest(); //提交后初始化一个XMLHttpRequest对象,(暂时不做兼容性,只实现功能)
 xhr.open("get", "js-check-captcha.php?yzm=" + iCaptchaVal, false); //启动一个请求
 xhr.send(null); //发送请求,url中已有数据,所以这儿是null

if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) { //200表示响应成功返回,别的不是很明白 
 xhr.responseText == 1 ? alert("验证成功") : alert("验证失败"); //根据js-check-captcha.php页面返回值的不同进行不同的操作
 }
 }
 </script>
</body>
</html>

最后判断页面:js-check-captcha.php


<?php
 session_start();

if (isset($_GET['yzm'])) {
 if( strtolower(trim($_GET['yzm'])) == $_SESSION['captcha_str'] ) { //判断get到的值和session中的值是否相等
 echo 1;
 } else {
 echo 0;
 }
 }

 

转载时请注明出处及相应链接,本文永久地址:https://www.askaura.com/10274.html


pay_weixin
pay_weixin
微信打赏
pay_weixin
支付宝打赏
感谢您对作者homer的打赏,我们会更加努力!    如果您想成为作者,请点我

您必须 登录 才能发表评论!