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 09 PHP
基于PHP与XML的PDF文档生成技术
Oct 09 PHP
DISCUZ 分页代码
Jan 02 PHP
PHP多线程抓取网页实现代码
Jul 22 PHP
PHP中cookie和session的区别实例分析
Aug 28 PHP
PHP模拟QQ登录的方法
Jul 29 PHP
简单解析PHP程序的运行流程
Jun 23 PHP
如何使用php等比例缩放图片
Oct 12 PHP
PHP图像识别技术原理与实现
Oct 27 PHP
php中通过eval实现字符串格式的计算公式
Mar 18 PHP
PHP预定义超全局数组变量小结
Aug 20 PHP
PHP使用DOM对XML解析处理操作示例
Jul 04 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
山进SANGEAN ATS-909X电路分析
2021/03/02 无线电
discuz加密解密函数使用方法和中文注释
2014/01/21 PHP
php5.3提示Function ereg() is deprecated Error问题解决方法
2014/11/12 PHP
php parse_str() 函数的定义和用法
2016/05/23 PHP
Laravel ORM 数据model操作教程
2019/10/21 PHP
jquery利用event.which方法获取键盘输入值的代码
2011/10/09 Javascript
jquery动态添加元素事件失效问题解决方法
2014/05/23 Javascript
使用jQuery实现星级评分代码分享
2014/12/09 Javascript
jQuery实现自定义右键菜单的树状菜单效果
2015/09/02 Javascript
基于js实现微信发送好友如何分享到朋友圈、微博
2015/11/30 Javascript
JS模拟实现方法重载示例
2016/08/03 Javascript
原生js编写基于面向对象的分页组件
2016/12/05 Javascript
前端 Vue.js 和 MVVM 详细介绍
2016/12/29 Javascript
Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法
2017/02/27 Javascript
让微信小程序支持ES6中Promise特性的方法详解
2017/06/13 Javascript
详解vue-cil和webpack中本地静态图片的路径问题解决方案
2017/09/27 Javascript
vue+springboot实现项目的CORS跨域请求
2018/09/05 Javascript
Vue项目查看当前使用的elementUI版本的方法
2018/09/27 Javascript
微信小程序实现授权登录
2019/05/15 Javascript
vue-iview动态新增和删除的方法
2020/06/17 Javascript
vue中axios封装使用的完整教程
2021/03/03 Vue.js
python获取文件扩展名的方法
2015/07/06 Python
浅谈python写入大量文件的问题
2018/11/09 Python
python求最大值最小值方法总结
2019/06/25 Python
window7下的python2.7版本和python3.5版本的opencv-python安装过程
2019/10/24 Python
Django数据模型中on_delete使用详解
2020/11/30 Python
成人毕业生自我鉴定
2013/10/18 职场文书
文史专业毕业生自荐信
2013/11/17 职场文书
领导班子自我剖析材料
2014/08/16 职场文书
2014年实习生工作总结
2014/11/27 职场文书
好人好事新闻稿
2015/07/17 职场文书
选调生挂职锻炼工作总结
2015/10/23 职场文书
七年级语文教学反思
2016/03/03 职场文书
党组织结对共建协议书
2016/03/23 职场文书
前端vue+express实现文件的上传下载示例
2022/02/18 Vue.js
JavaScript声明变量和数据类型的转换
2022/04/12 Javascript