php注册+验证码

最新推荐文章于 2023-02-28 13:37:15 发布

xiaobaig0407

最新推荐文章于 2023-02-28 13:37:15 发布

阅读量582

点赞数

分类专栏： PHP

本文链接：https://blog.csdn.net/xiaobaig0407/article/details/48314919

版权

PHP 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

 
reg.html:
   <?php $this->load->view('home/header.html')?>

	<!-- 载入公共头部文件-->
	<!-- 载入商品筛选-->
	
	<!-- 载入公共头部文件-->
	<link href="<?php echo base_url('public/home/css/reg.css'); ?>" type="text/css" rel="stylesheet" >
    <script src="<?php echo base_url('public/home/js/regCheck.js'); ?>"></script>
	<div id="regBox">
		<div class='header'>
			已有本站账号?<a href="">登录</a>
		</div>
		<div class='form'>
		<form action="<?php echo site_url('reg/insert');?>" method="post" id="regForm">
			<dl>
				<dt>邮箱</dt>
				<dd class='text'><input ajax=1 class='must' type="text"   name="email" /></dd>
				<dd class='prompt'>用于登录和找回密码，不会公开</dd>
			</dl>
			<dl>
				<dt>用户名</dt>
				<dd class='text'><input class='must' ajax=1 type="text" name="username"  /></dd>
				<dd class='prompt'></dd>
			</dl>
			<dl>
				<dt>创建密码</dt>
				<dd class='text'><input class='must' id="password" type="password" name="password" preg=""/></dd>
				<dd class='prompt'></dd>
			</dl>
			<dl>
				<dt>确认密码</dt>
				<dd class='text'><input class='must' type="password" name="password_d"/></dd>
				<dd class='prompt'></dd>
			</dl>
			<!--
			<dl>
				<dt>所在城市</dt>
				<dd class='area'>
					<select id="s_province" name="s_province"></select>
					<select id="s_city" name="s_city" ></select>
					<select id="s_county" name="s_county"></select>
					<script type="text/javascript" src="__ROOT__/classLibs/area/area.js"></script>
					<script type="text/javascript">_init_area();</script>
				</dd>
				<dd class='prompt'></dd>
			</dl>
			-->
			<dl>
			
			
				<dt>验证码</dt>
				<dd class='text code' style="width:200px;"><input ajax=1 class='must' type="text"  name="code"/><img id="cap" src="<?php echo site_url('reg/rand_create');?>" οnclick="rand_ge.call(this)"></dd>
				<script type="text/javascript">
				 //用随机数通过不定参数随机生成验证码
				 function rand_ge(){
					//document.getElementById('cap').src = "<?php echo site_url('reg/rand_create');?>"+"/"+Math.random()+1000;
					
					var src = "<?php echo site_url('reg/rand_create');?>"+"/"+Math.random()+1000;
					$(this).attr('src',src);
					///var ca = document.getElementById("cap").attributes["src"].value; 
						
				}

				var __JSONCO_ = "<?php echo site_url('reg'); ?>";
				alert(__JSONCO_);
				</script>
				<dd class='prompt'></dd>
			</dl>
			<dl>
				<dt></dt>
				<dd class='submit'><input type="submit" value="注册"></dd>
			</dl>
		</form>
		</div>
	</div>
</body>
</html>

reg.js:

/*
*提交表单会发生submit事件
*/

//通过样式切换，每一个获得焦点
//遍历每个输入标签，得到数组，令初始状态status为false,
//表单提交时先检验，如果初始状态status为0则不能提交
//给元素加事件，先是获得焦点事件，写json数组填入提示信息
//调用获得焦点显示函数，找到元素给出提示信息
//然后调用失去焦点事件，获得输入值，
//如果为空，调用错误显示函数，找到元素给出提示信息
//如果是对比密码则不等就行
//否则话通过正则表达式进行对比，不符合则产生错误，符合则继续通过需要ajax验证的进行验证
//ajax验证：将url,data,以及返回数据类型传入，逻辑层获取值进行较检，成功后回调函数
//所有符合则
var als = [];
$(function(){
	$('#regForm').submit(function(){
		//check();
		for(var i=0;i<als.length;i++){
			alert(als[i].statust);
			if(als[i].statust === false){
				
				return false;
			}
		}
	});
	check();
})


var checkForm ={
	'email':{
		focust:'请填写email',
		empty:'不能空',
		preg:/^[a-z0-9\.]+@[a-z0-9]+\.[a-z]+$/i,
		error:'邮箱格式错误',
	},
	'username':{
		focust:'username',
		empty:'不能为空',
		preg:/^[a-z]\w{5,15}$/i,
		error:'邮箱格式错误',
	},
	'password':{
		focust:'请填写password',
		empty:'不能为空',
		preg:/^\S{6,32}$/,
		error:'密码格式错误',
	},
	'password_d':{
		focust:'请填写password_d',
		empty:'不能为空',
		error:'密码不一错误',
	},
	'code':{
		focust:'请填写coded',
		empty:'不能为空',
		preg:/^[a-z0-9]{5}$/i,
		error:'证码格式错误',
	}
}

function check(){
	//jquery对象
	var aMust = $('#regForm  .must');
	
	aMust.each(function(){
		//alert(this);
		//this是一个HTML元素对象
		als.push(this);
		this.statust = false;
	});
	
	for(var i=0;i<als.length;i++){
		als[i].onfocus = function(){
			var name =this.name;
			//alert()
			var msg = checkForm[name]['focust'];
			var test=3;
			showFocus.call(this,msg);
			this.onblur = function(){
				//取得val
				var val = this.value;
				//为空
				alert(val);
				if(val == ''){
					//alert(val);
					var msgt = checkForm[name]['empty'];
					showError.call(this,msgt);
					return ;
				}
				if(name == 'password_d'){
					if($("#password").val() !=val){
						var msga = checkForm[name]['error'];
						showError.call(this,msga);
						//return false;
					}else{
						//alert(8888);
						showSuccess.call(this,'成功');
						return false;
					}
					
				}else{
					//alert(val);
					var preg = checkForm[name]['preg'];
					//alert(preg);
					if(!preg.test(val)){
						var msga = checkForm[name]['error'];
						//alert(msga);
						showError.call(this,msga);
					}
				}
				if($(this).attr('ajax') ==1){
					var url = __JSONCO_+'/check';
					var self=this;
					$.ajax({url:url,type:'post',data:{name:name,valu:val},
					//服务器返回类型
					dataType:'json',
					success:function(result){
						if(result.status==1){
							showSuccess.call(self,'成功');
						}else{
							showError.call(self,result.msg);
						}
						
					}});
				}else{
					showSuccess.call(this,'成功');
				}
				
			}
			
		}
	}
	//alert(1);
}

function showFocus(msgt){
	
	var parent = $(this).parents('dl');
	var opRompt = parent.find('.prompt');
	parent.attr('class','focus');
	//alert(opRompt.attributes["class"].value);
	
	opRompt.html(msgt);
}

function showSuccess(msgt){
	
	var parent = $(this).parents('dl');
	var opRompt = parent.find('.prompt');
	parent.attr('class','success');
	//alert(opRompt.attributes["class"].value);
	
	this.statust = true;
	alert(this.statust);
	opRompt.html(msgt);
}

function showError(msga){
	
	var parent = $(this).parents('dl');
	var opRompt = parent.find('.prompt');
	//alert(opRompt.html());
	parent.attr('class','error');
	//alert(opRompt.attributes["class"].value);
	this.statust = false;
	opRompt.html(msga);
}

reg.css:

@CHARSET "UTF-8";
#regBox{
	width:900px;
	height:520px;
	padding:20px 30px;
	border:solid 1px #d4d4d4;
	margin:30px auto;
	background:#FFF;
	box-shadow:0px 0px 3px #d4d4d4;
}
#regBox .header{
	width:100%;
	height:30px;
	line-height:30px;
	font-size:14px;
	text-align:right;
	border-bottom:1px solid #d9e8e8;
}
#regBox .header a{
	color:#6ce0e3;
}
#regBox .form{
	width:100%;
	height:auto;
	margin-top:15px;
}
#regBox .form dl{
	width:100%;
	height:30px;
	padding:11px 0px;
	margin-top:5px;
}
#regBox .form dl dt{
	width:70px;
	padding-right:10px;
	height:30px;
	float:left;
	font-size:14px;
	text-align:right;
	line-height:30px;
}
#regBox .form dl dd{
	float:left;
	height:30px;
	line-height:30px;
}
#regBox .form dl dd.text{
	width:240px;
	overflow:hidden;
}
#regBox .form dl .text input{
	width:230px;
	height:26px;
	border:1px solid #cccccc;
	font-size:14px;
	text-indent:5px;
	color:#000;
}
#regBox .form dl dd.prompt{
	height:18px;
	line-height:18px;
	border:1px solid #a4dbfe;
	font-size:14px;
	padding:5px 5px 5px 30px;
	display:none;
	background-color:#e5f5ff;
	background-image:url(../images/icons.png);
	background-repeat:no-repeat;
}
#regBox .form dl dd.area{
	width:180px;	
	overflow:hidden;
}
#regBox .form dl .area select{
	width:50px;
}
#regBox .form dl dd.code{
	width:80px;
}
#regBox .form dl dd.code input{
	width:70px;
}
#regBox .form dl .submit input{
	cursor:pointer;
	width:78px;
	height:30px;
	font-size:14px;
	border-radius:2px;
	border:0;
	background-color: #29B4A8;
    background-image: -moz-linear-gradient(center top , #25B0A4, #2EB8AC);
	background-image: -webkit-linear-gradient(center top , #25B0A4, #2EB8AC);
	background-image: -o-linear-gradient(center top , #25B0A4, #2EB8AC);
    border-color: #23A79C;
    box-shadow: 0 1px 0 #2AC2B5 inset;
    color: white;
}
#regBox .form dl .submit input:hover{
	background-image: -moz-linear-gradient(center top , #59bfbf, #3dbebe);
	background-image: -weikit-linear-gradient(center top , #59bfbf, #3dbebe);
	background-image: -o-linear-gradient(center top , #59bfbf, #3dbebe);
}

/** 样式切换  **/
/** 获得焦点 **/
#regBox .form dl.focus{
	background:#fdf0e3;
}
#regBox .form .focus .text input{
	border:1px solid #ffa960;
	box-shadow:0px 0px 1px #999 inset;
}
#regBox .form .focus dd.prompt{
	background-position:6px -93px;
	display:block;
}
/** 验证失败 **/
#regBox .form dl.error{
	background:none;
}
#regBox .form .error .text input{
	border:1px solid #ee4d3d;;
	box-shadow:0px 0px 3px #ee4d3d inset;
}
#regBox .form .error dd.prompt{
	background-position:6px -193px;
	background-color:#ffcece;
	border:1px solid #ff8080;
	display:block;
}
/**  验证成功 **/
#regBox .form dl.success{
	background:none;
}
#regBox .form .success dd.prompt{
	background-position:6px 6px;
	background-color:#FFF;
	border:0;
	display:block;
}

reg.php

public function rand_gene(){
			
			$str = "1,2,3,4,5,6,7,8,9,a,b,c,d,e,f,g,h,i,j,k,m,n,p,q,r,s,t,y,z";

			$list = explode(",", $str);

			$cmax = count($list) - 1;

			$verifyCode = '';

			for ( $i=0; $i < 5; $i++ ){

			$randnum = mt_rand(0, $cmax);

			//取出字符，组合成验证码字符

			$verifyCode .= $list[$randnum];

			}
			$_SESSION['veri'] =  $verifyCode;
			return $verifyCode;
		}
		
		public function rand_create(){

			

			 
            	session_start();
			//生成验证码图片
			//要清除缓存，前而不能有任何输出
		    ob_clean();
			$verifyCode = $this->rand_gene();

			//要显示的字符，可自己进行增删

			

			//var_dump($verifyCode);
			
			//避免程序读取session字符串破解，生成的验证码用MD5加密一下再放入session，提交的验证码md5以后和seesion存储的md5进行对比

			//直接md5还不行，别人反向md5后提交还是可以的，再加个特定混淆码再md5强度才比较高,总长度在14位以上

			//网上有反向md5的 Rainbow Table，64GB的量几分钟内就可以搞定14位以内大小写字母、数字、特殊字符的任意排列组合的MD5反向

			//但这种方法不能避免直接分析图片上的文字进行破解，生成gif动画比较难分析出来

			 

			//加入前缀、后缀字符，prestr endstr 为自定义字符，将最终字符放入SESSION中

			//$_SESSION['randcode'] =  md5("a".$verifyCode."b");
			//$str =  md5("a".$verifyCode."b");
			//var_dump($str);
			//exit();

			//生成图片
			

			$im = imagecreate(58,28);
			
			//此条及以下三条为设置的颜色

			$black = imagecolorallocate($im, 0,0,0);

			$white = imagecolorallocate($im, 255,255,255);

			$gray = imagecolorallocate($im, 200,200,200);

			$red = imagecolorallocate($im, 255, 0, 0);

			//给图片填充颜色

			imagefill($im,0,0,$white);

			 

			//将验证码写入到图片中
//$verifyCode = 'abce';
$_SESSION['randcode'] =  $verifyCode;
			imagestring($im, 2, 13, 7, $_SESSION['randcode'], $black);

			 

			//加入干扰象素
/* 
			for($i=0;$i<50;$i++)

			{

			$randcolor = ImageColorallocate($im,rand(0,255),rand(0,255),rand(0,255)); 

					imagesetpixel($im, rand()%70 , rand()%30 , $randcolor); 

			} */
header("Content-type: image/png");
			imagepng($im);

			imagedestroy($im);

		}

xiaobaig0407

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
php注册+验证码

reg.html: load->view('home/header.html')?> " type="text/css" rel="stylesheet" > "> 已有本站账号?登录 " method="post" id="regForm"> 邮箱用于登录和找回密码，不会公开
复制链接

扫一扫

专栏目录