登陆验证码实现:登陆页面(php)生成16进制随机数,并带着随机数到valcode.php页面生成验证码
<?php if(isset($_SESSION)){session_start();} include_once 'conn/conn.php'; for($i=0;$i<4;$i++){ $num= dechex(rand(0,15));//生成16进制随机数 } ?> <p> <span>用户名: <input id="lgname" type="text" style=" 75px; height: 16px; border: 1px #999999 solid;" /> </span><br /> <span>密 码: <input id="lgpwd" type="password" style=" 75px; height: 16px; border: 1px #999999 solid;" /> </span><br /> <span>验证码: <input id="lgchk" type="text" style=" 75px; height: 16px; border: 1px #999999 solid;" /> </span><br /> <span> <img id='chkid' src="./valcode.php?num=<?php echo $num; ?>" width="55" height="18" /> <a id="changea" style="cursor:hand;">看不清</a> </span> </p> <div style=" height: 25px; line-height: 25px;"> <input id="chknm" name="chknm" type="hidden" value="<?php echo $num; ?>"/> <a id="lgbtn" style=" color:#f0f0f0;">登录</a> <a id="reg" style=" color:#f0f0f0;">注册</a> <a id="foundbtn" style=" color:#f0f0f0;">找回密码</a> </div> </div>
当点击“看不清”的时候,从用户体验效果出发,需要使用JavaScript无刷新生成验证码;但是使用JavaScript生成十六进制随机数,稍有些复杂。JavaScript中不能直接将十进制数转为十六进制,需要手动进行转换。首先使用Math.random()函数生成0~15之间的随机数,然后使用Math.ceil()函数将随机数取整,接下来就要逐次判断该值,如果该值大于9,那么将10~15的数一一对应转换为a、b…,一直到f。转换完成后,将值累加,最后传给valcode.php页。
使用JavaScript生成十六进制随机数的完整代码如下:
//生成随机数 function showval(){ num = ''; for(i=0;i<4;i++){//循环输出四位验证码 tmp = Math.ceil((Math.random() * 15));//取出一位十六进制的整数 if(tmp > 9){//依次判断随机数 switch(tmp){ case(10)://如果随机数等于10,换为a num += 'a'; break; case(11): num += 'b';//如果随机数等于11,换为b break; case(12): num += 'c';//如果随机数等于12,换为c break; case(13): num += 'd';//如果随机数等于13,换为d break; case(14): num += 'e';//如果随机数等于14,换为e break; case(15): num += 'f';//如果随机数等于15,换为f break; } }else{ num += tmp; } } $('chkid').src='valcode.php?num='+num;//将生成的随机数传给图像生成页 $('chknm').value = num;//将随机数的值保存到页面的隐藏域中 }
附上图像生成页代码(实现的功能是验证)
//生成随机数 function showval(){ num = ''; for(i=0;i<4;i++){//循环输出四位验证码 tmp = Math.ceil((Math.random() * 15));//取出一位十六进制的整数 if(tmp > 9){//依次判断随机数 switch(tmp){ case(10)://如果随机数等于10,换为a num += 'a'; break; case(11): num += 'b';//如果随机数等于11,换为b break; case(12): num += 'c';//如果随机数等于12,换为c break; case(13): num += 'd';//如果随机数等于13,换为d break; case(14): num += 'e';//如果随机数等于14,换为e break; case(15): num += 'f';//如果随机数等于15,换为f break; } }else{ num += tmp; } } $('chkid').src='valcode.php?num='+num;//将生成的随机数传给图像生成页 $('chknm').value = num;//将随机数的值保存到页面的隐藏域中 }
当页面第一次被载入时,将PHP页面生成的16进制数带到valcode.php生成验证码;当验证码中带有干扰串用户看不清,可以单击首页中“看不清”时,是使用showval函数生成的验证码;
if($('lgchk').value == ''){ alert('请输入验证码'); $('lgchk').select(); return false; } if($('lgchk').value != $('chknm').value){ alert('验证码输入错误'); $('lgchk').select(); return false;
}
这里验证的是验证码上的数字和隐藏域中的数字;