PHP+javascript制作带提示的验证码源码分享


Posted in PHP onMay 28, 2014

html代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>简单验证码</title>
</head>
<script language="javascript" src="js/checked.js"></script>
<body>
<form id="register" name="register" method="post" >
<table align="center">
    <tr>
      <td ><div align="right">验证码:</div></td>
      <td ><input id="yzm" type="text" name="yzm" size="8" onBlur="javascript:chkyzm(form)" onMouseOver="this.style.backgroundColor='#ffffff'" onMouseOut="this.style.backgroundColor='#e8f4ff'"/></td><td>
        <input id="yzm2" type="hidden" value="" /></td>
      <td align="center" valign="middle"><script>yzm()</script></td>
      <td ><a href="javascript:code()" style="text-decoration:none">看不清</a></td>
      <td width="150"  align="center"><div id="yzm1"><font color="#999999">请输入验证码</font></div></td>
    </tr>  
</table> 
  </form>
</body>
</html>

JS代码:

function chkyzm(form){     //对验证码进行验证
 if(form.yzm.value==""){
  yzm1.innerHTML="<font color=#FF0000>×验证码不能为空</font>"; 
 }else if(form.yzm.value!=form.yzm2.value){
  yzm1.innerHTML="<font color=#FF0000>×验证码输入错误</font>";
 }else{
  yzm1.innerHTML="<font color=green>√验证码输入正确</font>";
 }
}
function yzm(){      //生成验证码
 var num1=Math.round(Math.random()*1000000);//随机小数放大
 var num=num1.toString().substr(0,4);//取4位整数
 var yzm2=document.getElementById("yzm2");
 document.write("<img name=codeimg src=yzm.php?num="+num+"'>");
 yzm2.value=num;
}
function code(){      //重置验证码
 var num1=Math.round(Math.random()*1000000);
 var num=num1.toString().substr(0,4);
 var yzm2=document.getElementById("yzm2");
 document.codeimg.src="yzm.php?num="+num;
 yzm2.value=num;
}

yzm.php代码:

<?php
header("Content-type: image/png");
$im=imagecreate(66,22);       //创建画布
$black=imagecolorallocate($im,0,0,0);   //定义背景
$white=imagecolorallocate($im,255,255,255);  //定义背景
$gray=imagecolorallocate($im,200,200,200);  //定义背景
imagefill($im,0,0,$gray);      //填充颜色
for($i=0;$i<4;$i++){ //定义4位随机数
 $str=mt_rand(1,5);  //定义随机字符所在位置的的Y坐标
 $size=mt_rand(6,9); //定义随机字符的字体
 $authnum=substr($_GET[num],$i,1);  //获取超级链接中传递的验证码
 imagestring($im,$size,(3+$i*15),$str,$authnum,imagecolorallocate($im,rand(0,250),rand(0,250),rand(0,250)));//rand(0,500)数字的模糊程度
}       //水平输出字符串
for($i=0;$i<200;$i++){  //执行for循环,为验证码添加模糊背景
  $randcolor=imagecolorallocate($im,rand(0,255),rand(0,255),rand(0,255)); //创建背景
  imagesetpixel($im,rand()%70,rand()%30,$randcolor);  //绘制单一元素
}
imagepng($im);    //生成png图像
imagedestroy($im);   //销毁图像
?>

注意:PHP需要配置才能执行相关方法。

运行效果:

PHP 相关文章推荐
php相当简单的分页类
Oct 02 PHP
PHP的curl实现get,post和cookie(实例介绍)
Jun 17 PHP
ThinkPHP Mobile使用方法简明教程
Jun 18 PHP
PHP实现对文本数据库的常用操作方法实例演示
Jul 04 PHP
php获取随机数组列表的方法
Nov 13 PHP
用PHP代码给图片加水印
Jul 01 PHP
php批量删除超链接的实现方法
Oct 19 PHP
crontab无法执行php的解决方法
Jan 25 PHP
CodeIgniter框架常见用法工作总结
Mar 16 PHP
PHP写API输出的时用echo的原因详解
Apr 28 PHP
PHP常见过waf webshell以及最简单的检测方法
May 21 PHP
thinkphp5.1 框架导入/导出excel文件操作示例
May 25 PHP
微信支付开发教程(一)微信支付URL配置
May 28 #PHP
php中$美元符号与Zen Coding冲突问题解决方法分享
May 28 #PHP
php轻松实现中英文混排字符串截取
May 28 #PHP
分享一段php获取linux服务器状态的代码
May 27 #PHP
教你如何快捷的使用cmd访问mysql小技巧
May 26 #PHP
将二维数组转为一维数组的2种方法
May 26 #PHP
windwos下使用php连接oracle数据库的过程分享
May 26 #PHP
You might like
apache rewrite_module模块使用教程
2008/01/10 PHP
php 正则匹配函数体
2009/08/25 PHP
解析PHP可变函数的经典用法
2013/06/20 PHP
本地计算机无法启动Apache故障处理
2014/08/08 PHP
php与Mysql的一些简单的操作
2015/02/26 PHP
PHP实现的字符串匹配算法示例【sunday算法】
2017/12/19 PHP
Laravel自定义 封装便捷返回Json数据格式的引用方法
2019/09/29 PHP
Html中JS脚本执行顺序简单举例说明
2010/06/19 Javascript
js中根据字数截取字符串,不能截断url
2012/01/12 Javascript
使用jQuery.fn自定义jQuery翻页插件
2013/01/20 Javascript
Js获取数组最大和最小值示例代码
2013/10/29 Javascript
jquery制作弹窗提示窗口代码分享
2014/03/02 Javascript
WordPress中利用AJAX异步获取评论用户头像的方法
2016/01/08 Javascript
基于JQuery实现图片轮播效果(焦点图)
2016/02/02 Javascript
jQuery dataTables与jQuery UI 对话框dialog的使用教程
2016/09/02 Javascript
简单三步实现报表页面集成天气
2016/12/15 Javascript
移动端使用localResizeIMG4压缩图片
2017/04/22 Javascript
解决ionic和angular上拉加载的问题
2017/08/03 Javascript
在 Vue.js中优雅地使用全局事件的方法
2019/02/01 Javascript
vue-router路由懒加载及实现的3种方式
2021/02/28 Vue.js
Python中字符串格式化str.format的详细介绍
2017/02/17 Python
答题辅助python代码实现
2018/01/16 Python
Python传递参数的多种方式(小结)
2019/09/18 Python
Python对Tornado请求与响应的数据处理
2020/02/12 Python
Python使用sqlite3模块内置数据库
2020/05/07 Python
CSS3 渐变(Gradients)之CSS3 线性渐变
2016/07/08 HTML / CSS
StubHub美国:购买或出售您的门票
2019/07/09 全球购物
static函数与普通函数有什么区别
2015/12/25 面试题
Unix里面如何在后台运行程序
2016/10/14 面试题
创业计划书中包含的9个方面
2013/12/26 职场文书
小饰品店的创业计划书范文
2013/12/28 职场文书
中文专业学生自我评价范文
2014/02/06 职场文书
安全生产实施方案
2014/02/23 职场文书
会计电算化实训报告
2014/11/04 职场文书
支教个人总结
2015/03/04 职场文书
2016年感恩母亲节活动总结
2016/04/01 职场文书