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 引用是个坏习惯
Mar 12 PHP
PHP下对字符串的递增运算代码
Aug 21 PHP
php 记录进行累加并显示总时长为秒的结果
Nov 04 PHP
那些年一起学习的PHP(一)
Mar 21 PHP
iis下php mail函数的sendmail配置方法(官方推荐)
Apr 25 PHP
php实现加减法验证码代码
Feb 14 PHP
关于php支持分块与断点续传文件下载功能代码
May 09 PHP
ThinkPHP之M方法实例详解
Jun 20 PHP
配置eAccelerator和XCache扩展来加速PHP程序的执行
Dec 22 PHP
php中get_magic_quotes_gpc()函数说明
Feb 06 PHP
laravel ORM 只开启created_at的几种方法总结
Jan 29 PHP
ThinkPHP5.0多个文件上传后找不到临时文件的修改方法
Jul 30 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学习笔记 IIS7下安装配置php环境
2012/10/29 PHP
深入解析PHP中逗号与点号的区别
2013/08/05 PHP
typecho插件编写教程(二):写一个新插件
2015/05/28 PHP
PHP类的特性实例分析
2016/09/28 PHP
利用PHP生成静态html页面的原理
2016/09/30 PHP
ThinkPHP删除栏目(实现批量删除栏目)
2017/06/21 PHP
javascript针对DOM的应用实例(一)
2012/04/15 Javascript
window.opener用法和用途实例介绍
2013/08/19 Javascript
关于js中for in的缺陷浅析
2013/12/02 Javascript
2种jQuery 实现刮刮卡效果
2015/02/01 Javascript
举例讲解JavaScript中将数组元素转换为字符串的方法
2015/10/25 Javascript
JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
2015/12/04 Javascript
Angular中$compile源码分析
2016/01/28 Javascript
JavaScript必知必会(五) eval 的使用
2016/06/08 Javascript
AngularJS 输入验证详解及实例代码
2016/07/28 Javascript
AngularJS ng-bind-html 指令详解及实例代码
2016/07/30 Javascript
JavaScript简单验证表单空值及邮箱格式的方法
2017/01/20 Javascript
基于Vue2的独立构建与运行时构建的差别(详解)
2017/12/06 Javascript
Node.js assert断言原理与用法分析
2019/01/04 Javascript
微信小程序使用map组件实现解析经纬度功能示例
2019/01/22 Javascript
ES11新增的这9个新特性,你都掌握了吗
2020/10/15 Javascript
Vue项目中使用mock.js的完整步骤
2021/01/12 Vue.js
Python实现删除Android工程中的冗余字符串
2015/01/19 Python
Python基础教程之浅拷贝和深拷贝实例详解
2017/07/15 Python
浅谈tensorflow1.0 池化层(pooling)和全连接层(dense)
2018/04/27 Python
Python高级特性之闭包与装饰器实例详解
2019/11/19 Python
matplotlib基础绘图命令之errorbar的使用
2020/08/13 Python
python使用建议与技巧分享(一)
2020/08/17 Python
职称评定自我鉴定
2014/03/18 职场文书
研究生毕业论文导师评语
2014/12/31 职场文书
读完《骆驼祥子》的观后感!
2019/07/05 职场文书
Angular性能优化之第三方组件和懒加载技术
2021/05/10 Javascript
Python爬虫之自动爬取某车之家各车销售数据
2021/06/02 Python
Vue图片裁剪组件实例代码
2021/07/02 Vue.js
记一次Mysql不走日期字段索引的原因小结
2021/10/24 MySQL
JS前端canvas交互实现拖拽旋转及缩放示例
2022/08/05 Javascript