php注册+验证码

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');?>" onclick="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>

/*
*提交表单会发生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);
}

@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;
}

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);

}