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设计模式 Facade(外观模式)
Jun 26 PHP
关于Sphinx创建全文检索的索引介绍
Jun 25 PHP
PHP实现ftp上传文件示例
Aug 21 PHP
php实现汉字验证码和算式验证码的方法
Mar 07 PHP
解决nginx不支持thinkphp中pathinfo的问题
Jul 21 PHP
php实现表单多按钮提交action的处理方法
Oct 24 PHP
PHP框架Laravel学习心得体会
Oct 28 PHP
PHP处理数组和XML之间的互相转换
Jun 02 PHP
thinkphp5.1 文件引入路径问题及注意事项
Jun 13 PHP
php反射学习之依赖注入示例
Jun 14 PHP
php实现 master-worker 守护多进程模式的实例代码
Jul 20 PHP
php实现根据身份证获取精准年龄
Feb 26 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
PHP中include/require/include_once/require_once使用心得
2016/08/28 PHP
PHP将英文数字转换为阿拉伯数字实例讲解
2019/01/28 PHP
filemanage功能中用到的lib.js
2007/04/08 Javascript
innerhtml用法 innertext用法 以及innerHTML与innertext的区别
2009/10/26 Javascript
Jquery常用技巧收集整理篇
2010/11/14 Javascript
jquery向.ashx文件post中文乱码问题的解决方法
2011/03/28 Javascript
js、css、img等浏览器缓存问题的2种解决方案
2013/10/23 Javascript
jquery 绑定回车动作扑捉回车键触发的事件
2014/03/26 Javascript
JS函数重载的解决方案
2014/05/13 Javascript
jQuery对于显示和隐藏等常用状态的判断方法
2014/12/13 Javascript
jquery中表单 多选框的一种巧妙写法
2015/09/06 Javascript
jQuery实现折叠、展开的菜单组效果代码
2015/09/16 Javascript
浅谈JavaScript中面向对象的的深拷贝和浅拷贝
2016/08/01 Javascript
JavaScript易错知识点整理
2016/12/05 Javascript
单击按钮发送验证码,出现倒计时的简单实例
2017/03/17 Javascript
Bootstrap里的文件分别代表什么意思及其引用方法
2017/05/01 Javascript
jquery实现搜索框功能实例详解
2018/07/23 jQuery
React router动态加载组件之适配器模式的应用详解
2018/09/12 Javascript
vue的滚动条插件实现代码
2019/09/07 Javascript
JavaScript缺少insertAfter解决方案
2020/07/03 Javascript
详解node.js 事件循环
2020/07/22 Javascript
vue 组件之间事件触发($emit)与event Bus($on)的用法说明
2020/07/28 Javascript
基于python的汉字转GBK码实现代码
2012/02/19 Python
Python正则表达式匹配HTML页面编码
2015/04/08 Python
Python 多线程抓取图片效率对比
2016/02/27 Python
Python读取一个目录下所有目录和文件的方法
2016/07/15 Python
selenium+python 对输入框的输入处理方法
2018/10/11 Python
世界上最大的在线学习和教学市场:Udemy
2017/11/08 全球购物
加拿大床上用品、家居装饰、厨房和浴室产品购物网站:Linen Chest
2018/06/05 全球购物
关键字final的用法
2013/10/02 面试题
教育课题研究自我鉴定范文
2013/12/28 职场文书
先进个人获奖感言
2014/01/24 职场文书
置业顾问岗位职责
2014/03/02 职场文书
《七律·长征》教学反思
2016/02/16 职场文书
Web应用开发TypeScript使用详解
2022/05/25 Javascript
Beekeeper Studio开源数据库管理工具比Navicat更炫酷
2022/06/21 数据库